It’s really about semantic HTML, sorry for the confusion. Confusion though is the keyword of this article. Imagine you walk into a clothing store, and sections are marked as head garments instead of hats, shirts are called upper-body garment, pants are called leg garments and socks are called feet garments, essentially everything is a garment. Very confusing indeed.

Now, if your HTML code looks something like below, you are creating a similar confusion for the browsers or any client trying to parse your html.

<div class="header"></div>
<div class="nav"></div>
<div class="section"></div>
<div class="main">
    <div class="post"></div>
    <div class="post"></div>
</div>
<div class="sidebar"></div>
<div class="footer"></div>

Instead it should look like…

<header></header>
<nav></nav>
<section></section>
<main>
  <article></article>
  <article></article>
</main>
<aside></aside>
<footer></footer>

Few reasons why you should do it…

• Search engines and screen readers have easier time reading it
• Just by making it easier to read the code, improves the maintainability of it

Check out many more here

Checkout the full list of html elements you can use here