Semantic Structure
Today we look at semantic page landmarks: header, nav, main, and footer — tags that name the job of each region.
What you'll learn in this lesson
- 1Pages have named regions, not only divs
- 2header is the top band
- 3nav holds navigation links
- 4main is the primary content
- 5footer is the bottom of the page
- 1
What semantic structure is
Last lesson we merged table cells. Today we step back to the whole page. A page usually has a top band, some links, the main story, and a bottom line. Those regions need names, not only empty
divboxes.Semantic tags name the job:
<header>for the top,<nav>for navigation links,<main>for the primary content, and<footer>for the bottom. - 2
The "Div Soup" Problem: When Every Box Looks Identical
Early web pages were built with dozens of nested
<div>tags using classes like<div class="header">and<div class="nav">. To search engines and screen readers, all these boxes were completely indistinguishable and meaningless.HTML5 introduced standardized landmark tags:
<header>,<nav>,<main>,<article>,<section>, and<footer>. They behave like standard block boxes visually, but explicitly broadcast their purpose to the outside world. - 3
How Browsers, Screen Readers, and Search Crawlers Parse Landmarks
Screen readers can present landmark shortcuts directly to visually impaired users, allowing them to jump straight to the
<main>content or quickly skip past navigation menus.Search engines like Google use semantic markers to understand page hierarchy, index primary content with higher weight, and deliver better rich snippets in search results.
- 4
Hands-On: Structuring a Page with Clean Landmarks
Examine the code snippet below. Notice how the page skeleton is formed with descriptive semantic containers instead of generic
<div>boxes. - 5
Landmarks First, Generic Divs as a Last Resort
Prefer these landmarks over a pile of anonymous
divs for the page frame. Keep one<main>for the primary content of the document.
Clearly describes its meaning to both the browser and developer. Boosts accessibility (screen readers) and SEO rankings.
Tells nothing about its content. Used purely for styling, layout wrappers, and visual grouping when no semantic tag fits.
Line by line
<header> ... </header>The top of the page. Here it holds the site title and the navigation.
<nav> ... </nav>A landmark for navigation links. Put menus and site links here, not random paragraphs.
<main> ... </main>The primary content of this document. Usually one
mainper page.<footer> ... </footer>The bottom of the page — credits, small print, or closing links.
Try it yourself
Sketch a tiny page with <header>, <nav>, <main>, and <footer>. Put your name in the header and one sentence in main.
Hint: Use the landmark tags for the frame. Put normal content tags inside them.
💡 View Solution (if stuck)
<header>
<h1>Alex's Dev Blog</h1>
<nav>
<a href="#about">About</a> | <a href="#articles">Articles</a>
</nav>
</header>
<main>
<h2>Latest Update</h2>
<p>Today I learned how semantic HTML makes websites accessible and SEO-friendly!</p>
</main>
<footer>
<p>© 2026 Alex. Built with clean HTML.</p>
</footer>Can an HTML page have multiple visible <main> landmark elements?
Common mistakes
- 1.Wrapping the whole page in
divs with class names like “header” instead of using<header>. - 2.Putting several
<main>tags on one page. Keep one primary content region.
Interview prep
Q: What does semantic HTML mean?↓
Using tags that describe the meaning and purpose of content to browsers, assistive technologies, and search engines, rather than purely visual presentation (e.g. <nav> vs <div>).
Q: Why use <main> instead of another div?↓
<main> explicitly identifies the unique central topic of the document. Screen readers allow users to bypass repetitive navigation bars and jump straight to the content inside <main>.
Q: What belongs inside <nav>?↓
Major navigational blocks and menus that help users traverse the site or page sections. Not every single link belongs in a <nav>, only primary navigation clusters.