Sebuah halaman bisa terlihat rapi walaupun seluruh bagiannya dibangun memakai div. Judul diperbesar, tautan diberi warna, lalu kotak disusun menjadi beberapa kolom. Namun, tampilan tersebut belum menjelaskan fungsi setiap bagian kepada browser. Di sinilah HTML semantik berguna: elemen dipilih berdasarkan arti konten, bukan semata bentuk yang ingin ditampilkan.
Bayangkan membaca artikel menggunakan daftar judul pada pembaca layar. Kalimat yang terlihat besar belum tentu muncul sebagai judul jika pembuatnya hanya mengubah ukuran huruf. Sebaliknya, heading yang ditandai dengan benar dapat membantu pembaca menemukan bagian tertentu tanpa menelusuri seluruh paragraf. Perbedaan ini tidak selalu terlihat pada tangkapan layar, tetapi memengaruhi cara halaman digunakan.
Makna berbeda dari penampilan
Elemen h1 menyatakan judul tingkat pertama. Browser biasanya memberinya tampilan besar, tetapi ukuran itu dapat diubah melalui CSS tanpa menghilangkan maknanya. Sebuah span yang diberi ukuran serupa tidak otomatis memperoleh peran heading. Karena itu, pertanyaan awal saat memilih elemen adalah fungsi kontennya, bukan ukuran, warna, atau posisi yang direncanakan.
Prinsip yang sama berlaku pada kontrol. Tautan dengan tujuan yang benar digunakan untuk berpindah alamat, sedangkan tombol menjalankan tindakan. Mengubah div menjadi tampak seperti tombol tidak otomatis menyediakan perilaku keyboard, nama aksesibel, atau status yang dibutuhkan pengguna. Elemen native memberi fondasi yang lebih tepat, meskipun pengembang tetap bertanggung jawab terhadap implementasinya.
Kapan div tetap masuk akal?
Div bukan elemen yang harus dihindari seluruhnya. Ia cocok sebagai wadah pengaturan layout ketika tidak ada makna khusus yang perlu dinyatakan. Misalnya, pembungkus dua kolom dapat memakai div, sementara isi kolom tetap menggunakan article atau aside sesuai perannya. Menambahkan elemen semantik secara berlebihan juga tidak membantu jika artinya tidak sesuai konten.
Landmark membantu mengenali daerah halaman
Pada blog, header sering menampung identitas dan navigasi, main menandai isi utama, dan footer berisi informasi penutup. Nav digunakan untuk kelompok navigasi yang penting. Jika terdapat beberapa navigasi, nama yang jelas membantu membedakan menu utama, breadcrumb, dan tautan legal. Pengguna tidak perlu menebak kelompok mana yang ingin mereka buka.
Article cocok untuk unit konten yang dapat dipahami sebagai tulisan tersendiri. Pada halaman detail, isinya dapat mencakup judul, metadata, dan pembahasan. Aside menampung bagian yang berhubungan tetapi bukan inti alur bacaan, seperti rekomendasi. Pemilihan ini tidak ditentukan oleh posisi: sesuatu yang berada di kanan layar belum tentu harus menjadi aside.
Section memerlukan alasan pengelompokan
Section dapat digunakan ketika beberapa konten membentuk satu bagian bertopik. Judul bagian membantu menjelaskan pengelompokan tersebut. Jika pembungkus hanya diperlukan untuk memberi margin atau warna latar, wadah generik mungkin sudah cukup. Jangan menambahkan banyak section tanpa struktur yang dapat dipahami pembaca hanya karena nama elemennya terdengar lebih baik.
Heading membentuk peta pembahasan
Mulailah dari judul halaman, lalu gunakan h2 untuk bagian utama dan h3 untuk pembahasan di dalam bagian tersebut. Jangan memilih tingkat heading karena ukuran bawaannya paling sesuai desain. Atur penampilan melalui CSS. Pada artikel, susunan yang mudah dipahami biasanya mengikuti hubungan gagasan, bukan urutan komponen visual yang kebetulan tersedia.
Sebagai contoh, bagian tentang keamanan akun dapat memiliki subbagian kata sandi dan autentikasi tambahan. Keduanya berada di bawah topik keamanan akun, bukan melompat menjadi judul yang seolah setara dengan judul artikel. Setelah menulis, baca hanya daftar heading. Jika alurnya membingungkan tanpa paragraf pendukung, struktur pembahasan kemungkinan masih perlu diperbaiki.
Semantik bukan jaminan aksesibilitas lengkap
Markup yang tepat tidak otomatis memperbaiki kontras rendah, fokus yang hilang, gambar tanpa deskripsi, atau formulir tanpa label. Semua itu membutuhkan pemeriksaan sendiri. Demikian pula, penggunaan article dan heading tidak menjamin peringkat pencarian. Struktur membantu menyampaikan hubungan konten, tetapi tidak menggantikan mutu informasi, performa, dan pengalaman pengguna yang sebenarnya.
Untuk pemeriksaan awal, matikan stylesheet sementara atau lihat struktur dokumen melalui developer tools. Pastikan urutan bacaan tetap masuk akal. Coba menavigasi kontrol dengan keyboard dan lihat apakah fokus dapat dikenali. Jika tersedia, gunakan pembaca layar untuk meninjau landmark serta heading. Catat hasil yang benar-benar diamati, bukan sekadar menyatakan halaman sudah aksesibel.
Mulai dari konten yang sudah dimiliki
Ambil satu halaman artikel, tandai judul, navigasi, isi utama, rekomendasi, dan penutup. Pilih elemen untuk setiap fungsi itu, kemudian baru rapikan tampilan. Cara ini lebih terarah daripada mengganti semua div sekaligus tanpa memahami hubungan kontennya. Perubahan kecil yang tepat memudahkan pemeliharaan dan membantu penulis berikutnya mengikuti pola yang sama.
Periksa kembali setelah komponen digunakan pada halaman berbeda. Header sebuah artikel tidak selalu memiliki peran yang sama dengan header halaman keseluruhan. Konteks dokumen ikut menentukan makna, sehingga peninjauan harus dilakukan pada halaman utuh, bukan hanya potongan komponen terisolasi.
Contoh keputusan saat meninjau kartu
Kartu artikel biasanya memiliki gambar, kategori, judul, dan ringkasan. Judulnya dapat menjadi tautan menuju tulisan lengkap. Gambar dekoratif tidak perlu mengulang judul melalui deskripsi panjang. Jika seluruh kartu diberi perilaku klik, pastikan tidak ada kontrol bersarang yang membuat interaksi membingungkan. Pilih satu pola yang dapat dijelaskan dan diuji menggunakan keyboard.
Perhatikan urutan dokumen ketika kartu disusun ulang pada layar kecil. Posisi visual sebaiknya tidak menyampaikan urutan berbeda dari pembacaan aslinya. Jika rekomendasi muncul sebelum isi utama, memindahkannya dengan CSS belum tentu menyelesaikan kebutuhan pembaca. Tinjau struktur sebelum mengubah dekorasi komponen.
