Headings and sections

Heading elements <h1>–<h6> define an outline of your document. They are not chosen for font size—that is CSS—they communicate structure to humans, search engines, and assistive technologies.

Recommended outline habits

• Use exactly one h1 for the primary topic of the page in typical articles.
• Descend levels logically: h2 for major sections, h3 for subsections—avoid jumping from h2 to h4 unless the outline truly skips a level.
• Do not pick heading levels for visual size; style headings with CSS.

Screen reader and keyboard navigation

Many assistive tech users browse by headings list. Predictable ordering speeds orientation; chaotic ordering feels like a broken table of contents.

Example outline

<h1>Shipping policy</h1>
<h2>Domestic orders</h2>
<p>…</p>
<h3>Expedited handling</h3>
<p>…</p>
<h2>International orders</h2>
<p>…</p>

Rendered output (sizes via CSS—you would style real h1–h3 the same way)

In your own pages, use actual <h1>…<h3> elements (this box uses styled divs so the lesson page keeps a single logical outline).

Sectioning elements vs headings alone

Wrap thematic groups in section or article when it clarifies boundaries; headings still announce structure inside those containers.

Anti-patterns

• Multiple h1 elements per page without a strong editorial reason.
• Using heading tags solely to bold lines of UI chrome.
• Skipping heading levels purely for spacing—adjust margins with CSS instead.

Patterns that confuse assistive tech (even if visuals look fine)

• Headings used only inside cards without a sectional outline—listeners lose “where am I?” context.
• Landmarks duplicated without labels—navigation regions should have aria-label or headings when you have multiple navs.
• Single-page apps reusing heading levels incorrectly after route changes—treat transitions like new documents mentally.

SEO without cargo-cult rules

Algorithms shift, but coherent outlines, descriptive titles in <title>, unique link text, and fast-loading semantic pages remain durable investments—none of those are satisfied by cramming unrelated keywords.

Important interview questions and answers

1. Q: What is the purpose of ``?
   A: It forces standards mode so browsers use modern layout/parsing behavior instead of legacy quirks mode.
2. Q: Why is semantic HTML important in interviews and production?
   A: It improves accessibility, SEO, maintainability, and reduces ARIA/JS work by using native element behavior.
3. Q: What is the difference between `head` and `body`?
   A: `head` stores metadata/resources for the document, while `body` contains user-visible content.

Pitfall: Skipping levels (h1 → h4) confuses screen-reader outlines.