Hello everyone Today we are going to discuss about semantic tags. Before that we understand why we are studying this topic.. In simple way if we talk about old html in which we are using div tag , p tag , h1 to h6 tag , span tag but it was not clear for a developer that which part is header which part is content and which is footer..
Semantic tags are basically self explanatory tags using which any developer can easily solve the above problems.. First tag is header tag which tell us the main heading of the content and reading the header tag can easily understood that it is at the topmost of the code..
<header>
This is a header
<nav>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
</nav>
</header>
Another tag is nav tag in which we use anchor tag . This is also called hyper reference this tag is used to interlink the webpages.. Next tag is main tag which include the main content of the code and anyone can easily understand it.. the main body content is written within this tag..
<main>
This is main content
</main>
Some other tags like aside tag , article tag , detail tag these all are used like div and span tag which we have already used so using these tag clearly indicate the subparts of the content..
<article>
This is a simple article
</article>
<aside>
<p>This is a first menu</p>
<p>This is a second menu</p>
</aside>
<details>
<summary>This is a summary</summary>
This is detail. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi, voluptate?
</details>
<footer>
This is a footer
</footer>
Footer tag include the last part of content and last part of code.. It is not necessary that footer tag is only used for including last part but it can also be used in the main content or in the header section.. but again as the name suggest its working so they are used as their name..
So this was all about semantic tags and I hope it will help you a lot.. Thank you.