HTML5 Semantic Elements: Browser Support, Tags, Polyfill

What is HTML5 semantic?

HTML5 semantic elements are HTML tags whose names describe the role of the content they wrap. The WHATWG defines them in the HTML Living Standard. The set added in HTML5 includes header, nav, main, section, article, aside, footer, figure, figcaption, details, summary, mark, and time.

Which browsers does HTML5 semantic support?

Every modern browser supports HTML5 semantic elements by default. Internet Explorer 9 to 11 parse the tags but apply no default styling, and IE 5.5 to 8 ignored unknown elements entirely.

What are the HTML5 semantic elements?

HTML5 added a fixed set of semantic tags to the HTML Living Standard. Each tag names the role of the content it wraps, so browsers, screen readers, and search engines can map page structure without guessing.

• header: Introductory content for the page or for a section. Holds the site logo, page title, and primary navigation.
• nav: A block of major navigation links, like the site menu or a table of contents.
• main: The dominant content of the document. Only one main per page is allowed.
• article: A self-contained piece of content that makes sense on its own, such as a blog post, news story, or forum reply.
• section: A thematic grouping of content inside a larger document, like a chapter or a tabbed pane.
• aside: Content that is tangentially related to its surroundings, such as a sidebar, callout, or pull quote.
• footer: Footer content for the page or for the nearest section, including copyright, related links, and author info.
• figure and figcaption: A self-contained illustration with a caption, used for images, diagrams, code listings, and charts.
• details and summary: A native disclosure widget. summary is the visible label, details is the collapsible content.
• mark: Highlighted text whose relevance is contextual, like a search-result match.
• time: A machine-readable date or time, with a datetime attribute that crawlers and assistive tech can parse.

What are the benefits of HTML5 semantic elements?

HTML5 semantic tags pay off in three places at once: accessibility, SEO, and code maintainability. Each one shows up directly in production work.

• Accessibility for screen readers: Tags like nav, main, header, and footer expose ARIA landmark roles automatically, so a NVDA, JAWS, or VoiceOver user can jump straight to the page's main content or navigation without tabbing through every link.
• Clearer SEO signals: Google's HTML guidance says crawlers use semantic tags to understand page structure. An article inside main beats a generic div wall when the crawler is deciding what the page is actually about.
• Smaller, cleaner CSS: Targeting nav or article directly removes the need for class names like .site-nav or .blog-post. The selectors stay short and the markup stays self-documenting.
• Better reader-mode and AI extraction: Safari Reader, Firefox Reader View, and LLM answer-extractors lift content cleanly from article and main blocks, and skip aside and footer noise.
• Easier maintenance: A new developer reading nav, main, footer, and aside understands page intent immediately. The same layout written in nested div tags forces them to read class names to recover the same picture.

How do you make HTML5 semantic elements work in older browsers?

Two old-browser problems show up in production: tags that parse but render inline, and tags that the engine refuses to parse at all. Each one has a fixed remedy.

• Add a CSS block-level reset: In a global stylesheet, add article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; }. This restores layout on Internet Explorer 9 to 11, Firefox 3 to 20, Safari 3.1 to 6, Opera 9 to 12.1, and Android Browser 2.1 to 4.3.
• Load html5shiv for IE 5.5 to 8: Drop the script in the page head behind an Internet Explorer conditional comment so modern browsers skip it: <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->. The script calls document.createElement for every HTML5 tag so old Trident parses and styles them.
• Confirm the fix in DevTools: Open the page in the target browser, inspect a header or nav element, and check that its computed display is block and that its child text nodes render. If they do not, the CSS reset is loaded after another stylesheet that overrides it; raise its specificity or move it later in the cascade.

Most teams now drop support for IE entirely and ship only the CSS reset, since browser-tracker data shows IE share at well under 0.5% of global traffic.

What are the known issues with HTML5 semantic elements?

The tags themselves ship in every modern browser, but the way each browser exposes them to assistive tech, layout engines, and outline algorithms still differs. Here is what to watch for and how to handle each one.

• Safari and VoiceOver landmark gaps: Older Safari builds did not expose section as an ARIA landmark unless the section had an aria-label or aria-labelledby attribute. How to handle it: In my experience the safest pattern is to label every section that should act as a landmark, and to reach for nav, main, or aside when you actually want a landmark. A bare section is a grouping, not a landmark.
• The HTML5 outline algorithm was never implemented: The original HTML5 spec said browsers would derive document structure from nested article and section tags, so an h1 inside a section would behave like an h2. No browser ever shipped this. How to handle it: Keep using h1 to h6 in the right order. Do not rely on nesting depth to demote heading levels.
• main has parent restrictions: The HTML Living Standard forbids main inside article, aside, footer, header, or nav, and only one main per document is allowed. Validators flag the violation; some screen readers ignore the second main. How to handle it: Run the W3C HTML validator in CI and fail the build on duplicate main tags.
• figure caption order quirks in Firefox: Older Firefox builds would announce figcaption out of order if it sat below the figure's content. How to handle it: Put figcaption as the first child of figure when the caption is the heading, and as the last child when it is a credit line. Test with a screen reader in both Firefox and Safari.
• details and summary on iOS Safari: details is supported from Safari 6 on macOS and iOS 6 on iPhone, but custom styling of the open-state triangle still differs across engines, and VoiceOver focus moves differently when the content opens. How to handle it: Test the open-and-focus flow on a real iPhone, and use details[open] > summary::before rather than the WebKit-only marker pseudo-element.
• nav is not the same as a menu: Wrapping every link list in nav breaks landmark navigation, because every list becomes a top-level landmark. How to handle it: Use nav only for major navigation: site menu, primary footer links, breadcrumb. Plain link lists belong in ul.

Citations

All HTML5 semantic version numbers and platform notes in this guide come from these primary sources:

• WHATWG - HTML Living Standard, Sections: html.spec.whatwg.org/multipage/sections.html
• WHATWG - HTML Living Standard, Grouping content: html.spec.whatwg.org/multipage/grouping-content.html
• W3C - HTML 5.2 Recommendation: w3.org/TR/html52
• MDN Web Docs - Semantics glossary: developer.mozilla.org/en-US/docs/Glossary/Semantics
• MDN Web Docs - HTML element reference: developer.mozilla.org/en-US/docs/Web/HTML/Element
• MDN Web Docs - main element: developer.mozilla.org/en-US/docs/Web/HTML/Element/main
• MDN Web Docs - article element: developer.mozilla.org/en-US/docs/Web/HTML/Element/article
• web.dev - Semantic HTML, Learn HTML: web.dev/learn/html/semantic-html
• WebKit - HTML5 in Safari: webkit.org/blog/68
• Mozilla Hacks - Firefox HTML5 parser: hacks.mozilla.org/2010/05/firefox-4-the-html5-parser
• Microsoft Learn - Internet Explorer end of support: learn.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support
• html5shiv - GitHub repository: github.com/aFarkas/html5shiv
• Wikipedia - HTML5: en.wikipedia.org/wiki/HTML5
• Wikipedia - Semantic HTML: en.wikipedia.org/wiki/Semantic_HTML