Semantic HTML

Sebelumnya kita udah belajar tentang formulir HTML. Nah, kali ini kita lanjut dengan topik yang penting banget untuk kamu pelajari, yaitu Semantic HTML.
Semantic HTML itu sederhana, tapi manfaatnya gede banget buat struktur web kamu. Intinya, semantic HTML membuat halaman web kamu lebih jelas, terstruktur, dan mudah dipahami, baik oleh pengunjung maupun mesin pencari seperti Google.
Apa Itu Semantic HTML?
Semantic HTML berarti menggunakan elemen HTML yang secara jelas menggambarkan makna atau konten yang ada di dalamnya. Misalnya, dibanding pakai banyak <div>
, kita bisa pakai elemen seperti <header>
, <footer>
, atau <nav>
yang punya arti jelas.
Contoh Non-semantic vs Semantic HTML
Non-semantic (pakai banyak div):
<div class="header">Header Situs</div>
<div class="nav">Navigasi</div>
<div class="main">Konten Utama</div>
<div class="footer">Footer Situs</div>
Semantic HTML:
<header>Header Situs</header>
<nav>Navigasi</nav>
<main>Konten Utama</main>
<footer>Footer Situs</footer>
Dengan semantic HTML, kodenya jelas dan lebih mudah dibaca.
Elemen Semantic HTML yang Sering Digunakan
Berikut beberapa elemen semantic HTML yang penting kamu tahu:
<header>
: bagian atas halaman, biasanya berisi logo atau judul situs.<nav>
: navigasi utama atau menu situs.<main>
: konten utama yang jadi fokus halaman.<section>
: bagian khusus dalam halaman, seperti pengelompokan konten.<article>
: konten yang berdiri sendiri, seperti artikel atau posting blog.<aside>
: konten tambahan yang relevan, biasanya sidebar.<footer>
: bagian bawah halaman, biasanya informasi kontak atau hak cipta.
Contoh Penggunaan Semantic HTML
Berikut contoh lengkap penggunaannya di halaman sederhana:
<!doctype html>
<html lang="id">
<head>
<title>blog.adydetra.my.id</title>
</head>
<body>
<header>
<h1>Selamat Datang di Blog Saya</h1>
</header>
<nav>
<a href="/">Beranda</a>
<a href="/tentang">Tentang</a>
<a href="/kontak">Kontak</a>
</nav>
<main>
<section>
<article>
<h2>Judul Artikel Pertama</h2>
<p>Isi artikel ini tentang semantic HTML.</p>
</article>
<article>
<h2>Judul Artikel Kedua</h2>
<p>Isi artikel ini tentang manfaat semantic HTML.</p>
</article>
</section>
<aside>
<h3>Tentang Penulis</h3>
<p>Saya seorang web developer yang senang berbagi.</p>
</aside>
</main>
<footer>
<p>© 2025 blog.adydetra.my.id</p>
</footer>
</body>
</html>
Manfaat Semantic HTML
- SEO lebih baik: Mesin pencari lebih mudah mengerti isi dan struktur halaman.
- Aksesibilitas meningkat: Screen reader jadi lebih efektif menjelaskan konten kepada pengguna tunanetra.
- Mudah dipelihara: Struktur halaman lebih jelas, sehingga lebih gampang saat harus update konten atau layout.
Kesimpulan
Memakai semantic HTML itu seperti kita berbicara menggunakan kalimat yang jelas dan teratur, bukan asal bicara. Web kamu akan terasa lebih rapi, baik untuk pengguna maupun mesin pencari. Sebagai web developer, kebiasaan ini akan sangat membantu kamu membuat halaman yang nggak cuma keren, tapi juga gampang dikelola ke depannya.