Definition
The practice of choosing HTML elements based on the meaning and structure of content rather than its desired visual appearance—separating document semantics from CSS presentation.
Why It Matters
Semantic HTML is the ‘foundation of accessibility’ on the web; it ensures that content is understandable not just to sighted users, but to screen readers and search engines, creating a more inclusive and discoverable internet.
Core Concepts
- Purpose of HTML: Add meaning and structure; CSS handles look and feel.
- Semantic Elements:
<h1>–<h6>,<p>,<em>,<strong>,<article>,<nav>,<main>. - Block Elements: Start new lines, take full width (
<h1>,<p>,<div>). - Inline Elements: Flow within text (
<em>,<span>,<a>). - Empty Elements: No closing tag needed (
<img>,<br>,<hr>). - Attributes: Extra information in the start tag (
src,alt,href,id,class).
<!-- Semantic structure vs. non-semantic div soup -->
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Semantic HTML</h1>
<p>This is meaningful content.</p>
</article>
</main>