Ketika membuat komponen web, pilihan elemen sering mengikuti contoh yang ditemukan lebih dulu. Kotak dibuat dengan div, teks penting diberi heading, lalu semuanya dihias menggunakan CSS. Cara tersebut dapat menghasilkan tampilan yang diinginkan, tetapi keputusan struktur sebaiknya dimulai dari fungsi konten. Pertanyaan yang tepat membantu memilih elemen tanpa menambah kerumitan yang tidak diperlukan.
Tidak setiap perbedaan markup mempunyai satu jawaban yang berlaku untuk semua halaman. Konteks, hubungan isi, dan tindakan pengguna perlu diperhatikan bersama. Panduan berikut membandingkan beberapa keputusan umum pada blog dan antarmuka sederhana. Gunakan sebagai kerangka penalaran, bukan daftar tag yang harus dipasang semuanya. Hasil akhirnya tetap perlu diperiksa pada halaman yang benar-benar digunakan.
Apakah pengguna berpindah tempat atau menjalankan tindakan?
Jika kontrol membuka artikel lain atau menuju bagian halaman, tautan dengan href biasanya sesuai. Pengguna dapat memahami tujuannya, menyalin alamat, atau membukanya melalui mekanisme browser. Jika kontrol mengubah tema, mengirim formulir, atau membuka panel, tombol lebih sesuai. Penampilan keduanya boleh mirip, tetapi fungsi tidak seharusnya disamarkan hanya demi mengikuti bentuk komponen desain.
Pertimbangkan kartu artikel yang memiliki judul serta ikon bookmark. Judul mengantar pembaca ke tulisan, sedangkan bookmark mengubah simpanan pengguna. Memasukkan tombol bookmark ke dalam tautan seluruh kartu menghasilkan kontrol bersarang yang bermasalah. Pisahkan tindakan dari navigasi dan pastikan nama kontrol menjelaskan tujuan. Jangan membuat seluruh area menjadi tautan jika bagian interaktifnya saling bertabrakan.
Mengapa role tidak selalu menyelesaikan masalah?
Role dapat menjelaskan maksud elemen kepada teknologi bantu, tetapi tidak otomatis menyediakan semua perilaku native. Div dengan role button masih membutuhkan fokus dan dukungan keyboard yang tepat. Jika button sudah memenuhi kebutuhan, memakai elemen tersebut mengurangi pekerjaan tambahan. Gunakan penyesuaian khusus hanya ketika ada alasan nyata dan kemampuan untuk menguji seluruh perilakunya secara menyeluruh.
Apakah isi dapat dipahami sebagai tulisan mandiri?
Artikel blog yang memiliki judul, penulis, dan pembahasan biasanya cocok ditempatkan dalam article. Unit tersebut dapat dipahami ketika dipisahkan dari daftar artikel lain. Section lebih tepat untuk bagian bertopik di dalam dokumen ketika tidak ada elemen khusus yang lebih sesuai. Judul bagian membantu pembaca mengenali pengelompokan, bukan sekadar menjadi hiasan pembatas ruang.
Pada halaman beranda, daftar rekomendasi dapat menjadi section dengan heading yang menjelaskan pilihannya. Setiap ringkasan artikel dapat dipertimbangkan sebagai article jika benar-benar merepresentasikan unit tulisan tersendiri. Namun, pembungkus yang hanya mengatur jarak antara gambar dan teks tidak perlu berubah menjadi section. Div tetap berguna untuk kebutuhan layout yang tidak membawa makna konten khusus.
Informasi pendukung tidak ditentukan posisi
Bio penulis dan tautan terkait dapat menjadi informasi pendukung meskipun muncul di bawah artikel, bukan di sampingnya. Sebaliknya, kolom kanan yang berisi bagian inti tutorial tidak otomatis menjadi aside. Pilih berdasarkan hubungan isi. Posisi layar berubah pada ponsel, sehingga makna tidak boleh bergantung pada arah kiri atau kanan dalam rancangan desktop saja.
Apakah hubungan datanya memang berbentuk baris dan kolom?
Tabel tepat untuk informasi yang perlu dibaca berdasarkan perpotongan baris dan kolom, misalnya perbandingan fitur perangkat. Gunakan sel header untuk menjelaskan data dan pertimbangkan caption untuk mengenalkan topik. Pada tabel kompleks, hubungan header membutuhkan perhatian tambahan. Jika isinya hanya beberapa kartu produk sejajar, CSS Grid atau Flexbox biasanya lebih cocok untuk mengatur penampilannya.
Jangan mengganti tabel data menjadi kumpulan div hanya karena layar kecil. Perubahan tersebut dapat menghilangkan hubungan yang membantu pembaca memahami angka. Pertimbangkan penyederhanaan kolom, pengguliran terkontrol, atau ringkasan tambahan sesuai kebutuhan. Sebaliknya, hindari tabel untuk menempatkan logo di kiri dan menu di kanan karena hubungan datanya memang bukan data tabular sejak awal.
Apakah daftar mempunyai urutan yang berarti?
Langkah pemasangan dapat memakai daftar bernomor jika urutan tindakan memengaruhi hasil. Daftar fitur yang tidak memiliki peringkat dapat menggunakan daftar tanpa urutan. Memilih daftar berdasarkan bentuk bullet saja mengabaikan informasi yang ingin disampaikan. Jika setiap item memerlukan istilah beserta penjelasan, pertimbangkan struktur deskripsi yang mencerminkan hubungan tersebut, bukan memaksakan pola kartu berulang.
Pada teks panjang, paragraf tetap diperlukan untuk menjelaskan alasan dan batasan. Mengubah seluruh pembahasan menjadi bullet tidak otomatis membuatnya lebih mudah dibaca. Gunakan daftar ketika pembaca perlu mengenali beberapa item terpisah. Gunakan paragraf ketika gagasannya perlu dihubungkan, dibandingkan, atau dijelaskan melalui konteks yang tidak bisa disampaikan oleh satu kalimat pendek saja.
Tulis alasan keputusan sebelum menambah atribut
Setelah memilih elemen, tulis alasan singkat pada dokumentasi komponen jika keputusan berpotensi membingungkan. Misalnya, sebuah wadah memakai div karena hanya mengelompokkan layout, sedangkan rekomendasinya memakai section karena memiliki topik. Catatan ini membantu pengembang berikutnya menjaga konsistensi tanpa menyalin markup secara membabi buta. Dokumentasikan tujuan, bukan sekadar menjelaskan kembali nama tag yang digunakan.
Evaluasi melalui skenario pembaca
Bayangkan pengguna membuka halaman tanpa melihat desainnya. Apakah nama tautan menjelaskan tujuan? Apakah heading menunjukkan pembahasan? Apakah data tetap memiliki konteks ketika dibaca per sel? Pertanyaan tersebut menguji manfaat keputusan, bukan banyaknya elemen semantik yang dipasang. Jika jawaban masih bergantung pada warna atau posisi, tambahkan informasi melalui struktur dan teks yang tepat.
Kemudian periksa penggunaan keyboard pada komponen utuh. Pastikan tindakan tidak menghilangkan fokus dan tujuan navigasi benar-benar tersedia. Keputusan markup yang masuk akal tetap membutuhkan perilaku yang dapat digunakan secara konsisten.
