MATERI 11 / 20
HTML semantik: struktur yang menjelaskan isi
Sebelum warna dan animasi, halaman perlu struktur yang jelas. HTML semantik memberi makna pada judul, navigasi, tombol dan isi sehingga hubungan antarbagian bisa dipahami.
Pilih elemen dari tujuannya
Tautan membawa pengguna ke alamat, sedangkan tombol menjalankan tindakan. Menggunakan div yang bisa diklik memerlukan penanganan keyboard dan semantik tambahan. Elemen bawaan biasanya sudah memiliki perilaku yang tepat. Gunakan main untuk isi utama serta nav untuk kelompok navigasi yang bermakna, bukan setiap kumpulan tautan kecil.
Heading menggambarkan hierarki
Judul halaman memberi konteks utama, lalu heading bagian menjelaskan urutan isi. Pilih tingkat heading berdasarkan hubungan isi, bukan ukuran huruf. Ukuran dapat diatur dengan CSS. Untuk artikel belajar, pembaca seharusnya bisa melihat daftar heading dan memahami kerangka penjelasannya.
Formulir perlu hubungan eksplisit
Label yang terhubung dengan input menjelaskan apa yang harus diisi dan membantu fokus saat label diklik. Placeholder bukan pengganti label karena menghilang saat nilai diketik. Pesan error perlu menunjukkan kolom terkait dan cara memperbaikinya. Jangan mengandalkan warna saja untuk menyampaikan kegagalan.
<main> <h1>Catatan proyek</h1> <label for="judul">Judul catatan</label> <input id="judul" name="judul"> <button type="submit">Simpan catatan</button> <a href="/catatan/">Lihat daftar catatan</a> </main>
Giliran kamu.
Buat kerangka HTML halaman catatan tanpa CSS. Periksa judul, label, tombol dan tautan dengan keyboard serta baca urutan heading.
- Tautan dan tombol punya fungsi tepat
- Heading menggambarkan struktur
- Input memiliki label terlihat