HTML Story Semantic Elements

7.0 Semantic Markup

A semantic HTML element communicates the meaning and role of its content, not just how it looks. Using semantic elements instead of generic <div> containers improves accessibility (screen readers understand the page structure), search engine ranking, and maintainability.

7.1 Page-Level Sections

A typical well-structured HTML page uses these landmark elements:

<body>
  <header>
    <nav aria-label="Main">…</nav>
  </header>
  <main>
    <article>
      <h1>Article Title</h1>
      <p>…</p>
    </article>
    <aside>Related links</aside>
  </main>
  <footer>&copy; 2026 James Fawcett</footer>
</body>

Landmark elements

Element	Role
`<header>`	Introductory content or navigation for its nearest sectioning ancestor. Can appear in `<article>` or `<section>` as well as `<body>`.
`<nav>`	Major navigation links. Use `aria-label` when there are multiple navs on a page.
`<main>`	The dominant content of the page. Must be unique; only one per page.
`<article>`	Self-contained composition that could stand alone (blog post, news story, forum thread).
`<section>`	A thematic grouping of content, typically with a heading. Use when content doesn't fit a more specific element.
`<aside>`	Content tangentially related to its surrounding context: sidebars, pull quotes, ads.
`<footer>`	Footer for its nearest sectioning ancestor: copyright, author info, related links.

7.2 Headings and Document Outline

Headings (<h1>–<h6>) create an implicit outline that screen reader users navigate with keyboard shortcuts. The heading hierarchy should reflect content structure, not visual preferences.

One <h1> per page (the page title).
Each nested section starts one level deeper than its parent.
Never choose a heading level for its default font size — use CSS for that.

7.3 Interactive Content Elements

HTML5 added several interactive elements that work without JavaScript:

<!-- Toggleable disclosure widget -->
<details>
  <summary>Show more</summary>
  <p>Hidden content revealed when opened.</p>
</details>

<!-- Inline progress indicator -->
<progress value="70" max="100">70%</progress>

<!-- Scalar gauge -->
<meter value="6" min="0" max="10" low="3" high="8" optimum="9">6 out of 10</meter>

<!-- Modal dialog -->
<dialog id="confirm">
  <p>Are you sure?</p>
  <button onclick="document.getElementById('confirm').close()">OK</button>
</dialog>

7.4 Text-Level Semantics

These inline elements add meaning to words and phrases within a paragraph:

Semantic inline elements

Element	Meaning
`<strong>`	Strong importance. Screen readers may stress the word.
`<em>`	Emphatic stress that changes sentence meaning.
`<b>`	Stylistically different text without added importance (keywords, product names). Use when `strong` is too heavy.
`<i>`	Alternate voice or mood (technical terms, foreign phrases, thoughts). Use when `em` is too heavy.
`<small>`	Side comments: fine print, copyright, legal disclaimers.
`<del>`	Text that has been removed from the document (strikethrough).
`<ins>`	Text that has been added to the document (often underlined).
`<mark>`	Text marked or highlighted for reference in the current context (search results).
`<cite>`	The title of a cited creative work.
`<dfn>`	The defining instance of a term.
`<abbr>`	Abbreviation with optional expansion via `title`.
`<time>`	Machine-readable date or time via `datetime` attribute.

7.5 div vs. Semantic Elements

The rule is simple: prefer the most specific semantic element that fits, then fall back to <div> for purely stylistic wrappers with no semantic meaning.

Site-wide header? → <header>
Navigation menu? → <nav>
Page's primary content? → <main>
Independent piece (blog post, comment)? → <article>
Thematic group with heading? → <section>
Tangential content (sidebar)? → <aside>
Footer/copyright? → <footer>
Pure layout wrapper? → <div>

7.6 References

Semantic Elements References

Resource	Description
MDN: Semantics in HTML	Why semantic HTML matters with examples.
web.dev: Semantic HTML	Practical guidance on choosing the right element.
MDN: Content sectioning elements	Full list of sectioning elements with descriptions and usage notes.
ARIA Authoring Practices	Patterns for accessible HTML widgets when native elements fall short.