HTML Semantic Elements Table
| Element | Purpose |
|---|---|
| <header> | Introductory content: logo, nav, heading - typically at the top |
| <nav> | Navigation links - main menus, breadcrumbs, table of contents |
| <main> | The dominant content - there must be only one per page |
| <article> | Self-contained content that makes sense on its own (blog post, comment) |
| <section> | Thematic grouping with a heading - a chapter, tab panel, or category |
| <aside> | Tangentially related content - sidebar, callout, pull quote |
| <footer> | Footer: author info, copyright, related links |
| <figure> | Self-contained media: image, chart, diagram, code listing |
| <figcaption> | Caption or legend for a figure element |
| <time> | A specific point in time - the datetime attribute makes it machine-readable |
| <address> | Contact information for the nearest article or body |
| <details> | Collapsible disclosure widget (native accordion, no JS needed) |
Semantic HTML elements describe their meaning to browsers, screen readers and search engines - not just their appearance. A <div class="header"> looks the same to users but is invisible to assistive technology, while <header> tells a screen reader "this is the beginning of the page."
The business case: Google gives ranking signals to proper <article> structure, screen readers navigate by landmarks (<nav>, <main>, <aside>), and <details> provides a free accessible accordion without a single line of JavaScript.
How to use
- Filter by element or section type - structure, content, media - to find what you need.
- Click any element to copy the tag name for use in your HTML.
- Read the purpose column for the one-line explanation of when to use each element.
Frequently asked questions
What is the difference between article and section?
article is self-contained content that makes sense on its own - a blog post, a news story, a comment, a product card. section is a thematic grouping that needs a heading but doesn’t stand alone - a chapter, a tab panel, a category of items. If you would syndicate the content in an RSS feed, use article.
Can I have multiple header and footer elements?
Yes - header and footer are scoped to their nearest ancestor section or article. A page has one main header and one main footer, but each article and section can have its own header and footer for local navigation and metadata.
Why should I use the time element?
The time element with a datetime attribute makes dates machine-readable: <time datetime="2026-01-15">January 15th</time>. Browsers, search engines and calendar applications can parse the datetime value regardless of how the visible text is formatted. It also enables features like "add to calendar" with zero JavaScript.
What is the details element and why is it better than a JavaScript accordion?
The details element creates a native collapsible section with the summary child as the toggle. It is accessible by default (keyboard navigable, screen reader announced), requires zero JavaScript, and works even when CSS fails to load. Use it for FAQ sections, spoiler tags and collapsible code examples.