HTML5 Semantic tags

HTML5 Semantic tags

In an old days, Web Designer uses the <div>  tag to create the layout of websites, but there was some problem, the problem is that when web designer try to understand their design after a long time they could not understand, because all the section was created by using the <div> tag.

So the solution is to make the design easy to understand  HTML5 introduces Semantic tags. Semantic tags are tags that have a meaningful name that is easy to understand for web designers and for search engine crawlers also, it is very helpful for web designers to make understand web layouts after a long time which is created by HTML5 semantic tags.

HTML5 Semantic tags are following:

  1. <header>
  2. <footer>
  3. <section>
  4. <nav>
  5. <figure>
  6. <figcaption>
  7. <aside>
  8. <article>
  9. <main>
 


1. <header>: Header tag is used to contain header section of the website or top section of website layout which contains a menu.

Example:

<header>
<div class="logo"></div>
<div class="menu"></div>
</header>
 


2. <footer>: Footer tag is used to contain footer-related code of the website or lower section of website layout which contains copyright-related content or social icons etc.

Example:

<footer>
<div class="copyright"></div>
<div class="policies"></div>
</footer>
 


3. <section>: As its name suggests, it is mostly used in the middle section of the website to create a section, after the header tag and before the footer tag. You can also use section in the header and footer tag also if the header and footer have partitions.

Example:

<section>
<div class="aboutus"></div>
<div class="aboutimg"></div>
</section>
 


4. <nav>:  nav tag is used to contain the code related to the menu.

Example:

<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Course</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
 


5. <figure>: The figure tag is used to contain the image.

Example:

<figure>
<img src="images/logo.png">
</figure>
 


6. <figcaption>: figcaption is used to give the heading or title of an image, it contains content related to the image.

Example:

<figure>
<img src="images/logo.png">
<figcaption>
Web Development Institute
<figcaption>
</figure>
 


7. <aside>:  As its name suggests, aside means a box that is at the right or left corner, it is used to create a sidebar on the website.

Example:

<aside>
<div class="relatedblogs"></div>
</aside>
 


8. <article>: article tag is used in blogs areas of the website to contain blog content.

Example:

<article>
<h3>Blog heading</h3>
<p>blog content</p>
</article>
 


9. <main>: it defines the main content of the document.

Example:

<main>
<h1>About Web Development Institute</h1>
<p>about content of web development institute</p>
</main>