Struktur halaman yang semantik

Sebagian besar halaman punya bentuk kasar yang sama: kepala, menu, konten utama, dan kaki. HTML punya elemen untuk masing-masing, dan pembaca layar memungkinkan pengguna langsung melompat ke sana.

Dari tumpukan div ke landmark

Bertahun-tahun, halaman dibangun dari elemen <div> dengan nama class seperti header atau menu. <div> adalah kotak umum tanpa makna sama sekali, jadi nama class satu-satunya petunjuk, dan hanya orang yang membaca kode yang bisa melihatnya. Kini HTML punya elemen yang menyatakan apa setiap wilayah itu. Browser, mesin pencari, dan teknologi bantu memahaminya, dan pengguna pembaca layar bisa membuka daftar wilayah ini, yang disebut landmark, lalu melompat ke yang mereka inginkan, sama seperti pengguna yang melihat sekilas tata letaknya.

Wilayah-wilayah utama

• <header>: konten pembuka, biasanya nama situs atau logo dan sering kali menu utama. Sebuah artikel juga bisa punya header sendiri.
• <nav>: blok tautan navigasi utama, seperti menu situs atau daftar isi. Tidak setiap kelompok tautan memerlukannya.
• <main>: konten yang khas untuk halaman ini. Pakai tepat satu <main> yang terlihat per halaman, dan jangan menaruhnya di dalam header, nav, aside, atau footer.
• <article>: potongan mandiri yang tetap bermakna dengan sendirinya, seperti tulisan blog, berita, atau kartu produk.
• <section>: bagian bertema dari halaman atau artikel, biasanya dengan judulnya sendiri.
• <aside>: konten yang berkaitan dengan konten utama tetapi terpisah darinya, seperti bilah samping, kotak glosarium, atau tautan terkait.
• <footer>: informasi penutup seperti penulis, hak cipta, dan tautan kontak.

Elemen-elemen ini menggambarkan makna, bukan posisi. <nav> tidak harus berada di atas, dan <aside> tidak harus di kanan; di ponsel aside biasanya berakhir di bawah konten utama. Posisi berasal dari CSS. Pilih elemen dengan bertanya apa kontennya, sama seperti kamu memilih tingkat judul menurut struktur, bukan ukuran.

article atau section?

Pertanyaannya adalah apakah potongan itu tetap bermakna dengan sendirinya di tempat lain, misalnya di aplikasi pembaca berita atau dibagikan sebagai tautan. Kalau ya, itu <article>. Kalau hanya bermakna sebagai bagian dari sesuatu yang lebih besar, seperti bagian Bahan pada resep, itu <section>. Keduanya biasanya diawali judul. Article bisa memuat section, dan section bisa memuat article, misalnya bagian Tulisan terbaru yang berisi beberapa kartu tulisan.

div dan span masih punya tempat

Kalau tidak ada elemen yang cocok, pakai <div> untuk blok dan <span> untuk beberapa kata di dalam baris. Keduanya berguna sebagai pengait untuk CSS, misalnya <div class="cards"> yang menata kartu-kartu dalam kisi. Aturannya: raih elemen yang bermakna lebih dulu, dan kembali ke elemen umum hanya jika tidak ada yang menggambarkan kontennya. Halaman yang hanya terdiri atas div tetap berfungsi, tetapi menyembunyikan strukturnya dari semua orang yang tidak melihat kodenya.

Uji cepat: buka halamanmu dengan CSS dimatikan, atau baca kerangka judul dan landmark yang ditampilkan ekstensi browser. Kalau halaman masih terbaca dengan urutan yang masuk akal, dengan kepala, menu, konten utama, dan kaki yang jelas, strukturnya sudah bekerja.

Elemen bawaan sebelum ARIA

Kamu mungkin menjumpai atribut role, bagian dari standar W3C bernama WAI-ARIA, yang ditulis seperti <div role="navigation">. Atribut ini memberi elemen umum makna bagi teknologi bantu. Panduan W3C tentang penggunaan ARIA diawali aturan sederhana: kalau elemen HTML bawaan sudah punya makna yang kamu perlukan, pakai elemen itu. <nav> lebih pendek, berfungsi di mana-mana, dan tidak mungkin terlupa di satu tempat tetapi diingat di tempat lain. Gagasan yang sama berlaku untuk tombol: <button> sungguhan bisa difokuskan dengan Tab dan ditekan dengan Enter atau Space tanpa usaha tambahan, sedangkan <div> yang bisa diklik memerlukan kode tambahan untuk melakukan hal yang sama.