Semantic elements that define page layout and meaning.
| Tag | Meaning |
|---|---|
<header> |
Page or section header |
<nav> |
Navigation links container |
<main> |
Main content (unique per page) |
<article> |
Self-contained content (e.g. blog post) |
<section> |
Thematic grouping of content |
<footer> |
Page or section footer |
<details> / <summary>Built-in toggle component for expandable sections.
<details>
<summary>Click to expand</summary>
<p>More details here.</p>
</details>
<progress>Displays a visual indicator of task completion.
<progress value="70" max="100"></progress>
<dialog>Native modal component. Can be opened/closed with JavaScript.
<dialog open>
<p>This is a modal.</p>
<button onclick="this.parentElement.close()">Close</button>
</dialog>
<picture>Serves different image sources based on media queries.
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<img src="image-default.jpg" alt="Responsive image">
</picture>