Semantics

Meaning over presentation.

Semantic HTML means using tags that convey the *meaning* of the content, rather than just its appearance. For example, using `<article>` for a blog post instead of `<div>`. This improves accessibility (screen readers) and SEO (search engines).

Live Example & Code

Preview Output

<!-- Bad (Non-semantic) -->
<div class="header">Title</div>
<div class="nav">Menu</div>

<!-- Good (Semantic) -->
<header><h1>Title</h1></header>
<nav>Menu</nav>

Open in Playground