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
TechSpark 