Semantic markup gives page regions names that describe their jobs. Instead of building everything from anonymous <div> and <span> elements, HTML5 helps browsers, search crawlers, screen readers, and fellow developers recognize the page’s structure. section 11.3 section 16.1
Think of a web page like a small venue with clearly labeled rooms:
- <header> introduces a page or region; <nav> holds navigation links; and <main> identifies the central content. section 11.3
- <article> groups a self-contained piece of content, while <section> groups a distinct part of a page or article. section 11.3 section 11.11
- <aside> marks supporting content such as a sidebar, and <footer> closes a page or region with finishing information. section 11.3 section 11.11
A labeled page skeleton
<header>Site Title</header> <nav>Page links</nav> <main> <article> <section><h2>Article Title</h2><p>Article paragraph</p></section> <aside>Sidebar information</aside> </article> </main> <footer>Copyright and social links</footer> The labels make the layout easier to understand before CSS changes its visual arrangement. Try replacing a collection of generic containers in a small page with these meaningful regions. section 11.11 section 15.7 section 20.6
<header>
<img src="logo.tif" alt="Our logo">
<h1>Site Title</h1>
</header>
<nav>
<ul>
<li>Item 1</li>
etc.
</ul>
</nav>
<main>
<article>
<section>
<h2>Article Title</h2>
<p>Article paragraph</p>
etc.
</section>
<aside>
<p>Sidebar paragraph</p>
etc.
</aside>
</article>
</main>
<footer>
<p>Footer paragraph</p>
etc.
</footer>
Explore the complete labeled layout, including a logo, navigation list, article content, section heading, sidebar, and footer. section 11.11
