HTML adalah kerangka tulang bangunan
Bayangkan halaman web sebagai sebuah bangunan. HTML adalah kerangka tulangnya. Kerangka menentukan di mana dinding berdiri, di mana pintu berada, dan ruangan mana yang menjadi ruang tamu. Tanpa kerangka, tidak ada yang menopang atap atau menahan dinding.
Browser membangun DOM dari markup HTML. DOM adalah pohon yang mewakili halaman, seperti yang kamu pelajari di bab 1. Setiap elemen HTML menjadi satu cabang di pohon itu. CSS lalu menghias cabang-cabang itu, dan JavaScript menggerakkannya. Semua kerja itu berdiri di atas struktur HTML.
Kenapa ini membuat HTML struktur terpenting? Karena semua yang lain bergantung padanya. Jika kerangka bangunan salah, cat dan perabot tidak akan memperbaikinya. Jika struktur HTML berantakan, CSS dan JavaScript hanya menutupi masalah, tidak menyelesaikannya. Struktur yang baik membuat sisa pekerjaan lebih mudah.
Ada satu hal yang membedakan HTML dari dua bahasa lainnya. HTML tidak punya logika seperti JavaScript, dan tidak punya aturan tampilan seperti CSS. Ia hanya menyusun isi. Tapi justru karena sederhana, kesalahan di sini berdampak luas. Struktur yang buruk sulit dihias dan sulit digerakkan.
Browser membaca HTML dari atas ke bawah. Saat membaca, ia membangun pohon DOM cabang demi cabang. Urutan elemen di markup menentukan urutan cabang di pohon. Itu sebabnya menulis HTML dengan rapi itu penting. Markup yang teratur menghasilkan pohon yang teratur, dan pohon yang teratur lebih mudah dihias dan digerakkan.
Semantik vs div soup
HTML punya banyak elemen. Sebagian elemen punya makna, sebagian netral. Elemen yang punya makna disebut semantik. Elemen netral tidak menyampaikan apa-apa tentang isinya.
Contoh elemen netral adalah div. div hanya sebuah kotak. Ia tidak bilang apakah isinya judul, navigasi, atau isi utama. Kamu bisa memakai div untuk semuanya, dan browser tidak keberatan. Tapi halaman yang semuanya div disebut div soup. Semua bagian tampak sama, dan tidak ada yang tahu mana yang penting.
Elemen semantik sebaliknya. header menandai bagian atas halaman. nav menandai navigasi. main menandai isi utama. Nama elemennya sendiri sudah menjelaskan perannya. Browser, pembaca layar, dan mesin pencari memakai makna ini untuk memahami halaman.
Kenapa makna ini penting? Karena tidak semua orang melihat halaman dengan cara yang sama. Pembaca layar membacakan halaman dengan lantang untuk pengguna yang tidak bisa melihat. Ia memakai struktur HTML untuk tahu urutan dan peran tiap bagian. Halaman div soup terdengar seperti satu blok teks panjang. Halaman semantik terdengar terstruktur, dengan navigasi, isi utama, dan catatan kaki yang jelas.
Makna juga membantu kamu sendiri. Saat kamu kembali ke kode setelah beberapa minggu, elemen semantik langsung memberi tahu isi tiap bagian. Kamu tidak perlu membaca semua teks untuk menemukan navigasi. Nama elemennya sudah cukup. Struktur yang bermakna membuat kode lebih mudah dirawat, dan itu menghemat waktu.
Elemen struktural
Ada tujuh elemen semantik yang membentuk kerangka halaman. Kamu akan memakainya hampir di setiap halaman.
header memuat bagian pembuka, biasanya judul dan pengantar. nav memuat tautan navigasi. main memuat isi utama halaman, dan hanya boleh ada satu. article memuat konten yang berdiri sendiri, seperti satu artikel atau satu postingan. section membagi isi menjadi bagian-bagian bertema. aside memuat konten sampingan, seperti tautan terkait atau catatan. footer memuat penutup, seperti informasi hak cipta.
Elemen-elemen ini tidak mengubah tampilan. header dan div tampak sama di layar. Perbedaannya ada di makna. CSS dan JavaScript bisa memakai elemen semantik untuk menargetkan bagian tertentu. Pembaca layar memakainya untuk menavigasi. Mesin pencari memakainya untuk memahami isi.
Hierarki heading yang benar
Heading adalah judul bagian, dari h1 sampai h6. h1 adalah judul paling penting, biasanya judul halaman. h2 adalah judul bagian, h3 sub-bagian, dan seterusnya.
Hierarki heading harus berurutan. Satu halaman punya satu h1. Setelah h1, bagian-bagian memakai h2. Sub-bagian memakai h3. Jangan melompat dari h2 langsung ke h4. Lompatan membingungkan pembaca layar, yang memakai heading untuk membuat daftar isi halaman.
Heading bukan soal ukuran huruf. Ukuran diatur CSS. Heading adalah soal struktur. Memilih heading yang benar sama seperti memberi nama ruangan di bangunan. Ruang tamu disebut ruang tamu, bukan sekadar ruangan besar.
Atribut dan metadata ringkas
Elemen HTML bisa membawa atribut, informasi tambahan tentang elemen. Dua atribut yang paling sering dipakai adalah class dan id. class memberi nama kelompok untuk CSS. id memberi nama unik untuk satu elemen, sering dipakai JavaScript.
Ada juga metadata, informasi tentang halaman itu sendiri. Metadata diletakkan di dalam head, bukan di isi halaman. lang pada tag html menyatakan bahasa halaman. title memberi judul yang tampil di tab browser. meta name="description" memberi ringkasan yang tampil di hasil pencarian.
Metadata terlihat kecil, tapi berpengaruh. lang membantu pembaca layar memilih aksen yang benar. title dan description membantu mesin pencari menampilkan halaman dengan benar. Kamu tidak perlu menghafal semua atribut. Cukup tahu bahwa atribut dan metadata memberi informasi tambahan yang membuat halaman lebih mudah dipahami.
Atribut dan metadata adalah cara HTML menyimpan informasi di samping isi. Isi adalah apa yang dilihat pengguna. Atribut dan metadata adalah keterangan tentang isi itu. Keduanya bekerja bersama. Isi menyampaikan pesan, keterangan membantu browser dan alat lain memahaminya dengan benar.
Pasangan contoh
Kode di bawah menyusun halaman sederhana dengan header, main, dan article. Versi vanilla menulis markup HTML langsung. Versi React menulis komponen JSX yang me-render markup semantik yang sama.
Vanilla JavaScript
<header>
<h1>Resep Nasi Goreng</h1>
</header>
<main>
<article>
<h2>Bahan</h2>
<p>Beras, telur, kecap.</p>
</article>
</main>React
function Resep() {
return (
<div>
<header>
<h1>Resep Nasi Goreng</h1>
</header>
<main>
<article>
<h2>Bahan</h2>
<p>Beras, telur, kecap.</p>
</article>
</main>
</div>
);
}Perhatikan bahwa markup semantiknya sama. React tidak mengganti HTML dengan bahasa baru. Ia memakai JSX, cara menulis HTML di dalam JavaScript. Komponen Resep me-render struktur yang sama dengan halaman vanilla. Perbedaannya ada di cara keduanya disusun, bukan di elemen yang dipakai.
Ini poin penting. Belajar HTML semantik tetap berguna di React. Komponen React pada akhirnya menghasilkan HTML yang sama. Jika kamu tahu struktur yang benar, kamu bisa menuliskannya di JSX dengan mudah. React menyembunyikan cara mengelola halaman, tapi tidak mengubah aturan struktur.
Demo Hidup
Panel di bawah berisi div soup, halaman yang semua bagiannya memakai div. Tekan tombolnya untuk menggantinya dengan markup semantik. Perhatikan perbedaannya.
Secara tampilan, keduanya mirip. Perbedaannya ada di makna. Versi semantik memberi tahu pembaca layar bahwa ada navigasi, isi utama, dan catatan kaki. Versi div soup tidak memberi tahu apa-apa. Untuk pengguna yang memakai pembaca layar, perbedaan ini besar.
Ini ringkasan bab ini. HTML adalah kerangka tulang bangunan. Elemen semantik memberi nama pada tiap bagian kerangka. Heading menyusun judul secara berurutan. Atribut dan metadata memberi keterangan tambahan. Semua itu membuat halaman lebih mudah dipahami oleh browser, pembaca layar, mesin pencari, dan kamu sendiri.