Lesson 2 of 55 · HTML
Semantic HTML – The Structural Elements
Duration: 9 min
Semantic Structure (HTML5)
<header>
<h1>My Portfolio</h1>
<nav aria-label='Primary navigation'>
<ul>
<li><a href='index.html'>Home</a></li>
<li><a href='projects.html'>Projects</a></li>
<li><a href='contact.html'>Contact</a></li>
</ul>
</nav>
</header>
<main>
<section aria-labelledby='about-heading'>
<h2 id='about-heading'>About Me</h2>
<p>…</p>
</section>
<article>
<h2>Latest Blog Post</h2>
<p>…</p>
</article>
</main>
<aside>
<h2>Related Links</h2>
<ul>…</ul>
</aside>
<footer>
<p>© 2026 Jane Doe</p>
</footer>
Landmarks explained
<header>– Introductory content, often contains logo and navigation.<nav>– Primary navigation links. When multiple navs exist, give each anaria-label.<main>– Main unique content; only one per page.<section>– Thematic grouping; should start with a heading.<article>– Self‑contained composition (blog post, news article).<aside>– Tangential content such as sidebars or pull quotes.<footer>– Author info, copyright, related links.
SEO & accessibility impact
- Landmarks improve crawlability – search engines understand the page hierarchy.
- Screen readers expose these regions in the Accessibility Tree, enabling quick jumps.
- Keep the DOM order logical – header → nav → main → section/article → aside → footer.
Quick checklist for semantic layout
- One
<header>at the top? ✅ - Navigation wrapped in
<nav>with a clear label? ✅ - Exactly one
<main>element? ✅ - Sections start with a heading (
<h2>‑<h6>)? ✅ <article>used for self‑contained content? ✅<aside>for complementary information? ✅<footer>placed at the bottom? ✅
Tip: Run your page through the WAVE tool – it highlights missing or mis‑used landmarks.