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 |
|---|---|---|
<header> | Site or section header (logo, title, nav) | <div class="header"> |
<nav> | Navigation links | <div class="nav"> |
<main> | The primary content of the page (one per page) | <div class="content"> |
<article> | Self-contained content (blog post, news story) | <div class="post"> |
<section> | A thematic grouping of content | <div class="section"> |
<footer> | Site or section footer (copyright, links) | <div class="footer"> |
<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"