HTML5 Semantic Tags Cheatsheet
Complete HTML5 semantic elements: structure, content, media, and interactive components.
| Tag | Description | Usage | Example | Category |
|---|---|---|---|---|
| <header> | Header section of page or section | Contains logo, navigation, titles | <header><h1>Website Title</h1></header> | Structure |
| <nav> | Navigation links container | Primary and secondary navigation | <nav><a href="/">Home</a></nav> | Structure |
| <main> | Main content of the page | Unique content, excludes sidebars | <main><article>...</article></main> | Structure |
| <article> | Independent content piece | Blog posts, news items, comments | <article><h2>Post Title</h2><p>Content</p></article> | Content |
| <section> | Thematic grouping | Chapter, tabbed content, headings | <section><h2>Section Title</h2></section> | Content |
| <aside> | Sidebar/tangential content | Sidebars, related links, advertisements | <aside><h3>Related</h3></aside> | Structure |
| <footer> | Footer section | Copyright, links, contact info | <footer><p>© 2024</p></footer> | Structure |
| <figure> | Self-contained illustration | Images, diagrams, code samples | <figure><img src="img.jpg" /><figcaption>Caption</figcaption></figure> | Media |
| <figcaption> | Caption for figure | Describe figure element | <figcaption>Image description here</figcaption> | Media |
| <details> | Collapsible details widget | Hidden content, accordion | <details><summary>Click to expand</summary>Content</details> | Interactive |
| <summary> | Summary for details element | Clickable title for details | <summary>Summary text</summary> | Interactive |
| <time> | Date or time | Publish dates, schedules | <time datetime="2024-01-01">January 1, 2024</time> | Content |
| <mark> | Highlighted/marked text | Search results, highlighting | <p>This is <mark>important</mark></p> | Content |
| <progress> | Progress bar | Task completion, file uploads | <progress value="70" max="100"></progress> | Interactive |