Menggunakan Tag HTML yang Bermakna
Teman-teman, saat kita berbicara tentang membuat halaman web, kita pasti terfokus pada tampilan cantik dan desain yang ciamik. Tapi tunggu dulu, ada hal penting yang tak boleh kita abaikan, yaitu tentang menggunakan tag HTML sesuai maknanya atau yang biasa disebut Semantic HTML. Beberapa tag HTML mungkin tidak memiliki makna khusus, seperti tag <div> yang dapat digunakan secara umum sebagai pembungkus. Namun pada HTML versi 5, ada beberapa tag tambahan yang dapat teman-teman gunakan untuk membungkus elemen-elemen sesuai bagian dan maknanya.
<header>: Digunakan untuk mengelompokkan elemen-elemen di atas halaman, seperti judul dan menu. Ini membantu pembaca memahami bagian kepala halaman.<nav>: Menandakan elemen-elemen navigasi, seperti menu. Ini membantu pengunjung melihat dengan jelas menu navigasi.<main>: Menunjukkan elemen utama dalam halaman, biasanya berisi konten utama. Ini membantu kita mengidentifikasi bagian terpenting.<article>: Berguna untuk mengelompokkan konten independen yang bisa berdiri sendiri, seperti artikel berita atau blog. Ini memudahkan pembaca mencari artikel yang relevan.<section>: Digunakan untuk mengelompokkan konten yang terkait, tetapi tidak memiliki arti yang independen. Ini membantu kita mengatur bagian-bagian di halaman.<aside>: Biasanya digunakan untuk elemen tambahan yang bisa dianggap sebagai "sampingan" dari konten utama. Ini bisa berisi iklan atau informasi terkait.<footer>: Untuk mengelompokkan elemen-elemen di bagian bawah halaman, seperti informasi kontak atau hak cipta. Ini membantu pembaca menemukan info penting.
Beberapa tag tersebut, sebenarnya tidak memberikan efek secara visual pada tampilan di browser. Lalu untuk apa kita menggunakan elemen-elemen semantik tersebut?
Manfaat SEO
Penggunaan elemen semantik bermanfaat bagi SEO. Mesin pencari seperti Google memahami struktur HTML dan kontennya. Dengan menggunakan elemen semantik yang tepat, kita memberikan petunjuk yang jelas kepada mesin pencari tentang konten halaman kita. Hasilnya? Lebih baik dalam peringkat pencarian.
Membuat Halaman Lebih Mudah Dibaca
Sebagai seseorang yang dapat melihat secara jelas setiap informasi yang ada pada sebuah aplikasi web, kita kadang lupa bahwa ada sebagian teman-teman kita yang tidak dapat melakukan hal tersebut karena keterbatasan pada penglihatannya. Mereka menggunakan aplikasi pembaca layar untuk memudahkan mereka membaca setiap informasi yang ada pada web tersebut. Itulah mengapa kesesuaian makna dalam penggunaan setiap tag HTML sangat berharga bagi mereka.
Mulai dari Hal Kecil
Jika teman-teman baru mengenal konsep semantik dalam HTML atau merasa belum terbiasa menggunakan elemen-elemen semantik, jangan khawatir. Ada prinsip yang sederhana yang dapat kita terapkan: gunakan elemen HTML sebagaimana mestinya. Bahkan jika kita tidak menggunakan elemen semantik secara eksplisit, tetap mengikuti struktur dasar HTML dapat membantu membuat halaman lebih bermakna.
Mari kita lihat beberapa elemen HTML dasar yang sebaiknya digunakan sebagaimana mestinya:
<h1>,<h2>,<h3>, dst.: Gunakan elemen heading ini untuk menandai judul-judul halaman atau bagian-bagian penting.<h1>biasanya digunakan untuk judul utama,<h2>untuk subjudul, dan seterusnya.<p>: Gunakan elemen ini untuk menandai teks paragraf. Ini membantu memisahkan konten menjadi bagian-bagian yang lebih mudah dibaca.<a>: Ini adalah elemen untuk menambahkan tautan atau hyperlink. Jika kita ingin menghubungkan halaman atau sumber lain, gunakan<a>.<ul>,<ol>,<li>: Jika kita ingin membuat daftar, kita bisa menggunakan<ul>(daftar tak terurut) atau<ol>(daftar terurut) dengan<li>untuk setiap elemen dalam daftar.
Referensi
Last updated