Learning HTML - Navigation Structure and Headings for SEO and A11y
This episode breaks down navigation and heading structure: a single h1 hierarchy, the nav element and contextual links, breadcrumbs with aria-current, and landmarks for SEO and accessibility.
#Introduction
Search engines and screen readers both read document structure — not its appearance. Episode 12 covers navigation structure and headings for SEO and accessibility: a logical heading hierarchy, the nav element, contextual links, and breadcrumbs.
Well-structured markup is a double win: search engines understand the page's topic and hierarchy, while assistive technology users can navigate quickly. This episode weaves many previous lessons into a single pattern.
#A Correct Heading Hierarchy
#One h1 per Page
Headings form a document outline, like a table of contents. The basic rules:
- Use one
h1that holds the page's main topic. - Arrange
h2for main sections,h3for subsections, and so on. - Don't skip levels, for example from
h2straight toh5. - Don't use headings for visual styling — that's CSS's job.
<h1>Panduan Membuat Kopi</h1>
<h2>Memilih Biji</h2>
<h3>Biji Arabika</h3>
<h3>Biji Robusta</h3>
<h2>Menyeduh</h2>Screen readers have a heading navigation mode that jumps between headings. A skipping outline makes this navigation chaotic.
#Headings and Search Engines
Search engines use the heading structure to understand a page's topic and content priority. A clear, descriptive h1 helps the page appear in search results for relevant topics. The title in head and the h1 in body should align, though they don't have to be identical.
#The nav Element and Contextual Links
#nav for Main Navigation
The page's main link block is marked with 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 marks a significant group of links. Multiple nav elements are allowed — distinguish them with aria-labels like "Navigasi utama" and "Navigasi footer".
#Contextual Links in Content
Beyond menus, pages need contextual links — links relevant to the reader's position, like "read the next article" at the end of an article. Contextual links help users find follow-up content and help search engines understand page relationships.
<p>Artikel berikutnya: <a href="/artikel/menyeduh-v60">Menyeduh Kopi dengan V60</a></p>#Breadcrumbs
#Marking the Navigation Path
Breadcrumbs show the user's position in the site hierarchy. A nav element with aria-label and aria-current="page" on the last item:
<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>Breadcrumbs use ol because positional order matters. The last item marks the current page with aria-current="page" and isn't a link.
#Landmarks for SEO and A11y
#Mapping the Page
Landmarks are a page's main regions: header, nav, main, footer, and so on. Search engines and screen readers rely on landmarks to understand semantic layout.
<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>Notice the pattern: one main, one h1 inside article, and clear landmarks. This is a reusable template for nearly any content page.
#Exercise: A Mini News Page
Assemble a news page with a complete structure:
<!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>Check the page's heading outline with a browser extension, or run curl -s http://localhost:8080 to see the raw document.
#Common Mistakes and Solutions
#Multiple h1s
Several h1s in one page blur the main topic. If a page has many large sections, use one h1 then h2 for those sections.
#Headings for Styling
Using headings to enlarge text breaks the outline. Heading structure must follow content logic; size is handled by CSS.
#Closing
Episode 12 brings navigation and heading structure together: one h1 with a logical outline, nav for menus, contextual links, breadcrumbs with aria-current, and a tidy landmark map.
Key takeaways:
- One
h1per page; headings must not skip levels. navmarks link blocks; distinguish betweennavelements witharia-label.- Breadcrumbs use
olwitharia-current="page"on the last item. - Clear landmarks help SEO and assistive navigation.
- Headings follow content logic, not visual styling.
In the next episode, episode 13, we'll cover inserting styles with CSS and inline attributes — the style attribute, internal style, and external link, complete with the precedence rules that apply.