Post Title
Content
What is HTML Semantic Elements Reference?
HTML Semantic Elements Reference documents all semantic HTML5 elements β elements that convey meaning about their content, not just visual structure. Each entry explains when and why to use the element (article, section, aside, nav, header, footer, main, figure, figcaption, time, mark, details, summary, address, cite, etc.), its accessibility implications, and common mistakes (like nesting <nav> inside <footer> incorrectly).
Semantic HTML is HTML that uses elements that describe the meaning of content rather than just its appearance. Contrast: <div> means nothing about content; <article> means self-contained, independently distributable content. Semantic elements benefit: screen readers (assistive technology reads landmark roles to navigation-impaired users), search engines (better understanding of content hierarchy), developer maintenance (clearer intent), and accessibility compliance (WCAG requires appropriate markup). The ARIA spec builds on semantic elements β proper semantic HTML often eliminates the need for manual ARIA roles.
HTML5 (2014) standardized semantic elements that were previously represented by div+class combinations: <header> (page or section header), <footer> (page or section footer), <nav> (navigation), <main> (main content, unique per page), <article> (self-contained content), <section> (thematic grouping), <aside> (tangentially related content), <figure>/<figcaption> (media with caption), <time> (machine-readable date/time), <details>/<summary> (native disclosure widget), <mark> (highlighted text).
How to Use
- Browse by element category: structural, text-level, embedded, interactive.
- Click any element to see its definition, use cases, and correct vs incorrect examples.
- Use the 'Accessibility' tab to see the implicit ARIA role each element provides.
- Check 'Common mistakes' to avoid misusing elements (article vs section vs div).
- Copy the example HTML snippets for use in your projects.
Examples
Blog post structure
Result:
Navigation with landmark
Result:
Accessible figure
Result: 
Frequently Asked Questions
What is the difference between article and section?
<article>: self-contained content that makes sense independently β blog posts, news articles, forum posts, product cards. Can be syndicated (via RSS or shared on other sites) without losing context. Should have a heading. <section>: a thematic grouping of content within a larger document β chapters of a book, tabs in a UI, zones of a page. Should have a heading. Is NOT self-contained β it's part of something larger. Rule of thumb: would this make sense if you extracted it and put it on another site? Yes β article. No β section. Neither β div.
What is the difference between header and h1?
<h1> is a heading text element β it creates a page or section title in the document outline. <header> is a structural container that typically contains a heading plus supplementary content: publication date, author, category, table of contents, navigation. A page's <main> should have exactly one <h1>. Multiple <header> elements are fine β each <article> and <section> can have its own <header>. <header> provides an ARIA 'banner' landmark role when it's a direct child of <body> (but not when nested in article/section).
When should I use nav vs ul for navigation?
Use <nav> to wrap navigation link groups that are significant navigation landmarks β main site navigation, breadcrumbs, pagination, table of contents. Not every group of links needs <nav> β only those that help users navigate the site or page. Within <nav>, use <ul> for lists of links (which is most navigation). If you have multiple <nav> elements on a page, give each an aria-label to distinguish them: <nav aria-label='Main navigation'> and <nav aria-label='Breadcrumbs'>. Screen readers list all nav landmarks to let users jump between them.
What is the main element and why is it important?
<main> marks the primary content of the document β distinct from header, footer, and navigation. Rules: there should be exactly one <main> per page (that's not hidden), and it should not be nested inside article, aside, footer, header, or nav. <main> provides an ARIA 'main' landmark β screen reader users can jump to main content directly, bypassing navigation. 'Skip to main content' links (accessibility feature, often first link on page) typically link to the <main> element. Search engines may weight content inside <main> more heavily as the primary topic.
What does the time element do?
<time> marks a specific date, time, or duration and provides a machine-readable version in the datetime attribute. Examples: <time datetime='2026-07-26'>July 26, 2026</time>, <time datetime='2026-07-26T14:00'>2pm</time>, <time datetime='PT2H30M'>2 hours 30 minutes</time>. Benefits: search engines (Google Event Schema, article publication dates), RSS readers (correct date parsing), browser time zone conversion, and accessibility tools can reformat the time. The content between tags is the human-readable version; datetime is the machine-readable ISO 8601 value.