Tajuk, Perenggan & Teks

12 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Bina rangka tajuk yang logik dengan satu <h1> dan tanpa melangkau tahap
Tahu bila perlu guna <p> baharu dan bila <br> sesuai
Guna <strong> dan <em> untuk menambah makna, dan serahkan rupa kepada CSS

Idea utama

HTML menerangkan makna teks, bukan rupanya. Tajuk ialah tajuk kerana ia memperkenalkan satu bahagian, bukan kerana saiznya besar. Pilih tag berdasarkan makna, kemudian gayakan dengan CSS.

Tajuk ialah rangka kandungan

HTML ada enam tahap tajuk, <h1> hingga <h6>. Bersama-sama, ia berfungsi seperti isi kandungan dalam buku teks: <h1> ialah tajuk keseluruhan halaman, <h2> ialah bab-babnya, <h3> ialah bahagian dalam satu bab, dan seterusnya.

HTML

<h1>Malaysian Drinks</h1>        <!-- the page title: use one -->
  <h2>Hot drinks</h2>             <!-- a chapter -->
    <h3>Teh tarik</h3>            <!-- a section inside it -->
    <h3>Kopi O</h3>
  <h2>Cold drinks</h2>
    <h3>Sirap bandung</h3>

Diinden di sini hanya untuk menunjukkan rangka. Dalam fail sebenar, tajuk-tajuk duduk sebaris.

Guna satu <h1> sahaja untuk setiap halaman: topik utama.
Jangan langkau tahap semasa turun: selepas <h2> sepatutnya <h3>, bukan <h5>.
Jangan pilih tahap tajuk kerana saiznya. Mahu tajuk lebih kecil? Itu kerja CSS.

Kenapa ia penting

Pengguna pembaca skrin selalunya melompat dari tajuk ke tajuk untuk mengimbas halaman, sama seperti anda mengimbas dengan mata. Enjin carian juga menggunakan tajuk untuk memahami isi halaman anda. Rangka yang bersepah menyukarkan kedua-duanya.

Perenggan dan pemisah baris

Pelayar memampatkan semua ruang dan baris baharu dalam HTML anda menjadi satu ruang sahaja. Tekan Enter dalam editor tidak memberi apa-apa kesan pada halaman. Untuk mulakan perenggan baharu, guna <p> baharu. <br> (void element, tiada tag penutup) memaksa baris baharu di dalam satu blok teks, sesuai untuk kandungan yang memang ada pemisah baris: alamat, puisi, tandatangan.

Pemisah baris digunakan untuk jarak

HTML

<p>First idea.<br><br>Second idea.<br><br>Third idea.</p>

Perenggan sebenar

HTML

<p>First idea.</p>
<p>Second idea.</p>
<p>Third idea.</p>

<br><br> nampak serupa, tetapi ia satu perenggan yang berpura-pura jadi tiga. Idea yang berbeza patut ada <p> masing-masing, dan CSS mengawal jarak antaranya.

Kepentingan dan penegasan

<strong>: Sangat penting: amaran, fakta utama. Pelayar memaparkannya tebal secara lalai.
<em>: Penegasan, iaitu tekanan pada perkataan semasa bercakap ("Saya betul-betul maksudkannya"). Dipaparkan condong secara lalai.
<b> / <i>: Tebal dan condong tanpa makna tambahan, contohnya nama produk atau perkataan asing. Guna hanya bila strong/em tidak sesuai.

HTML

<p><strong>Warning:</strong> the tea is very hot.</p>
<p>Pull it <em>slowly</em> the first time.</p>

Makna dahulu, rupa kemudian. Dalam style.css di editor, strong diwarnakan merah. Anda boleh jadikan <em> tebal dan <h1> kecil dengan CSS; maknanya tetap sama. Inilah pembahagian yang anda akan terus guna: HTML menyatakan apa ia, CSS menyatakan bagaimana rupanya.

Penulis resipi ini memilih tahap tajuk berdasarkan saiz. Betulkan rangkanya: nama resipi patut menjadi satu-satunya <h1> di halaman, dan "What you need" serta "Steps" patut menjadi bab <h2>. Ingat untuk tukar kedua-dua tag pembuka dan penutup.

Semakan

Halaman ada tepat satu <h1>
Ada sekurang-kurangnya dua bahagian <h2>
Rangka bermula dengan <h1> dan tidak melangkau tahap

Uji kefahaman

Anda mahu tajuk bahagian kelihatan lebih kecil. Apa patut anda buat?

Tukar daripada <h2> kepada <h6>Kekalkan tahap yang betul dan tukar saiz dengan CSSGuna <p> dengan banyak <br>

Antara berikut, yang mana penggunaan <br> yang sesuai?

Menambah ruang antara dua perengganMemisahkan baris-baris alamat posMenolak tajuk lebih ke bawah halaman

Apakah beza antara <strong> dan <b>?

Tiada, kedua-duanya sama<strong> menandakan teks itu penting; <b> cuma tebal tanpa makna tambahan<b> lebih baharu dan patut sentiasa digunakan

Apa yang anda pelajari

Tajuk membentuk rangka: satu <h1>, kemudian <h2>, <h3>… tanpa melangkau tahap.
Setiap idea ada <p> sendiri; <br> hanya untuk pemisah baris yang memang sebahagian kandungan.
<strong> bermaksud penting, <em> bermaksud ditegaskan. Kedua-duanya menambah makna, bukan sekadar gaya.
Pilih tag berdasarkan makna; ubah rupa dengan CSS.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.