html semantic accessibility seo

Semantic HTML Basics

Semantic HTML means using the right element for the job. Not everything is a `<div>`.

Screen readers, search engines, and your future self will thank you. Plus, you get free keyboard navigation and ARIA roles.

html
<!-- Bad: div soup -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>

<!-- Good: semantic elements -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
100 Coding for Website Design Tips

This tip is from

100 Coding for Website Design Tips

99 more tips like this one.

Get the Book