Elemen Teks: Paragraf, Daftar, dan Penekanan

Teks merupakan sebagian besar isi web, jadi menandainya dengan benar sangatlah penting. Elemen teks yang tepat membuat konten mudah dibaca oleh semua orang, termasuk pengguna pembaca layar.

Bungkus setiap blok prosa dalam tag p. Tag ini mengelompokkan kalimat menjadi paragraf yang sebenarnya, yang dapat dinavigasi oleh teknologi bantu satu bagian demi satu bagian.

Hindari menumpuk div kosong atau tag br untuk memberi jarak pada teks. Gunakan paragraf yang sebenarnya dan biarkan CSS menangani jaraknya. Struktur harus berasal dari tag, bukan gaya.

Ketika beberapa item saling berkaitan, gunakan daftar yang sebenarnya. Pembaca layar mengumumkan jumlahnya, misalnya daftar berisi tiga item, sehingga pengguna langsung mendapatkan konteks.

Gunakan ul ketika urutan tidak penting dan ol ketika urutan penting, seperti pada langkah-langkah. Setiap item berada di dalam li, bukan div yang berdiri sendiri.

Tag em menandai kata-kata yang akan Anda tekankan saat berbicara. Pembaca layar dapat mengubah intonasi, sehingga penekanannya benar-benar terdengar, bukan hanya terlihat.

Tag strong menandai teks yang sangat penting, seperti peringatan. Ini adalah makna, bukan sekadar gaya tebal, sehingga tetap bermakna bagi teknologi bantu.

Tag b dan i hanya mengubah tampilan tanpa menambahkan makna. Gunakan em dan strong ketika penekanan atau kepentingannya memang bermakna.

Gunakan blockquote untuk blok kutipan dan q untuk kutipan singkat di dalam baris. Semantik ini memberi tahu pengguna bahwa kata-kata tersebut berasal dari tempat lain.

Bungkus kode di dalam baris dengan code dan tuliskan bentuk lengkap singkatan dengan abbr. Tag-tag kecil ini menambahkan makna yang tepat, yang biasanya disimpulkan pembaca yang dapat melihat dari konteks.

Aturan untuk teks itu sederhana: pilih tag berdasarkan maknanya, lalu atur tampilannya dengan bebas. Tampilan adalah CSS; struktur adalah HTML.

Gunakan p untuk prosa, ul dan ol untuk daftar, serta em dan strong untuk penekanan yang sesungguhnya. Pilih tag berdasarkan makna dan serahkan tampilannya kepada CSS. 🎉