Say what it is

<div> is a box with no meaning at all. You can build a whole page out of divs, and it may even look fine. But to a screen reader or a search engine, it's one big pile of unlabelled boxes.

Semantic elements say what their content is: this is the navigation, this is the main content, this is a footer. Browsers show most of them just like a div, so the difference isn't in the looks. It's in the meaning.

<!-- says nothing -->
<div class="top">Brunn's Forge</div>

<!-- says what it is -->
<header>Brunn's Forge</header>

• Screen readers let people jump straight to meaningful parts of the page.
• Search engines understand your page better.
• Your own code becomes easier to read: </nav> beats the fifth </div> in a row.