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>: Header tag is used to contain header section of the website or top section of website layout which contains a menu.
<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.
<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.
<section> <div class="aboutus"></div> <div class="aboutimg"></div> </section>
4. <nav>: nav tag is used to contain the code related to the menu.
<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.
<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.
<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.
<aside> <div class="relatedblogs"></div> </aside>
8. <article>: article tag is used in blogs areas of the website to contain blog content.
<article> <h3>Blog heading</h3> <p>blog content</p> </article>
9. <main>: it defines the main content of the document.
<main> <h1>About Web Development Institute</h1> <p>about content of web development institute</p> </main>