Di artikel sebelumnya, kita belajar tentang <div> sebagai kontainer umum. Sekarang saatnya mengenal tag-tag layout semantik HTML5 yang lebih bermakna dan ramah SEO. Tag-tag ini membantu mesin pencari dan screen reader memahami struktur halaman dengan lebih baik.
Apa Itu Tag Semantik?
Tag semantik adalah tag yang menjelaskan makna dari konten yang dibungkusnya, bukan hanya sebagai wadah. Ini membantu:
- SEO (Search Engine Optimization) — mesin pencari memahami struktur halaman
- Aksesibilitas — screen reader bisa menavigasi dengan lebih baik
- Developer — kode lebih mudah dibaca dan di-maintenance
Analogi Sederhana:
Tag
Tag semantik seperti kotak dengan label — "header", "menu", "artikel" — langsung tahu fungsinya!
Tag
<div> seperti kotak polos — kamu tahu ada kotak, tapi tidak tahu isinya.
Tag semantik seperti kotak dengan label — "header", "menu", "artikel" — langsung tahu fungsinya!
Ringkasan Tag Layout Semantik
| Tag | Fungsi | Contoh Isi |
|---|---|---|
<header> |
Bagian kepala/pembuka halaman atau section | Logo, judul, tagline, menu navigasi |
<nav> |
Navigasi / menu link | Link ke Home, About, Contact |
<main> |
Konten utama halaman (hanya satu per halaman) | Artikel utama, konten inti |
<article> |
Konten yang berdiri sendiri (bisa dipisah) | Postingan blog, berita, komentar |
<section> |
Kelompok konten yang tematik | Bab, galeri, layanan, tim |
<aside> |
Konten pendamping/sidebar | Iklan, profil penulis, link terkait |
<footer> |
Bagian kaki halaman atau section | Copyright, kontak, link kebijakan |
1. Header (<header>)
<header> digunakan untuk bagian pembuka dari halaman atau section. Biasanya berisi logo, judul, dan navigasi.
<header>
<h1>My Awesome Blog</h1>
<p>Tempat berbagi cerita dan pengalaman</p>
</header>
Contoh:
My Awesome Blog
Tempat berbagi cerita dan pengalaman
2. Nav (<nav>)
<nav> digunakan untuk menu navigasi yang berisi link-link ke halaman lain.
<nav>
<a href="#">Home</a>
<a href="#">Tentang</a>
<a href="#">Blog</a>
<a href="#">Kontak</a>
</nav>
Contoh:
3. Main (<main>)
<main> adalah konten utama halaman. Setiap halaman hanya boleh memiliki SATU tag <main>. Tidak boleh diletakkan di dalam <article>, <aside>, atau <footer>.
<main>
<!-- konten utama halaman di sini -->
<h2>Selamat datang di blog saya!</h2>
<p>Ini adalah konten utama halaman.</p>
</main>
💡 Catatan Penting: Tag
<main> hanya SATU per halaman. Gunakan untuk konten inti yang unik, bukan untuk sidebar, header, atau footer yang muncul di banyak halaman.
4. Article (<article>)
<article> digunakan untuk konten yang berdiri sendiri dan bisa dipisahkan dari konteks halaman. Cocok untuk postingan blog, berita, komentar, atau kartu produk.
<article>
<h2>Judul Artikel</h2>
<p>Dipublikasikan pada 15 April 2024</p>
<p>Isi artikel lengkap di sini...</p>
</article>
Contoh:
Belajar HTML Itu Seru!
Dipublikasikan pada 15 April 2024
HTML adalah fondasi dari setiap website. Dengan memahami HTML, kamu bisa membuat halaman web sendiri dari nol...
Baca selengkapnya →5. Section (<section>)
<section> digunakan untuk mengelompokkan konten yang memiliki tema serupa. Biasanya di dalam section ada heading sendiri.
<section>
<h2>Layanan Kami</h2>
<p>Kami menyediakan berbagai layanan berkualitas...</p>
</section>
<section>
<h2>Testimoni Pelanggan</h2>
<p>"Pelayanannya sangat memuaskan!" - Budi</p>
</section>
Contoh:
Layanan Kami
Kami menyediakan berbagai layanan berkualitas untuk kebutuhan digital Anda.
Testimoni Pelanggan
"Pelayanannya sangat memuaskan dan cepat!" - Budi
6. Aside (<aside>)
<aside> digunakan untuk konten pendamping yang tidak langsung terkait dengan konten utama. Biasanya berupa sidebar, iklan, atau profil penulis.
<aside>
<h3>Tentang Penulis</h3>
<img src="foto.jpg" alt="Foto penulis" width="100">
<p>Seorang pengembang web yang suka berbagi ilmu.</p>
</aside>
Contoh:
7. Footer (<footer>)
<footer> digunakan untuk bagian kaki dari halaman atau section. Biasanya berisi copyright, link kebijakan, atau informasi kontak.
<footer>
<p>© 2024 My Website. All rights reserved.</p>
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
</footer>
Contoh:
Studi Kasus: Layout Website Lengkap
Berikut contoh layout website lengkap menggunakan semua tag semantik:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Semantik - Belajar HTML</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px 0;
text-align: center;
}
nav {
background: #1e293b;
padding: 15px 0;
}
nav a {
color: white;
text-decoration: none;
margin: 0 20px;
transition: color 0.3s;
}
nav a:hover {
color: #667eea;
}
.flex-container {
display: flex;
gap: 30px;
padding: 40px 0;
}
main {
flex: 3;
}
aside {
flex: 1;
}
article {
background: #f8fafc;
padding: 25px;
border-radius: 15px;
margin-bottom: 30px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
article h2 {
color: #667eea;
margin-bottom: 10px;
}
.meta {
color: #666;
font-size: 14px;
margin-bottom: 15px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 10px;
}
section {
margin-bottom: 30px;
}
section h3 {
color: #334155;
margin-bottom: 15px;
border-left: 4px solid #667eea;
padding-left: 15px;
}
aside section {
background: #f1f5f9;
padding: 20px;
border-radius: 15px;
margin-bottom: 20px;
}
footer {
background: #0f172a;
color: #94a3b8;
text-align: center;
padding: 30px 0;
margin-top: 20px;
}
footer a {
color: #94a3b8;
text-decoration: none;
margin: 0 10px;
}
footer a:hover {
color: #667eea;
}
@media (max-width: 768px) {
.flex-container {
flex-direction: column;
}
nav a {
display: inline-block;
margin: 5px 15px;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Website Semantik</h1>
<p>Belajar HTML5 dengan tag layout yang bermakna</p>
</div>
</header>
<nav>
<div class="container" style="text-align: center;">
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Layanan</a>
<a href="#">Kontak</a>
</div>
</nav>
<div class="container flex-container">
<main>
<article>
<h2>Mengapa Tag Semantik Penting?</h2>
<div class="meta">15 April 2024 | Oleh: Admin</div>
<p>Tag semantik membantu mesin pencari memahami struktur konten website kita. Ini sangat berpengaruh pada SEO dan aksesibilitas. Pengguna screen reader bisa menavigasi halaman dengan lebih mudah karena tahu mana yang header, nav, main, dan footer.</p>
<p>Selain itu, kode menjadi lebih mudah dibaca oleh developer lain. Bayangkan jika semua hanya menggunakan <div> — akan sulit membedakan mana header, konten, dan sidebar.</p>
</article>
<article>
<h2>Tips Menggunakan Tag Semantik</h2>
<div class="meta">14 April 2024 | Oleh: Admin</div>
<p>Gunakan <header> untuk bagian atas halaman, <nav> untuk menu, <main> untuk konten utama, <article> untuk konten independen, <section> untuk mengelompokkan konten tematik, <aside> untuk sidebar, dan <footer> untuk bagian bawah.</p>
</article>
</main>
<aside>
<section>
<h3>Tentang Penulis</h3>
<img src="https://via.placeholder.com/80x80?text=Avatar" alt="Avatar" style="border-radius: 50%; width: 80px; height: 80px; object-fit: cover; margin-bottom: 10px;">
<p>Halo! Saya seorang web developer yang suka berbagi ilmu tentang HTML, CSS, dan JavaScript.</p>
</section>
<section>
<h3>Artikel Populer</h3>
<ul style="list-style: none; padding-left: 0;">
<li><a href="#" style="color: #667eea; text-decoration: none;">Belajar HTML untuk Pemula</a></li>
<li><a href="#" style="color: #667eea; text-decoration: none;">Panduan CSS Flexbox</a></li>
<li><a href="#" style="color: #667eea; text-decoration: none;">JavaScript Dasar</a></li>
</ul>
</section>
<section>
<h3>Iklan</h3>
<div style="background: #e2e8f0; padding: 20px; text-align: center; border-radius: 10px;">
<p>Promo Spesial!</p>
<p style="font-size: 20px; font-weight: bold; color: #667eea;">Diskon 50%</p>
<button style="background: #667eea; color: white; border: none; padding: 8px 16px; border-radius: 5px; cursor: pointer;">Belanja Sekarang</button>
</div>
</section>
</aside>
</div>
<footer>
<div class="container">
<p>© 2024 Website Semantik. All rights reserved.</p>
<p>
<a href="#">Privacy Policy</a> |
<a href="#">Terms of Service</a> |
<a href="#">Contact Us</a>
</p>
</div>
</footer>
</body>
</html>
Hasil layout semantik:
Perbandingan div vs Tag Semantik
| Dengan div (Non-semantik) | Dengan Tag Semantik |
|---|---|
<div class="header"> |
<header> |
<div class="nav"> |
<nav> |
<div class="main"> |
<main> |
<div class="article"> |
<article> |
<div class="section"> |
<section> |
<div class="sidebar"> |
<aside> |
<div class="footer"> |
<footer> |
Keuntungan Tag Semantik:
- SEO lebih baik (mesin pencari paham struktur)
- Aksesibilitas meningkat (screen reader bisa navigasi)
- Kode lebih mudah dibaca dan di-maintenance
- Mendukung responsive design dengan lebih alami
- Memberi makna pada setiap bagian halaman
Kesalahan Umum Pemula
- Menggunakan lebih dari satu
<main>dalam satu halaman → Harus hanya SATU<main>per halaman. - Menempatkan
<main>di dalam<article>atau<aside>→ Tidak valid.<main>harus langsung di dalam<body>. - Menggunakan
<section>tanpa heading → Sebaiknya setiap<section>memiliki heading (<h1>-<h6>). - Menggunakan
<article>untuk konten yang tidak berdiri sendiri →<article>harus bisa dipisahkan dari halaman tanpa kehilangan makna. - Menggunakan
<header>dan<footer>berkali-kali di luar konteks → Boleh ada banyak header/footer (misal di setiap section), tapi pastikan relevan.
Tips Struktur yang Benar:
<body>
<header>...</header>
<nav>...</nav>
<main>
<article>
<header>...</header> <!-- header di dalam article -->
<section>...</section>
<footer>...</footer>
</article>
<aside>...</aside>
</main>
<footer>...</footer>
</body>
Latihan Singkat
- Buat file HTML baru dengan judul "Portofolio Sederhana"
- Gunakan
<header>untuk judul dan tagline - Gunakan
<nav>untuk menu (Home, Portofolio, Kontak) - Gunakan
<main>untuk konten utama - Di dalam
<main>, buat 2<article>(masing-masing untuk project portofolio) - Gunakan
<aside>untuk sidebar berisi info kontak - Gunakan
<footer>untuk copyright - Simpan dan buka di browser
Intisari Hari Ini
<header>→ bagian kepala (logo, judul)<nav>→ menu navigasi<main>→ konten utama (hanya satu per halaman)<article>→ konten independen (postingan blog, berita)<section>→ kelompok konten tematik<aside>→ konten pendamping (sidebar, iklan)<footer>→ bagian kaki (copyright, kontak)- Tag semantik lebih baik untuk SEO, aksesibilitas, dan maintenance
Tantangan Akhir Pekan: Buat sebuah Halaman Blog Pribadi dengan struktur semantik yang lengkap! Halaman harus memiliki:
- Header dengan judul blog dan deskripsi singkat
- Nav dengan minimal 4 link navigasi
- Main yang berisi minimal 3 article (postingan blog dengan judul, tanggal, dan isi singkat)
- Section di dalam main untuk mengelompokkan artikel (misal: "Artikel Terbaru" dan "Artikel Populer")
- Aside yang berisi: profil penulis, artikel populer, dan iklan/ promo
- Footer dengan copyright, link sosial media, dan link kebijakan privasi
- Gunakan CSS Grid atau Flexbox untuk layout (header + nav + main + aside + footer)
- Tambahkan kotak penjelasan di bagian bawah yang menjelaskan fungsi setiap tag semantik yang kamu gunakan
Artikel Sebelumnya: HTML Dasar #16 - Perbedaan div dan span (Block vs Inline Element)
Artikel Selanjutnya: HTML Dasar #18 - Membuat Layout Sederhana dengan div (Tanpa CSS)