Belajar HTML - Struktur Navigasi dan Heading untuk SEO dan A11y
Episode ini membedah struktur navigasi dan heading: hirarki satu h1, elemen nav dan tautan kontekstual, breadcrumb dengan aria-current, serta landmark untuk SEO dan aksesibilitas.
#Pendahuluan
Search engine dan screen reader sama-sama membaca struktur dokumen — bukan tampilannya. Episode 12 membahas struktur navigasi dan heading yang baik untuk SEO dan aksesibilitas: hirarki heading yang logis, elemen nav, tautan kontekstual, dan breadcrumb.
Markup yang berstruktur baik adalah dua kemenangan sekaligus: mesin pencari memahami topik dan hierarki halaman, sementara pengguna alat bantu bisa menavigasi dengan cepat. Ini adalah episode yang merangkai banyak pelajaran sebelumnya menjadi satu pola.
#Hirarki Heading yang Benar
#Satu h1 per Halaman
Heading membentuk outline dokumen, seperti daftar isi. Aturan dasarnya:
- Gunakan satu
h1yang memuat topik utama halaman. - Susun
h2untuk bagian utama,h3untuk sub bagian, dan seterusnya. - Jangan melompat level, misalnya dari
h2langsung keh5. - Jangan memakai heading untuk gaya tampilan — itu tugas CSS.
<h1>Panduan Membuat Kopi</h1>
<h2>Memilih Biji</h2>
<h3>Biji Arabika</h3>
<h3>Biji Robusta</h3>
<h2>Menyeduh</h2>Screen reader punya mode heading navigation yang melompat antar heading. Outline yang lompat-lompat membuat navigasi ini kacau.
#Heading dan Search Engine
Search engine menggunakan struktur heading untuk memahami topik dan urutan penting halaman. h1 yang jelas dan deskriptif membantu halaman tampil di hasil pencarian untuk topik yang relevan. title di head dan h1 di body sebaiknya selaras, meski tidak harus sama persis.
#Elemen nav dan Tautan Kontekstual
#nav untuk Navigasi Utama
Blok tautan utama halaman ditandai nav:
<nav aria-label="Navigasi utama">
<ul>
<li><a href="/beranda" aria-current="page">Beranda</a></li>
<li><a href="/artikel">Artikel</a></li>
<li><a href="/tentang">Tentang</a></li>
</ul>
</nav>nav menandai kelompok tautan yang signifikan. Beberapa nav boleh ada — bedakan dengan aria-label seperti "Navigasi utama" dan "Navigasi footer".
#Tautan Kontekstual di dalam Konten
Selain menu, halaman membutuhkan tautan kontekstual — tautan yang relevan dengan posisi pembaca, seperti "baca artikel berikutnya" di akhir artikel. Tautan kontekstual membantu pengguna menemukan konten lanjutan dan membantu search engine memahami keterkaitan halaman.
<p>Artikel berikutnya: <a href="/artikel/menyeduh-v60">Menyeduh Kopi dengan V60</a></p>#Breadcrumb
#Menandai Jalur Navigasi
Breadcrumb menunjukkan posisi pengguna dalam hierarki situs. Elemen nav dengan aria-label dan aria-current="page" pada halaman terakhir:
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Beranda</a></li>
<li><a href="/panduan">Panduan</a></li>
<li aria-current="page">Membuat Kopi</li>
</ol>
</nav>Breadcrumb memakai ol karena urutan posisi penting. Item terakhir menandai halaman saat ini dengan aria-current="page" dan bukan tautan.
#Landmark untuk SEO dan A11y
#Memetakan Halaman
Landmark adalah wilayah utama halaman: header, nav, main, footer, dan seterusnya. Search engine dan screen reader mengandalkan landmark untuk memahami tata letak semantik.
<body>
<header>Logo dan nama situs</header>
<nav aria-label="Navigasi utama">Menu utama</nav>
<main>
<article>
<h1>Judul Artikel</h1>
<p>Konten utama artikel.</p>
</article>
<aside>Konten pendukung</aside>
</main>
<footer>Informasi kontak dan hak cipta</footer>
</body>Perhatikan pola: satu main, satu h1 di dalam article, dan landmark yang jelas. Ini template yang bisa dipakai ulang untuk hampir semua halaman konten.
#Latihan: Halaman Berita Mini
Susun halaman berita dengan struktur lengkap:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harga Kopi Naik di Pasar Domestik</title>
</head>
<body>
<header>
<p>Berita Nusantara</p>
</header>
<nav aria-label="Navigasi utama">
<ul>
<li><a href="/beranda">Beranda</a></li>
<li><a href="/ekonomi" aria-current="page">Ekonomi</a></li>
<li><a href="/olahraga">Olahraga</a></li>
</ul>
</nav>
<main>
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/beranda">Beranda</a></li>
<li aria-current="page">Ekonomi</li>
</ol>
</nav>
<article>
<h1>Harga Kopi Naik di Pasar Domestik</h1>
<h2>Faktor Cuaca dan Permintaan</h2>
<p>Cuaca kering di sentra produksi menekan panen tahun ini.</p>
<h2>Dampak bagi Petani</h2>
<p>Petani menikmati kenaikan, namun distributor mulai menahan stok.</p>
</article>
<aside>
<p>Baca juga: <a href="/ekonomi/biji-kopi-mulai-diekspor">Biji kopi mulai diekspor ke Eropa</a></p>
</aside>
</main>
<footer>
<p>Hak cipta 2026 Berita Nusantara.</p>
</footer>
</body>
</html>Periksa outline heading halaman dengan ekstensi browser, atau jalankan curl -s http://localhost:8080 untuk melihat dokumen mentahnya.
#Kesalahan Umum dan Solusinya
#Banyak h1
Beberapa h1 dalam satu halaman mengaburkan topik utama. Jika halaman punya banyak bagian besar, gunakan satu h1 lalu h2 untuk bagian-bagian tersebut.
#Heading Demi Gaya
Memakai heading untuk memperbesar teks merusak outline. Struktur heading harus mengikuti logika konten; ukuran diatur CSS.
#Penutup
Episode 12 menyatukan struktur navigasi dan heading: satu h1 dengan outline yang logis, nav untuk menu, tautan kontekstual, breadcrumb dengan aria-current, dan peta landmark yang rapi.
Inti yang harus dibawa pulang:
- Satu
h1per halaman; heading tidak boleh melompat level. navmenandai blok tautan; bedakan antarnavdenganaria-label.- Breadcrumb memakai
oldenganaria-current="page"di item terakhir. - Landmark yang jelas membantu SEO dan navigasi alat bantu.
- Heading mengikuti logika konten, bukan gaya tampilan.
Di episode 13 selanjutnya kita akan membahas menyisipkan gaya menggunakan CSS dan atribut inline — atribut style, style internal, dan link eksternal, lengkap dengan aturan prioritas yang berlaku.