Judul dan Paragraf

Hampir seluruh isi halaman web berupa teks yang tertata dalam judul dan paragraf. Topik ini membahas enam elemen judul dari h1 sampai h6, disiplin hierarkinya, elemen p untuk paragraf, serta kerangka dokumen yang terbentuk dari keduanya. Setelah mengikuti topik ini, dokumen teks dengan hierarki judul yang tertib dan paragraf yang terpisah dengan benar dapat disusun dari awal.

Enam tingkat judul#

HTML menyediakan enam tingkat judul (heading), yaitu elemen h1, h2, sampai h6. Tingkat itu menyatakan kedudukan sebuah bagian di dalam isi, dengan h1 sebagai judul utama dan h6 sebagai tingkat terdalam. Browser menampilkan judul secara tebal dengan ukuran yang menurun mengikuti tingkatnya, tetapi ukuran tampil itu hanya gaya bawaan dan bukan bagian dari makna elemen.

<h1>Rekap Nilai Ujian</h1>
<h2>Nilai Kelas Tujuh</h2>
<h3>Ujian Tengah Semester</h3>

Setiap elemen judul berdiri sebagai blok tersendiri, sehingga browser menampilkannya pada baris baru meskipun penulisannya bersambung dengan teks lain. Kedudukan yang dibawa tingkat judul itulah yang dibaca oleh pembaca layar, mesin pencari, dan alat pembentuk kerangka dokumen. Karena itu, pemilihan tingkat judul adalah keputusan struktur dan bukan keputusan tampilan.

Jumlah tingkat yang tersedia tidak menuntut seluruhnya dipakai. Dokumen pendek sering kali cukup dengan h1 dan h2, sedangkan dokumen yang lebih panjang baru memerlukan h3 dan seterusnya. Tingkat terdalam dipakai sesuai kebutuhan isi, dan tidak ada kewajiban mencapai h6 pada setiap dokumen.

Disiplin hierarki h1 sampai h6#

Kerangka judul yang tertib mengikuti tiga aturan. Pertama, satu halaman memuat satu h1 sebagai judul utamanya. Kedua, tingkat judul tidak dilompati, misalnya dari h2 langsung ke h4, karena satu tingkat yang hilang membuat struktur tampak kehilangan sebuah bagian. Ketiga, tingkat yang sama boleh berulang, sehingga dua atau tiga h2 yang sejajar merupakan hal yang wajar.

Arah kembali ke tingkat di atas tidak dibatasi. Setelah urutan h2 dan h3 di bawahnya selesai, judul berikutnya boleh kembali ke h2 yang baru, sejajar dengan h2 sebelumnya, sebagaimana cabang pohon yang berdampingan. Yang dilarang hanyalah menurun dengan melompati satu tingkat.

Elemen p dan pemisahan paragraf#

Elemen p menampung satu paragraf teks. Browser menampilkan setiap p sebagai blok tersendiri dengan jarak di atas dan di bawahnya, sehingga paragraf baru diperoleh dengan membuka p yang baru. Spasi, tab, dan pindah baris yang beruntun pada sumber dipadatkan browser menjadi satu spasi saat dirender.

<p>Teks ini ditulis dengan    spasi beruntun
   dan pindah baris, tetapi tampil sebagai satu alur teks normal.</p>

Karena pemadatan itu, penataan sumber yang rapi tidak mengubah tampilan, dan satu paragraf ditulis dalam satu elemen p. Elemen blok lain seperti div atau judul tidak boleh berada di dalam p. Apabila markup menaruhnya di sana, parser menutup p lebih awal, sehingga markup yang dirender terbelah dari apa yang tertulis pada sumbernya.

Isi p juga dibatasi pada konten sebaris, misalnya teks, tautan, penekanan, dan gambar sebaris. Pembatasan itu menjaga paragraf tetap berupa satu unit teks yang utuh. Bila isi yang perlu ditampung menjadi lebih kompleks, misalnya memuat daftar, gunakan struktur yang lebih tepat alih-alih memaksanya ke dalam p.

Kerangka dokumen#

