Loading…
In the early web, developers used <div> for everything — headers, navigation, sidebars, footers. The problem? A screen reader or search engine could not tell what each <div> was for. HTML5 introduced semantic elements that describe the purpose of content, not just its appearance.
| Element | Purpose | Replaces |
|---|---|---|
| <code><header></code> | Site or section header (logo, title, nav) | <code><div class="header"></code> |
| <code><nav></code> | Navigation links | <code><div class="nav"></code> |
| <code><main></code> | The primary content of the page (one per page) | <code><div class="content"></code> |
| <code><article></code> | Self-contained content (blog post, news story) | <code><div class="post"></code> |
| <code><section></code> | A thematic grouping of content | <code><div class="section"></code> |
| <code><footer></code> | Site or section footer (copyright, links) | <code><div class="footer"></code> |
<main> and <article> over content in random <div>s.<header>
<h1>My Website</h1>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>
<p>© 2025</p>
</footer>
Create a semantic page layout with:
<header> containing an <h1> with text "My Blog" and a <nav> with two links<main> containing an <article> with an <h2> title and a <p> paragraph<footer> containing a <p> with text "© 2025"