HTML 02: Menyusun Heading, Paragraf, dan Teks yang Bermakna

Halaman yang baik memiliki susunan tulisan yang jelas. Pembaca harus dapat membedakan judul utama, subjudul, paragraf, dan kata yang penting hanya dengan melihat strukturnya.

Tujuan Belajar

• Menggunakan heading sesuai urutan.
• Menulis paragraf dan pemisah konten.
• Memberikan penekanan berdasarkan makna, bukan sekadar tampilan.

1. Heading h1 sampai h6

HTML menyediakan enam tingkat heading. h1 adalah judul utama, sedangkan h2 hingga h6 digunakan untuk bagian yang semakin dalam.

Umumnya satu halaman mempunyai satu h1. Setelah h2, gunakan h3 untuk subbagian—jangan memilih heading hanya karena ukuran hurufnya terlihat cocok.

2. Paragraf dan Pindah Baris

Gunakan <p> untuk satu gagasan atau paragraf.

Browser mengabaikan sebagian besar Enter dan spasi tambahan dalam kode. Untuk pindah baris yang memang bagian dari isi, seperti alamat atau puisi, gunakan <br>.

Jangan menggunakan banyak <br> untuk membuat jarak. Jarak visual seharusnya diatur dengan CSS.

3. Penekanan Teks

• <strong> menandai informasi sangat penting.
• <em> memberi penekanan pada ucapan atau istilah.
• <mark> menyorot bagian yang relevan.
• <sup> dan <sub> membuat teks atas dan bawah.

Tag-tag tersebut membawa makna bagi pembaca layar. Untuk sekadar membuat teks tebal atau miring sebagai dekorasi, gunakan CSS.

4. Pemisah Bagian

<hr> menandai perpindahan topik, bukan sekadar menggambar garis.

Kesalahan Umum

• Melompati h2 langsung ke h4 tanpa alasan struktur.
• Menggunakan <h1> untuk semua judul.
• Memakai <br><br><br> untuk membuat ruang kosong.
• Memilih <strong> hanya untuk mendapatkan huruf tebal.

Latihan

Buat halaman resep yang memiliki satu h1, minimal dua h2, beberapa paragraf, satu informasi penting dengan strong, dan satu istilah dengan em.

Rangkuman

Heading membentuk kerangka tulisan, paragraf memisahkan gagasan, dan elemen penekanan memberi makna. Struktur yang benar membantu manusia, mesin pencari, dan teknologi pembaca layar memahami artikel Anda.