Hierarki judul membentuk kerangka dokumen (document outline), yaitu gambaran garis besar isi yang tersusun berjenjang. Kerangka itu dipakai pembaca layar untuk melompat antarbagian, dipakai mesin pencari untuk memahami pembagian isi, dan dipakai pembaca manusia untuk memindai halaman dengan cepat. Diagram berikut memperlihatkan kerangka dokumen yang dibangun pada bagian contoh.

Setiap tingkat pada diagram berada tepat satu tingkat di bawah induknya, tanpa tingkat yang dilompati. Bentuk pohon semacam ini menjadi sasaran yang dijaga setiap kali judul baru ditambahkan. Paragraf-paragraf p tidak tampak pada kerangka karena kerangka hanya mengambil judul, sedangkan paragraf mengisi isi di bawah setiap judul.

Dokumen contoh utuh#

Kerangka pada diagram diterjemahkan menjadi berkas utuh berikut.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <title>Jadwal Piket Kelas</title>
  </head>
  <body>
    <h1>Jadwal Piket Kelas</h1>
    <p>Kegiatan piket berlangsung setiap hari kerja dan dimulai pukul 06.30.</p>

    <h2>Piket Pagi</h2>
    <p>Piket pagi bertugas menyapu lantai dan merapikan meja.</p>

    <h3>Sektor Depan</h3>
    <p>Sektor depan mencakup area papan tulis dan pintu masuk.</p>

    <h3>Sektor Belakang</h3>
    <p>Sektor belakang mencakup rak buku dan jendela.</p>

    <h2>Piket Sore</h2>
    <p>Piket sore bertugas membuang sampah dan menutup jendela.</p>
  </body>
</html>

Berkas judul.html memuat satu h1, dua h2, dan dua h3 yang tersusun tanpa lompatan, beserta satu paragraf p di bawah setiap judul. Urutannya sama persis dengan pohon pada diagram kerangka di atas. Berkas disimpan sebagai judul.html, kemudian dibuka dengan browser untuk melihat ukuran bawaan setiap tingkat judul.

Saat berkas tersebut dibuka, h1 tampil paling besar karena menjadi judul utama, disusul h2 yang lebih kecil, dan h3 yang lebih kecil lagi. Ukuran yang menurun itu muncul tanpa satu baris CSS pun, karena berasal dari gaya bawaan browser. Urutan judul pada berkas juga dapat ditelusuri kembali dengan alat pembentuk kerangka pada perangkat pengembang browser, dan hasilnya cocok dengan diagram di atas.

Kesalahan umum#

Tingkat judul dipilih menurut ukuran huruf. h3 kerap dipakai karena terlihat lebih kecil, padahal kedudukannya di dalam isi tidak sesuai. Atur ukuran dengan CSS, dan pilih tingkat menurut struktur isi.

Paragraf dipisah dengan br berulang. Rangkaian br membuat isi terbaca sebagai satu paragraf panjang oleh alat bantu. Pisahkan paragraf dengan menutup p dan membuka p yang baru.

Elemen blok ditulis di dalam p. Parser menutup p secara otomatis sebelum elemen blok tersebut, sehingga markup yang dirender terbelah dan bagian akhir paragraf keluar dari p. Akhiri paragraf dengan </p> sebelum elemen blok berikutnya.

Ringkasan#

• Enam elemen judul dari h1 sampai h6 menyatakan kedudukan bagian di dalam isi, bukan ukuran hurufnya.
• Satu halaman memuat satu h1, dan tingkat judul tidak dilompati.
• Setiap paragraf ditulis dalam satu elemen p, dan pemisahan antarparagraf tidak memakai br.
• Hierarki yang tertib menghasilkan kerangka dokumen yang mudah dinavigasi.

Referensi#

• Elemen Heading — MDN Web Docs — Kaidah penggunaan h1 sampai h6 beserta catatan hierarkinya.
• Elemen p — MDN Web Docs — Peran p sebagai wadah paragraf beserta konten yang boleh ditampungnya.
• Dasar Teks HTML — MDN Web Docs — Panduan dasar judul, paragraf, dan struktur teks.