Belajar Tag Semantik HTML5: Struktur Web Rapi & SEO Friendly
Halo gaes! Pernah nggak sih lo buka source code website orang lain, terus isinya cuma <div> sama <span> doang dari atas sampai bawah? Itu mah namanya "Div-soup", ngab! Kurang estetik dan pastinya bikin crawler Google pusing tujuh keliling buat ngebaca struktur web lo.
Nah, biar web lo makin vibes-nya pro dan disayang sama mesin pencari, saatnya kita spill tuntas soal Tag Semantik HTML5. Skuy, bahas!
Apa Itu Tag Semantik?
Simpelnya, tag semantik itu tag yang punya "arti". Kalau <div> itu kan ibarat kotak kosong yang nggak punya makna, tag semantik kayak <header>, <nav>, atau <footer> itu ngasih tahu browser dan Google: "Woy, ini bagian navigasi lho", "ini isinya konten utama lho".
Kenapa Harus Pindah ke Semantik?
- SEO Friendly: Google lebih gampang paham hierarki konten lo. Otomatis, rangking web lo bisa naik.
- Aksesibilitas (A11y): Teman-teman disabilitas yang pakai screen reader bakal kebantu banget navigasi web lo karena mereka tahu di mana letak menu atau konten utama.
- Kodingan Lebih Rapi: Maintain kode jadi lebih gampang. Nggak perlu pusing nyari
id="header-wrapper-fix-banget"lagi.
Bedah Tag Semantik yang Wajib Lo Hafalin
<header>: Buat bagian atas halaman atau section.<nav>: Khusus buat link navigasi. Jangan taruh di luar tag ini, ya!<main>: Isi utama konten lo. Inget, cuma boleh ada satu per halaman!<section>: Buat pengelompokan konten yang temanya sama.<article>: Buat konten yang bisa berdiri sendiri (misal: postingan blog).<aside>: Buat konten sampingan, kayak sidebar atau iklan.<footer>: Buat bagian paling bawah, biasanya isinya copyright atau kontak.
Contoh Implementasi (Clean Code)
Biar nggak cuma teori, nih liat struktur web modern yang proper:
<body>
<header>
<h1>Blog Keren Gue</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Tutorial HTML Semantik</h2>
<p>Isi konten lo di sini...</p>
</article>
<aside>
<h3>Tentang Penulis</h3>
<p>Gue jago koding, yuk mampir!</p>
</aside>
</main>
<footer>
<p>© 2023 Semua hak cipta dilindungi.</p>
</footer>
</body>
Tips Biar Makin Pro:
- Jangan abuse tag: Jangan pakai
<section>kalau cuma buat styling doang. Tetap gunakan CSS untuk visual. - Hierarki Heading: Selalu pakai
<h1>sampai<h6>sesuai urutannya. Jangan loncat-loncat biar screen reader nggak bingung. - Gunakan
<main>: Banyak yang lupa tag ini, padahal ini krusial banget buat SEO.
Gimana, gampang kan? Mulai sekarang, yuk pensiunkan <div> yang berlebihan dan mulai pakai tag semantik. Web lo bakal jadi lebih "pintar" dan pastinya lebih rapi. Semangat ngodingnya, keep it clean and semantic!
Berikan Rating
Komentar (0)
Silakan login untuk memberikan komentar.
Login SekarangKata Kunci
Menyukai Artikel (0)
Belum ada siswa yang menyukai artikel ini.
Belum ada komentar. Jadilah yang pertama!