What is semantic HTML and why does it matter?

There are two ways you can write an HTML file:

<div>
  <h1>This is a header</h1>
</div>

<div>
  <p>This is a nav bar</p>
  <ul>
    <li>first thing</li>
    <li>second thing</li>
  </ul>
</div>

<div>
  <p>this is the content</p>
</div>

<div>
  <p>this is a footer</p>
<div>

Or you can do this instead:

<header>
  <h1>This is a header</h1>
</header>

<nav>
  <p>This is a nav bar</p>
  <ul>
    <li>first thing</li>
    <li>second thing</li>
  </ul>
</nav>

<main>
  <p>this is the content</p>
</main>

<footer>
  <p>this is a footer</p>
<footer>

Both files do the exact same thing, however if you have a long html file, writing it in the way we write the first one can quickly get messy. Whereas in the second way, it provides a bit more structure to your html.

So second file is called a semantic HTML. The advantages are:

• It improves readability of your code, someone else can look at it and quickly figure out what you are doing. If you write a website in the first way, in 15 minutes you are going to forget what you did and hate yourself for that.
• It makes CSS this much easier. You don't have to rely on loads of ids.
• It improves your SEOs, not all divs are created equal and by writing your HTML in a semantic way it tells Google (or ... Bing) how they should rank your website. Which part is more important etc.
• It helps the accessibility of your website. Not all of us use internet the same way. This way of writing your HTML file helps in situations such as if your audience is viewing your website using a speech reader.

There you go, hope you find this useful!

Happy coding :)