Ilustrasi hierarki teks dari besar ke kecil

Di artikel sebelumnya kamu sudah bisa bikin halaman HTML dan paham kerangkanya. Sekarang kita isi rumahnya dengan perabot paling dasar: teks. Jangan remehkan, karena 90 persen web adalah teks, dan cara kamu menatanya menentukan apakah halamanmu enak dibaca manusia, dimengerti Google, dan bisa diakses semua orang.

Posisinya di perjalanan belajarmu: ini episode 2 dari series HTML Basic. Episode 1 (#12) membahas kerangka dan anatomi tag. Di sini kita tuntas soal teks: heading, paragraf, dan format. Episode 3 (#14) lanjut ke link, gambar, dan media.

Heading: Struktur, Bukan Sekadar Ukuran Font

HTML punya enam level heading, <h1> sampai <h6>. h1 paling penting dan paling besar, h6 paling kecil. Contoh:

<h1>Resep Nasi Goreng</h1>
<h2>Bahan-bahan</h2>
<h3>Bumbu halus</h3>
<h2>Langkah memasak</h2>
<p>Panaskan wajan...</p>

Alur berpikirnya: heading membentuk daftar isi halamanmu. h1 adalah judul bukunya (satu saja per halaman), h2 adalah judul babnya, h3 sub-babnya. Perhatikan contoh di atas: "Bahan-bahan" dan "Langkah memasak" sama-sama h2 karena sejajar, sementara "Bumbu halus" adalah h3 karena bagian dari bahan-bahan. Hierarkinya mengikuti logika isi, bukan selera ukuran font.

Kenapa ini penting? Tiga pembaca selain manusia memakai heading-mu. Google memakai hierarki heading untuk memahami struktur dan topik halamanmu (berpengaruh ke SEO). Screen reader (untuk tunanetra) memakai heading sebagai navigasi: penggunanya bisa lompat dari h2 ke h2 tanpa membaca semuanya. Dan developer lain (termasuk dirimu 6 bulan lagi) membaca heading untuk memahami halaman dengan cepat.

Aturannya: satu h1 per halaman, jangan lompat level (h1 langsung ke h4), dan jangan pakai heading cuma karena "pengen tulisannya besar". Butuh tulisan besar? Itu urusan CSS nanti di #18.

Berhenti dan tebak dulu! Sebuah halaman memakai tiga h1 (untuk judul artikel, judul sidebar, dan judul footer) karena penulisnya ingin ketiganya tampil besar. Apa masalahnya menurut logika hierarki di atas?

Jawaban: ia merusak daftar isi halaman. Tiga h1 berarti tiga "judul buku" dalam satu buku: Google bingung mana topik utamanya, pengguna screen reader tidak bisa bernavigasi dengan benar. Solusinya: satu h1 untuk judul artikel, sidebar dan footer pakai h2 atau h3, dan urusan "tampil besar" diserahkan ke CSS. Ingat prinsipnya: HTML untuk makna, CSS untuk tampilan. Jangan campur.

Paragraf dan Kawan-kawannya

<p> adalah workhorse HTML: setiap blok teks biasa dibungkus paragraf. Browser otomatis memberi jarak antar paragraf, jadi teksmu tidak menempel.

Dua temannya yang sering dipakai: <br> untuk ganti baris di dalam paragraf yang sama (contoh: baris-baris puisi atau alamat), dan <hr> untuk garis horizontal pemisah antar bagian. Keduanya tidak butuh tag penutup.

Ada satu perilaku HTML yang mengejutkan pemula: spasi dan enter berlebih di kode tidak berpengaruh di tampilan. Kamu menulis 10 spasi atau 5 baris kosong di kode, browser menampilkannya sebagai satu spasi. HTML "melipat" whitespace. Kalau butuh spasi yang dipertahankan persis (misalnya puisi atau kode), pakai <pre>, yang menampilkan teks apa adanya termasuk spasi dan baris barunya.

Berhenti dan tebak dulu! Kode ini: <p>Halo dunia</p> (5 spasi). Berapa spasi yang tampil di browser? Dan bagaimana cara menampilkan 5 spasi beneran?

Jawaban: tampil 1 spasi. Browser melipat whitespace berlebih menjadi satu spasi. Untuk menampilkan persis 5 spasi, bungkus dengan <pre> atau atur via CSS (white-space: pre). Ini salah satu "aturan main" HTML yang harus dihafal di luar kepala: yang kamu tulis di kode belum tentu yang tampil, karena browser punya aturan rendering sendiri. Memahami aturan main lebih penting dari menghafal tag.

Format Teks: b vs strong, i vs em

Ini bagian yang paling sering dikira sepele tapi menyimpan pelajaran penting tentang makna vs tampilan. HTML punya beberapa tag format teks:

  • <b>: tebal. <strong>: tebal juga, tapi artinya "penting".
  • <i>: miring. <em>: miring juga, tapi artinya "penekanan" (emphasis).
  • <u>: garis bawah. <mark>: stabilo/highlight. <small>: teks kecil.
  • <sub> dan <sup>: subskrip (H2O) dan superskrip (x2).
  • <del>: coret (teks dihapus). <ins>: garis bawah (teks disisipkan).

Perhatikan: b dan strong tampil sama (tebal), i dan em tampil sama (miring). Bedanya di makna. <strong> berkata "teks ini penting", <em> berkata "teks ini ditekankan". Screen reader membacakan strong dan em dengan intonasi penekanan, tapi memperlakukan b dan i sebagai sekadar gaya. Google pun memberi bobot lebih ke teks ber-strong.

Alur berpikirnya begini: setiap kali memilih tag, tanyakan "apa makna teks ini", bukan "mau tampil seperti apa". Mau menandai kata penting? strong. Cuma mau tebal tanpa makna penting (misalnya nama produk di tengah kalimat)? b. Istilah asing atau judul buku? i. Menekankan kata dalam kalimat ("saya tidak setuju")? em. Kebiasaan bertanya makna ini adalah inti dari HTML yang baik, dan nanti berlanjut ke HTML semantic di #16.

Kuis cepat: Kamu menulis peringatan "Jangan sentuh kabel ini!" dan ingin kata "Jangan" benar-benar ditekankan maknanya (bukan cuma tebal). Tag yang tepat?

Mitos 1: Heading cuma Soal Ukuran Font

Sudah dibahas di bagian heading, tapi layak ditegaskan sebagai mitos karena sangat umum. Banyak pemula memilih h3 karena "ukurannya pas", bukan karena posisinya di hierarki. Akibatnya struktur halamannya kacau: Google bingung, screen reader tersesat.

Prinsip yang harus mendarah daging: pilih tag berdasarkan makna, atur tampilan dengan CSS. Butuh teks besar yang bukan heading? Pakai p + CSS. Butuh heading kecil? Tetap pakai level heading yang benar + CSS untuk ukurannya. Dua pekerjaan, dua alat. Mencampur keduanya adalah sumber 90 persen HTML berantakan.

Mitos 2: b dan strong Sama Saja, Pilih yang Pendek

"Kan tampilannya sama, ngapain ribet." Tampilannya sama hari ini, di browser visual. Tapi web tidak cuma dibaca mata. Dibaca juga oleh mesin pencari, screen reader, dan alat-alat lain yang peduli makna.

Ini pelajaran yang lebih besar dari sekadar dua tag: di HTML, cara menulis sama pentingnya dengan apa yang tampil. Kode yang terlihat sama di layar bisa punya kualitas yang beda jauh di baliknya. Profesional dibedakan dari amatir bukan dari hasil akhirnya saja, tapi dari kualitas struktur di baliknya. Kebiasaan memilih tag berdasarkan makna adalah langkah pertama menjadi profesional.

Blockquote dan Kode: Dua Teman Teks Lainnya

Sebelum latihan, dua elemen teks yang akan sering kamu pakai di blog dan dokumentasi:

<blockquote> untuk kutipan panjang dari sumber lain. Browser menampilkannya menjorok ke dalam. Kalau kutipannya pendek di tengah kalimat, pakai <q> (browser menambahkan tanda kutip otomatis).

<code> untuk potongan kode di tengah kalimat (tampil dengan font monospace), dan <pre> untuk blok kode multi-baris yang spasinya dipertahankan. Kombinasi <pre><code>...</code></pre> adalah standar untuk menampilkan kode di web, dan sudah kamu lihat dipakai di artikel-artikel blog ini.

Latihan dan Langkah Berikutnya

  1. Perkaya halaman dari latihan #12. Buka halaman-pertamaku.html-mu, lalu: ubah struktur teksnya jadi hierarki yang benar (satu h1, beberapa h2 untuk bagian-bagiannya), tandai satu kalimat penting dengan strong, satu kata yang ditekankan dengan em, dan tambah satu blockquote berisi quotes favoritmu. Bukan mengetik ulang: mengubah dan menambah.
  2. Audit satu website favoritmu. Buka website berita favoritmu, klik kanan, pilih "View Page Source" (atau Inspect). Cari: berapa h1 yang dipakai? Apakah hierarkinya rapi (h1 lalu h2) atau berantakan? Catat temuanmu. Melatih mata membaca struktur orang lain mempercepat pemahamanmu sendiri.

Langkah berikutnya: artikel #14, Link, Gambar, dan Media di HTML. Episode 3 series HTML Basic. Kita belajar menghubungkan halaman (a), menampilkan gambar (img), dan menyematkan audio-video, plus aturan atribut penting seperti alt yang sering diabaikan. Sampai jumpa.