HTML5 semantic tags are specific HTML tags that provide meaning to the content they contain, making it easier for search engines to identify and classify the content of a web page.
What is HTML Semantics?
Due to the semantic HTML tags, search engine bots and user devices can better understand the significance and context of online pages. Semantic components make web pages considerably easier to read. It is more easily accessible and also provides a better user experience.
Why Use Semantic Tags in HTML?
Semantic tags are essential because they help ensure your page's content is structured in a way that makes sense. If you don't use semantic tags, it can be difficult for people to understand the structure of your page, and they will not show interest in your content .
List of some Semantic Tags in HTML:
<main> — used to determine the page's main content. It allows the search bot to comprehend where the main content exists.
<header> — the page or section header typically includes website navigation. However, you can also use this element to indicate the location of a section's header in other website sections.
<article> — can be a magazine or newspaper article, forum post, blog post, user post, or a different independent content unit.
<nav> — represents website navigation.
<section> — usually used to group sections. For example, you can use it for news blocks, text chapters, contact information, tabs in a dialog box, etc.
<audio> — It helps to add, play, and control audio settings on a web page.
<video> — It helps to add, play, and control the settings of videos on a web page.
<canvas> — It helps create an area where JavaScript can draw further objects, display images, transform them, and change their properties. You can use canvas tags to make drawings, animations, games, etc.
<footer>— It describes the website footer or section, including the document's date, the author's name, contact information, or additional website navigation.
examples:
<head>
<title>Example</title>
</head>
<body>
<header>
Here goes the logo, navigation, etc.
</header>
<main>
A place for the website's main content
</main>
<footer>
Footer information, links, etc.
</footer>
</body>
</html>
Article and section tag
The article block can be used anywhere and is autonomous. However, because they are logically connected, the parts inside cannot be detached or repurposed in other parts of the website. And you will get the article's main points if you just pull the first section.
<article>
<section id=" part 1">
<!-- first part -->
</section>
<section id=" part 2">
<!-- second part -->
</section>
<section id=" part 3">
<!-- third part -->
</section>
</article>
The article blocks are independent, allowing for their separation and use elsewhere. If the preceding block is removed, the content inside them will remain unchanged because it is not dependent on it.
Footer tag
It is not limited to usage as a page's footer as it may appear at first. It can be inserted, for instance, the author's information, publication date, or a list of references that might be found at the end of an article.
Header tag
The same is true of this tag. It can be placed at the top of a page, before the body of text, or inside a section, where you might put the title or navigation. For example-
<header>
<h1>Navigate section</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</header>
Navigation tag
It is only utilized for the primary navigation, not all link groups. For instance, you do not need to wrap the website's footer menu with a nav. A brief collection of links (such as those to the home page, copyright, and terms and conditions) is typically included in the footer; this is not the primary navigation.
example:
<body>
<header>
<!-- Navigation -->
</header>
<main>
<!-- Main content-->
</main>
<footer>
<!-- Footer page-->
</footer>
</body>
Finally, using semantic tags can make your code more readable and maintainable. Semantic tags give your code meaning, which can be helpful when you or someone else is looking at your code in the future.
Conclusion
Using HTML5 semantic tags is a good way to increase the readability and understandability of your web page's code. Semantic tags are useful for search engine optimization (SEO) and accessibility. In this post, we have discussed most of the HTML5 semantic tags and shown you how to use them on your web pages.