Semantic Page Architecture
Move beyond div soup and give a page a real, meaningful skeleton.
By now you know the individual semantic tags. The leap to senior is learning how they fit together into a single, predictable document outline that browsers, search engines, and screen readers all agree on.
The one-page mental model
Think of a page as a document you could read aloud. It has exactly one <main> (the story), an optional <header> and <footer> around it, and <nav> for the ways in and out. Inside <main>, use <article> for anything that would still make sense if you copied it somewhere else, and <section> to break a long piece into named parts.
The rule I lean on
- Reach for a semantic element first. Only fall back to
<div>when nothing describes the meaning. - Every
<section>should have a heading. If you can't name it, it probably isn't a section. - Headings (
<h1>–<h6>) carry the outline. Don't pick a level for its size.
A quick inline sketch of the skeleton:
<body>
<header><nav>...</nav></header>
<main>
<article>
<h1>Title</h1>
<section><h2>Part</h2>...</section>
</article>
</main>
<footer>...</footer>
</body>Get this scaffolding right and everything else — accessibility, SEO, styling — becomes dramatically easier.
Example
When to use it
- A large CMS platform structures each page with layered semantic landmarks so browser reader modes extract clean content.
- A developer audits a legacy site and replaces deeply nested generic divs with correct landmark roles to pass accessibility audits.
- A content platform uses time elements with datetime attributes so calendar apps and search engines parse publish dates correctly.
More examples
Complete landmark structure
Proper landmark nesting (header, nav, main, article, section, aside, footer) creates an accessible page outline.
<body>
<header>
<nav aria-label="Primary navigation">
<a href="/">Home</a>
</nav>
</header>
<main>
<article>
<h1>Advanced HTML</h1>
<section>
<h2>Landmarks</h2>
<p>Landmarks define page regions.</p>
</section>
</article>
<aside aria-label="Related content">
<h2>See also</h2>
</aside>
</main>
<footer>...</footer>
</body>Time element with machine-readable date
<time datetime="..."> provides a machine-readable ISO date while the element content shows human-friendly text.
<article>
<header>
<h1>HTML5 Released</h1>
<p>Published <time datetime="2014-10-28">October 28, 2014</time></p>
<p>Updated <time datetime="2025-01-15T09:30:00Z">15 Jan 2025</time></p>
</header>
</article>Address element for contact info
<address> semantically marks contact information for the nearest article or the whole page.
<footer>
<address>
<strong>SoundsCode Inc.</strong><br>
<a href="mailto:[email protected]">[email protected]</a><br>
<a href="tel:+14155550199">+1 (415) 555-0199</a>
</address>
</footer>
Discussion