Semantic HTML
What is Semantic HTML?
Semantic HTML uses elements that clearly describe their meaning and purpose — both to the browser and to developers. Instead of using <div> for everything, semantic elements like <header>, <nav>, and <article> tell the browser what the content represents.
Semantic Page Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic Layout</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Blog Post Title</h2>
<p>Published: <time datetime="2024-06-15">June 15, 2024</time></p>
<p>Article content goes here...</p>
<section>
<h3>Section Heading</h3>
<p>Section content...</p>
</section>
</article>
<aside>
<h3>Related Posts</h3>
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
Semantic Elements Reference
| Element | Purpose |
|---|---|
<header> | Site or section header — logo, site title, top navigation |
<nav> | Navigation links — menus, breadcrumbs, table of contents |
<main> | The primary content of the page — only one per page |
<article> | Self-contained content — blog post, news article, forum post |
<section> | A thematic grouping of content with a heading |
<aside> | Sidebar content — related links, ads, author bio |
<footer> | Site or section footer — copyright, links, contact info |
<figure> | Self-contained media (image, diagram, code) with optional caption |
<figcaption> | Caption for a <figure> element |
<time> | A date/time value — use datetime attribute for machine-readable format |
<mark> | Highlighted/relevant text |
<details> | Expandable/collapsible content |
<summary> | Visible heading for a <details> element |
<address> | Contact information for the nearest article or body |
figure & figcaption
<!-- figure with caption -->
<figure>
<img src="chart.png" alt="Sales chart for Q4 2024">
<figcaption>Fig 1: Q4 2024 Sales Performance</figcaption>
</figure>
<!-- Expandable content -->
<details>
<summary>Click to see more</summary>
<p>This content is hidden until the user clicks the summary.</p>
</details>
<!-- time element -->
<p>Event on <time datetime="2024-12-25">Christmas Day</time></p>