Semantic HTML - What is it and why should you use it?

HTML has a lot of different elements, but if you're anything like me you'll generally have stuck to a few key ones when developing. <div> for whenever there's a code block you need to wrap. <p>for whenever there's regular non-heading text. And maybe a few <button> and <a> elements as and when needed.

Let's take a look at why this is bad practice, and why you should care about using the right HTML element for the job.

Our clue is in the name - Semantic HTML. By using the semantic elements, our code instantly becomes a lot more readable. And not just for developers - accessibility tools like screen readers also value it a lot. For example:

<header>
    My Company
</header>
<main>
    Some Content
</main>
<footer>
    Copyright etc
</footer>

is a lot clearer to both tool and developer on what each section contains than:

<div>
    My Company
</div>
<div>
    Some Content
</div>
<div>
    Copyright etc
</div>

Accessibility tools aren't the only tool that cares about this clarity, with semantic HTML also boosting SEO performance.