HTML - Semantic Elements

Semantic HTML is the practice of using elements that describe their meaning to both humans and machines. Instead of using generic containers such as

for everything, semantic elements reveal the purpose, structure, and relationships between parts of a page.

Why Semantic HTML Matters

Semantic elements provide signals:

• To screen readers and assistive technologies
• To search engines and automated tools
• To developers maintaining the code later
• To browsers when constructing the accessibility tree and document outline
• To future readers performing scraping, indexing, or structured analysis

Common Semantic Elements

Structural Elements

• <header>
• <nav>
• <main>
• <section>
• <article>
• <aside>
• <footer>

Text-Level Semantics

*

Headings Create the Page Structure

Headings (

–

) define hierarchy, not appearance.

Semantic HTML and Accessibility

Semantic elements help assistive technologies build a coherent model of the page.

Semantic HTML and Machine-Readability

Semantic markup enables structured data, scraping, indexing, and search features.

Semantic HTML and Legacy Compatibility

Semantic HTML enhances compatibility and supports progressive enhancement.

Best Practices

* Choose elements based on meaning * Avoid ARIA where native semantics suffice * Maintain clean heading structure * Provide alt text for non-text content

Related Topics

* Accessibility, ARIA & Semantic HTML * Machine‑Readable HTML * Progressive Enhancement & Graceful Degradation * Responsive Web Design – HTML is Already Responsive

References

* https://web.dev/learn/html/headings-and-sections