Semantic markup uses HTML5 elements to name the major areas of a page instead of leaving everything as anonymous div and span containers. Think of the tags as clear labels on boxes: they tell automated readers what each area is for. That helps search-engine crawlers and screen readers find and interpret important content. section 11.3
The core layout tags are <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>. They describe content roles, not visual positions—so a browser may still place them in its ordinary top-to-bottom flow until CSS changes the layout. section 11.11 section 11.10
Use each tag for the job its name suggests:
- <header> contains introductory content, such as a logo and page title. section 11.11
- <nav> contains navigation content, commonly a list of links. section 11.11
- <main> contains content unique to the current page; use only one main element. section 11.11
- <article> marks a complete, self-contained composition, while <section> wraps a part worth including in a page outline. section 11.11
- <aside> holds text not directly related to the page’s unique content, and <footer> holds closing content such as copyright or contact information. section 11.11
PLAY: Label a complete page
A small page can have a header with a logo and title, a nav area with links, a main area containing an article divided into Introduction, Argument, and Summary sections, an aside for sidebar text, and a footer with copyright text. The labels make the page structure visible in the HTML itself—no detective hat required. section 11.10
<header>
<img src="/images/SD-logo.png" alt="Semantics Depot logo">
<h1>Semantics Depot</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="#">About Us</a>
</nav>
<main>
<article>
<section>
<h3>Introduction</h3>
Introduction text
</section>
<section>
<h3>Argument</h3>
Argument text
</section>
<section>
<h3>Summary</h3>
Summary text
</section>
</article>
<aside>
<h3>Sidebar Title</h3>
<p>
Sidebar paragraph
</p>
</aside>
</main>
<footer> #1
<p>Copyright Semantic Depot</p>
</footer> #1
Inspect the complete HTML example to see header, navigation, main content, article sections, sidebar, and footer working together. section 11.10
Semantic tags provide the page’s meaning; CSS provides its appearance and placement. A portfolio page, for example, can begin with header, nav, main, section, and footer elements, then use CSS Grid and Flexbox to center and arrange the visible layout. section 20.5
