Semantic HTML
Build meaningful page structures using semantic layout elements.
Why Semantic HTML Matters
Semantic HTML uses elements whose names communicate their purpose. Examples include <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. Semantic markup improves accessibility, search-engine understanding, maintainability, and document structure.
Semantic Page
<header>\n <h1>Tech Blog</h1>\n</header>\n<nav>\n <a href="/">Home</a>\n</nav>\n<main>\n <article>\n <h2>Understanding HTML</h2>\n <p>HTML provides document structure.</p>\n </article>\n</main>\n<footer>Copyright 2026</footer>💡 The elements communicate the purpose of different regions instead of relying entirely on generic div containers.
Key Takeaways
- Semantic HTML describes the purpose of content.
- Semantic elements reduce unnecessary div usage.
Knowledge Check
Which element should normally contain the primary content of a page?
Article, Section, and Aside
<article> represents a self-contained piece of content that could stand independently. <section> represents a thematic grouping of content, usually with a heading. <aside> contains content tangentially related to the surrounding content.
Content Grouping
<article>\n <h2>HTML Accessibility</h2>\n <section>\n <h3>Keyboard Access</h3>\n <p>Interactive controls should be keyboard accessible.</p>\n </section>\n <aside>Related accessibility resources</aside>\n</article>💡 The article is self-contained, section groups a topic, and aside provides related but secondary information.
Key Takeaways
- Use article for independently distributable content.
- Use section for thematic grouping and aside for tangential content.
Knowledge Check
Which element is best for a self-contained blog post?