Adding a Semantic element is not about changing the look (visual) of it but It is about adding meaning to it, Visually It wouldn't matter if you use a Semantic HTML element like header, footer, etc or a generic HTML element like div, span, etc.

So, now one might be wondering that why do we even need Semantic HTML elements?

Semantic HTML elements make the code more readable, Let's see how

The below HTML code is written using generic HTML elements by assigning classes to them.

    <div class="header">
      <h1>Non Semantic blog</h1>
      <div class="navbar">
        <a href="#">Blogs</a>
        <a href="#">Contact us</a>
      </div>
    </div>

And this is HTML code written using Semantic elements

    <header>
      <h1>Semantic blog</h1>
      <nav>
        <a href="#">Blogs</a>
        <a href="#">Contact us</a>
      </nav>
    </header>

It becomes difficult to maintain the class names over a period of time. So, we can use more universal tags for it.Code readability is not the only benefits,

It also helps in the Search Engine Optimization (SEO) which gives more context to the Webpage.

It also provides greater accessibility to the webpage.

Now let's look at some of the Semantic elements,

1. header: It is usually at the top of the page and it contains the main heading and navigation bar.

     <header>
      <h1>Semantic blog</h1>
      <nav>
        <a href="#">Blogs</a>
        <a href="#">Contact us</a>
      </nav>
    </header>

2. nav: It is used storing navigation links.

      <nav>
        <a href="#">Blogs</a>
        <a href="#">Contact us</a>
      </nav>

3. article: It is used as a container for the content that is reusable.

    <article>
      <h1>The Importance of Semantic HTML</h1>
      <img src="" alt=""/>
      <p></p>
    </article>

4. figure: it contains the image content.

     <figure>
        <img src="" alt=""/>
     </figure>

5. figcaption: It is used as the caption to the image.

      <figure>
        <img src="" alt=""/>
        <figcaption>
           <p>Posted by <strong>Harsh Singh</strong> on Monday, September 20th 2021</p>
        </figcaption>
     </figure>

6. aside: This is indirectly related to the content, Eg: Related Articles.

     <aside>
      <ul>
        <li>
          <a href="#">The Prime Guide for next gen Developer</a>
          <p>By Ankur Tyagi</p>
        </li>
        <li>
          <a href="#">Zero to Hero: backend developer roadmap 2021</a>
          <p>By Vittorio Rivabella</p>
        </li>
      </ul>
    </aside>

7. footer: It is at the bottom of the page and it usually contains author details, legal information, links, etc

     <footer>
      <p>Copyright &copy; 2021 by Harsh Singh.</p>
    </footer>

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler

Thank you so much guys for reading this blog.