Learning HTML - Semantic Elements and Structural Meaning
This episode breaks down HTML5 semantic elements: header, nav, main, footer, section, article, and aside, and why meaningful structure beats div soup for accessibility and SEO.
#Introduction
Up to episode 6, much of our page structure was built with div. That's fine for beginners — but the modern web needs more than generic wrappers. Episode 7 covers semantic elements and structural meaning: header, nav, main, footer, section, article, and aside.
Semantic elements give meaning to each part of the page. This meaning is read by screen readers, search engines, and other developers. Meaningful structure is a big step toward the accessibility we'll deepen in episode 10.
#Why Semantics Matter
#The Danger of Div Soup
The habit of wrapping everything in div is called div soup. The result: a page where every part is semantically identical — no marker of which is the header, which is the main content, and which is the footer.
<div class="atas">
<div class="menu">
<div class="item">Beranda</div>
</div>
</div>
<div class="isi">
<p>Artikel utama.</p>
</div>Screen readers can't tell what's skippable, and search engines struggle to recognize structure. The browser can't offer built-in landmark navigation either.
#What Semantic Elements Offer
Semantic elements answer the question "what is this section?". Screen readers can jump straight to main or nav. Search engines understand which content is primary. All of it without a single line of CSS or JavaScript.
#The Page's Main Landmarks
#header and footer
header marks the opening section of a page or section: usually containing a logo and title. footer marks the closing section: secondary links, contact information, copyright.
<header>
<p>Kafe Kopi Nusantara</p>
</header>
<main>
<h1>Selamat Datang</h1>
</main>
<footer>
<p>Hak cipta 2026 Kafe Kopi Nusantara.</p>
</footer>header and footer can appear more than once per page — for example inside each article — as long as they don't collide in hierarchy.
#nav and main
nav marks the main navigation link block; main marks the page's unique content:
<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>There may only be one main per page. This element is the primary jump target for screen readers — content outside main, like navigation, can be skipped.
#Grouping Content
#section and article
section groups thematically related content and usually has its own heading. article marks self-contained content — content that stands alone and still makes sense if moved.
<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>A rule of thumb: if the content still makes sense when syndicated to another page, it's article; if it's only part of a larger narrative, it's section.
#aside
aside marks related but secondary content — sidebars, quotes, ads, or margin notes:
<aside>
<p>Tahukah kamu? Kopi pertama kali ditemukan di Ethiopia.</p>
</aside>If the aside content can stand alone, an article inside aside is more appropriate; if it's purely decorative, leave it as aside without a heading.
#Exercise: A Full Semantic Page
Rebuild the café page as a complete semantic structure:
<!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>Open the page in the browser and observe the Elements panel. Use a testing extension or the W3C validator to confirm the landmarks are detected: curl -X POST -H "Content-Type: text/html" --data-binary @index.html https://validator.w3.org/nu/?out=json.
#Common Mistakes and Solutions
#Duplicate main
Only one main per page. Navigation and sidebars should not be inside main if they're repeating parts of a template.
#section Without a Heading
A section without a heading confuses screen reader users. If a section has no title, chances are you need a div.
#Closing
Episode 7 turns your pages from a collection of divs into meaningful documents: header and footer for openings and closings, main for unique content, nav for navigation, section and article for grouping, and aside for secondary content.
Key takeaways:
- Semantic elements carry meaning that screen readers and search engines read.
mainmay only appear once per page.sectionfor thematic grouping;articlefor self-contained content.asidefor secondary content;headerandfooterfor openings and closings.- Avoid div soup; choose the element that best represents each section's meaning.
In the next episode, episode 8, we'll cover HTML forms and input controls — form, input, textarea, and button, complete with GET and POST methods. You'll start interacting with users through your pages.