Belajar HTML - Elemen Semantik dan Arti Struktural
Episode ini membedah elemen semantik HTML5: header, nav, main, footer, section, article, dan aside, serta mengapa struktur bermakna mengalahkan div soup untuk aksesibilitas dan SEO.
#Pendahuluan
Hingga episode 6, banyak struktur halaman kita dibangun dengan div. Itu wajar untuk pemula — tapi web modern membutuhkan lebih dari sekadar pembungkus generik. Episode 7 membahas elemen semantik dan arti struktural: header, nav, main, footer, section, article, dan aside.
Elemen semantik memberi makna pada setiap bagian halaman. Makna ini dibaca oleh screen reader, search engine, dan pengembang lain. Struktur yang bermakna adalah langkah besar menuju aksesibilitas yang akan kita perdalam di episode 10.
#Kenapa Semantik Penting
#Bahaya Div Soup
Kebiasaan membungkus semuanya dengan div disebut div soup. Hasilnya: sebuah halaman yang semua bagiannya identik secara semantik — tidak ada tanda mana header, mana konten utama, mana footer.
<div class="atas">
<div class="menu">
<div class="item">Beranda</div>
</div>
</div>
<div class="isi">
<p>Artikel utama.</p>
</div>Screen reader tidak tahu mana yang bisa dilompati, dan search engine kesulitan mengenali struktur. Browser pun tidak bisa memberikan navigasi landmark bawaan.
#Yang Ditawarkan Elemen Semantik
Elemen semantik menjawab pertanyaan "bagian ini apa?". Screen reader bisa langsung melompat ke main atau nav. Search engine memahami mana konten utama. Semua itu tanpa satu baris pun CSS atau JavaScript.
#Landmark Utama Halaman
#header dan footer
header menandai bagian pembuka sebuah halaman atau bagian: biasanya berisi logo dan judul. footer menandai bagian penutup: tautan sekunder, informasi kontak, hak cipta.
<header>
<p>Kafe Kopi Nusantara</p>
</header>
<main>
<h1>Selamat Datang</h1>
</main>
<footer>
<p>Hak cipta 2026 Kafe Kopi Nusantara.</p>
</footer>header dan footer bisa muncul lebih dari sekali dalam satu halaman — misalnya di dalam setiap article — selama tidak saling bertabrakan secara hierarki.
#nav dan main
nav menandai blok tautan navigasi utama; main menandai konten unik halaman:
<nav aria-label="Navigasi utama">
<ul>
<li><a href="/beranda">Beranda</a></li>
<li><a href="/tentang">Tentang</a></li>
</ul>
</nav>
<main>
<h1>Konten Utama</h1>
<p>Konten unik yang hanya ada di halaman ini.</p>
</main>Hanya boleh ada satu main per halaman. Elemen ini adalah target lompatan utama screen reader — konten di luar main, seperti navigasi, bisa dilewati.
#Mengelompokkan Konten
#section dan article
section mengelompokkan konten yang terkait tematik dan biasanya punya heading sendiri. article menandai konten yang mandiri — bisa berdiri sendiri dan tetap bermakna jika dipindah.
<section>
<h2>Fitur Unggulan</h2>
<p>Penjelasan tentang fitur unggulan produk.</p>
</section>
<article>
<h2>Mengenal Kopi Arabika</h2>
<p>Artikel mandiri tentang kopi arabika, bisa dibagikan tanpa konteks halaman.</p>
</article>Aturan praktis: jika konten tetap masuk akal ketika disindikasi ke halaman lain, itu article; jika hanya bagian dari narasi yang lebih besar, itu section.
#aside
aside menandai konten yang terkait namun sekunder — sidebar, kutipan, iklan, atau catatan tepi:
<aside>
<p>Tahukah kamu? Kopi pertama kali ditemukan di Ethiopia.</p>
</aside>Jika isi aside bisa berdiri sendiri, lebih tepat memakai article di dalam aside; jika murni dekoratif, biarkan sebagai aside tanpa heading.
#Latihan: Halaman Semantik Penuh
Susun kembali halaman kafe menjadi struktur semantik lengkap:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kafe Kopi Nusantara</title>
</head>
<body>
<header>
<p>Kafe Kopi Nusantara</p>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="/beranda" aria-current="page">Beranda</a></li>
<li><a href="/menu">Menu</a></li>
</ul>
</nav>
</header>
<main>
<h1>Selamat Datang di Kafe Kami</h1>
<section>
<h2>Menu Andalan</h2>
<article>
<h3>Kopi Tubruk</h3>
<p>Kopi khas Indonesia yang diseduh sederhana dan pekat.</p>
</article>
</section>
<aside>
<p>Promo: diskon 10 persen setiap Selasa.</p>
</aside>
</main>
<footer>
<p>Hak cipta 2026 Kafe Kopi Nusantara.</p>
</footer>
</body>
</html>Buka halaman di browser dan amati panel Elements. Gunakan ekstensi penguji atau validator W3C untuk melihat bahwa landmark terdeteksi: curl -X POST -H "Content-Type: text/html" --data-binary @index.html https://validator.w3.org/nu/?out=json.
#Kesalahan Umum dan Solusinya
#main yang Ganda
Hanya satu main per halaman. Navigasi dan sidebar tidak boleh berada di dalam main jika itu bagian berulang dari template.
#section Tanpa Heading
section tanpa heading membingungkan pengguna screen reader. Jika sebuah bagian tidak punya judul, kemungkinan besar yang kalian butuhkan adalah div.
#Penutup
Episode 7 mengubah halaman kalian dari kumpulan div menjadi dokumen bermakna: header dan footer untuk pembuka dan penutup, main untuk konten unik, nav untuk navigasi, section dan article untuk pengelompokan, serta aside untuk konten sekunder.
Inti yang harus dibawa pulang:
- Elemen semantik memberi makna yang dibaca screen reader dan search engine.
mainhanya boleh satu per halaman.sectionuntuk pengelompokan tematik;articleuntuk konten mandiri.asideuntuk konten sekunder;headerdanfooteruntuk pembuka dan penutup.- Hindari div soup; pilih elemen yang paling mewakili makna bagian.
Di episode 8 selanjutnya kita akan membahas formulir HTML dan kontrol input — form, input, textarea, dan button, lengkap dengan metode GET dan POST. Kalian akan mulai berinteraksi dengan pengguna lewat halaman.