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?