When starting out with frontend development, HTML is the first thing you are advised to learn. It is not uncommon to write A LOT of div tags on your web page. This, in turn, makes your webpage look very generic, and hard to differentiate the sections of your page. Most times your code ends up looking like this below.

      <div>
        <div>
          <h1>Hello World</h1>
        </div>
      </div>

Writing your code like this is not bad but it gets really confusing for both you and others reading your code.

Luckily HTML5 brought a lot of really cool features especially semantics

Semantic HTML refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.

Miroslav Gajic

What that means is, you no longer have to write codes like,

<div class="main">
      <div class="header">
        <div class="nav"></div>
      </div>
      <div class="footer"></div>
    </div>

Semantic tags help a lot with search engine optimization.

Let's dive right in and have a look at the Semantic tags

1. The Header tag:

The header tag is used to specify the header section of a webpage, this section mostly includes the logo of the page, navigation menu, and search section. An example of how to use the header tag is seen below.

<header>
     <img src="./images/logo" alt="logo">
     <nav>
       <ul>
         <li>Home</li>
         <li>About</li>
         <li>Contact</li>
       </ul>
     </nav>
   </header>

If you look closely at the code above you'd see a tag called nav, this brings us to our next tag.

2. The Nav tag:

The nav tag just like you probably would have guessed is to specify the navigation section of your webpage. The navigation section helps the user move around your page successfully. The nav section is the easiest way to access other pages and sections of a site. They are commonly found at the top right corner of a web page. A good example of the use of the nav section as seen below.

<nav>
      <ul class="navBar">
        <li>Home</li>
        <li>About</li>
        <li>Product</li>
        <li>Contact</li>
      </ul>
    </nav>

3. The Section tag:

As the name implies, the section tag specifies a section of a document. Because a webpage is normally divided into different sections like Introduction, contacts, etc. Each section can be created using the section tag. Below is an example of how the section tag is used

<section class="intro">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
      Harum voluptate nisi porro aspernatur dolor distinctio.
    </section>
    <section class="chapter">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Optio eveniet provident molestiae culpa iusto animi debitis
         eaque cum aperiam, 
    </section>

4. The Article tag:

The article tag is used to specify independent, self-contained content such as articles, blog posts, comments, products card, etc. The content in the article tag has its own meaning and is usually separated from the rest of the webpage. A good example of the use of the article section is seen below.

<article>
      <h2>Comment</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
             Fuga maxime ipsa molestias aperiam nam id placeat facere vitae 
             aut odit sequi exercitationem, iure minus, iusto reprehenderit site,
            similique architecto libero.</p>
    </article>

5. The Main tag:

The main tag is usually used to define the main content of a webpage. The main tag must be unique and not duplicated in blocks. The main tag should not be found within sections like header, footer, nave, menu, etc.

<main>
      <h1>Lorem ipsum </h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing</p>
      <article>
        <h2>Lorem</h2>
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. 
             Fuga maxime ipsa molestias aperiam nam id placeat facere vitae </p>
      </article>
    </main>

6. The Aside tag:

The aside tag defines a section with additional information related to the content close to the aside section. It is mostly used to give more information to an article or highlight the parts that can be interesting to the user. An example of how the aside tag is used can be found below

<p>I like watching Friends.</p>
    <aside>
      <h4>Friends: A sitcom</h4>
      <p>Follow the lives of six reckless adults living in Manhattan, 
              they indulge in adventures which make their lives both 
              troublesome and happening.</p>
    </aside>

7. The Footer tag:

The footer tag is used to specify the footer section of the website. The footer is usually the last one on the webpage. Most times the footer contains links to other web pages in the website, copyright, social media icons, etc. A good example of the use of a footer tag is found below.

 <footer>
      <p>Company © Ndukwe Ihuoma. All rights reserved.</p>
    </footer>

Thank you for reading my article, hope it was of great help to you!!