HTML5 Semantic Tags
Page Structure Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
</head>
<body>
<header> <!-- site header / masthead -->
<nav> <!-- primary navigation -->
<ul><li><a href="/">Home</a></li></ul>
</nav>
</header>
<main> <!-- unique main content -->
<article> <!-- self-contained content -->
<header><h1>Article Title</h1></header>
<section> <!-- thematic grouping -->
<h2>Section Heading</h2>
<p>Content...</p>
</section>
<footer> <!-- article footer -->
<address>By <a href="/about">Author</a></address>
</footer>
</article>
<aside> <!-- related sidebar content -->
<section>Related Articles</section>
</aside>
</main>
<footer> <!-- site footer -->
<small>© 2024 Company</small>
</footer>
</body>
</html>
Semantic Elements Reference
| Element | Purpose | Notes |
|---|---|---|
| <header> | Introductory content or navigational aids | Can appear multiple times (page + article) |
| <nav> | Major navigation links | Not for all link groups; use aria-label to differentiate |
| <main> | Main content; unique to the document | One per page; skip-nav target |
| <article> | Self-contained piece of content | Blog post, news article, forum post, widget |
| <section> | Thematic grouping within a document | Should have a heading; not a generic container |
| <aside> | Tangentially related content | Sidebar, pull quote, advertisement area |
| <footer> | Footer for its nearest sectioning ancestor | Contact, copyright, related links |
| <figure>/<figcaption> | Self-contained figure with caption | Images, code snippets, charts |
| <time> | Machine-readable date/time | Use datetime attribute: <time datetime="2024-01-15"> |
| <mark> | Highlighted/relevant text | Search result highlighting |
| <details>/<summary> | Expandable disclosure widget | Native accordion, no JS needed |
| <dialog> | Native modal dialog | Use showModal() for accessibility |