SemanticHtmlElementTaxonomy [fact] v1.0.0

HTML5 provides 12+ semantic sectioning and landmark elements each with a built-in ARIA role — use them instead of generic divs so screen readers, search engines, and browser tools can interpret page structure without CSS.

HTML5 semantic elements by category:

LANDMARK / SECTIONING (map directly to ARIA landmark roles):
<main>      — primary page content; one per page; maps to role="main"
<nav>       — navigation landmark; use for major nav blocks; maps to role="navigation"
<header>    — introductory content; maps to role="banner" when top-level
<footer>    — footer for nearest sectioning ancestor; maps to role="contentinfo" when top-level
<aside>     — tangentially related content; maps to role="complementary"
<section>   — thematic grouping with a heading; maps to role="region" when labeled
<article>   — self-contained, redistributable content (blog post, product card)
<search>    — search landmark (HTML5.3+); maps to role="search"

CONTENT STRUCTURE:
<h1>–<h6>  — heading hierarchy; one <h1> per page
<ul>/<ol>/<li> — lists; screen readers announce item count
<figure>/<figcaption> — illustrations and their captions
<details>/<summary> — native expandable disclosure

INLINE SEMANTIC:
<time datetime="..."> — machine-readable dates/times
<address>   — contact information for nearest article/body ancestor
<mark>      — highlighted/relevant text
<abbr title="..."> — abbreviation expansion
<code>/<pre>/<kbd> — code, preformatted text, keyboard input

INTERACTIVE (do not replace with div + onclick):
<button>    — triggers actions (not navigation)
<a href>    — navigation and links
<input>/<select>/<textarea> — form controls
<dialog>    — modal/non-modal dialog with built-in focus trap

SemanticHtmlElementTaxonomy [fact] v1.0.0

HTML5 provides 12+ semantic sectioning and landmark elements each with a built-in ARIA role — use them instead of generic divs so screen readers, search engines, and browser tools can interpret page structure without CSS.

HTML5 semantic elements by category:

LANDMARK / SECTIONING (map directly to ARIA landmark roles):
<main>      — primary page content; one per page; maps to role="main"
<nav>       — navigation landmark; use for major nav blocks; maps to role="navigation"
<header>    — introductory content; maps to role="banner" when top-level
<footer>    — footer for nearest sectioning ancestor; maps to role="contentinfo" when top-level
<aside>     — tangentially related content; maps to role="complementary"
<section>   — thematic grouping with a heading; maps to role="region" when labeled
<article>   — self-contained, redistributable content (blog post, product card)
<search>    — search landmark (HTML5.3+); maps to role="search"

CONTENT STRUCTURE:
<h1>–<h6>  — heading hierarchy; one <h1> per page
<ul>/<ol>/<li> — lists; screen readers announce item count
<figure>/<figcaption> — illustrations and their captions
<details>/<summary> — native expandable disclosure

INLINE SEMANTIC:
<time datetime="..."> — machine-readable dates/times
<address>   — contact information for nearest article/body ancestor
<mark>      — highlighted/relevant text
<abbr title="..."> — abbreviation expansion
<code>/<pre>/<kbd> — code, preformatted text, keyboard input

INTERACTIVE (do not replace with div + onclick):
<button>    — triggers actions (not navigation)
<a href>    — navigation and links
<input>/<select>/<textarea> — form controls
<dialog>    — modal/non-modal dialog with built-in focus trap

Sources

Source

• github.com/ehmo/platform-design-skills, skills/web/SKILL.md §1.1 (MIT)
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element
• https://www.w3.org/TR/html-aria/