Memahami Semantic Tag HTML5
Apa itu Semantic HTML?
Semantic HTML adalah penggunaan elemen HTML yang memiliki arti atau makna jelas (meaningful) bagi browser, pengembang web, dan mesin pencari (search engine).
Sebelum HTML5, layout halaman web umumnya menggunakan tag generic <div> yang diberi class atau ID (contoh: <div id="header"> atau <div class="nav">). HTML5 memperkenalkan tag elemen semantik khusus untuk menggantikannya.
Mengapa Semantik Penting?
- Aksesibilitas (Accessibility): Pembaca layar (screen reader) untuk penggunan disabilitas dapat dengan mudah mengenali struktur halaman web.
- SEO (Search Engine Optimization): Mesin pencari seperti Google dapat memahami bagian mana yang merupakan konten utama, navigasi, atau header.
- Keterbacaan Kode: Memudahkan tim developer membaca dan merawat (maintain) kode program.
Tag Semantik Utama HTML5
Perbandingan Layout Tradisional vs HTML5 Semantik:
TRADISIONAL (<div>) HTML5 SEMANTIK
┌─────────────────────────┐ ┌─────────────────────────┐
│ <div id="header"> │ │ <header> │
├─────────────────────────┤ ├─────────────────────────┤
│ <div id="nav"> │ │ <nav> │
├─────────────────────────┤ ├─────────────────────────┤
│ <div class="main"> │ │ <main> │
│ ┌──────────┬─────────┐ │ │ ┌──────────┬─────────┐ │
│ │ <article>│ <aside> │ │ │ │<article> │ <aside> │ │
│ └──────────┴─────────┘ │ │ └──────────┴─────────┘ │
├─────────────────────────┤ ├─────────────────────────┤
│ <div id="footer"> │ │ <footer> │
└─────────────────────────┘ └─────────────────────────┘
Penjelasan Elemen Semantik HTML5
1. <header>
Digunakan untuk menampung bagian kepala halaman atau bagian atas suatu artikel. Biasanya berisi logo, judul halaman, atau navigasi utama.
2. <nav>
Digunakan khusus untuk membungkus link navigasi utama halaman web.
3. <main>
Menandai konten paling utama dan unik pada halaman tersebut. Setiap halaman idealnya hanya memiliki 1 tag <main>.
4. <section>
Digunakan untuk mengelompokkan konten yang memiliki tema atau topik pembahasan yang sama (seperti bab atau bagian dalam artikel).
5. <article>
Digunakan untuk konten mandiri yang dapat berdiri sendiri dan berpotensi untuk dibagikan secara independen (seperti postingan blog, berita, atau ulasan produk).
6. <aside>
Berisi konten sampingan atau pelengkap yang berkaitan dengan konten utama (seperti sidebar, daftar postingan populer, iklan, atau profil penulis).
7. <footer>
Menandai bagian kaki halaman web atau bagian bawah artikel. Biasanya berisi informasi hak cipta (copyright), link kebijakan privasi, atau kontak.
Contoh Kode Halaman HTML5 Semantik
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Blog Berita HTML5</title>
</head>
<body>
<header>
<h1>Portal Berita Teknologi</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Teknologi</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<h2>Peluncuran Standar HTML5</h2>
<p>Diunggah pada <time datetime="2026-07-31">31 Juli 2026</time></p>
<p>HTML5 membawa era baru dalam pengembangan aplikasi web modern...</p>
</article>
</section>
<aside>
<h3>Artikel Populer</h3>
<ul>
<li><a href="#">Belajar CSS Grid</a></li>
<li><a href="#">Tips JavaScript ES6</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Portal Berita. Hak Cipta Dilindungi.</p>
</footer>
</body>
</html>
