[HTML5] Semantic <div> Tags and Why You Need to Use It - Explained with Examples.

Introduction

In HTML, <div> tag does not have any meanings. It is just used to divide the sections and create a layout of your web page.

For example, you might want to use div for the header, navigation bar, side page, main page and footer because those need to be divided.\

Why You Should Use Semantic Elements

If you use semantic div, your web page is more SEO(Search Engine Optimization) friendly. Also, your codes are more organized and readable. Imagine thousands of lines of code, and you want to find the HTML code for the main page. It would be much easier if all the <div> tags are replaced with semantic <div> tags.

Semantic Elements

Semantic tags, which is the main topic of this article, have the same functionality as div. There is nothing different, but the name is different.

Semantic divs:

1. <header>

   • can be used for the header section of your web page, such as your website's name.

2. <nav>

   • can be used for the navigation bar of your website.

3. <aside>

   • can be used for the sidebar of your website, which usually contains your info or contents that are not the main of your web page.

4. <main>

   • can be used for the section where the main contents are contained.

5. <article>

   • can be used for forum posts, blog posts, user comments, product cards and newspaper articles.

6. <section>

   • Can be used for contact info, introduction, and chapters.

7. <footer>

   • can be used for the footer section (bottom) of your web page. For example, companies leave their information, such as contact info, location and CEO at the bottom of their web page.