HTML5 has introduced various semantic tags that help the developers to write clean and organized code. They have immense importance in Search Engine Optimization too. The right use of semantics can contribute to giving you the benefits of helping a crawler crawl your page successfully.
What are Semantic Elements?
The more readable your code is to a crawler, the more readable it becomes to a human.-Self
Semantic elements hit right there. Semantic Elements are a group of such tags that clearly defines the layout of your web page. They are the tags that have their meaning visible through their name. Thus they provide more readability to your code. The main advantage of using a semantic tag is you get to structure your code clearly and make it more human-readable.
There are nearly 100 semantic tags as quoted by MDN docs. Each one has its own importance and meaning that they give to your webpage. But surely using all of them is not possible, but we’ll discuss some of the most common ones here.
List of some commonly used Semantic Tags in HTML5
The following list is in no particular order and is also not limited to the only ones listed here.
Other than these, <mark>, <time>, <progress>, etc. are some other tags as well.
<article> I am used to define an article on your website. I exist on my own, thus I am an independent piece of content. </article>
<header> I am the top most part of your website. I have all the navigation menu enclosed within me. Even the logo of your site should ideally come insider my tags. </header>
<footer> I am the last tag that is found on your website. I am placed at the foot/bottom section of your layout. I contain all the links related to your menu, your copyright information, sitemap, your social media handles etc. </footer>
<aside> I am the tag you can use when you want to put some content on the side of your webpage, typically a sidebar. </aside>
<nav> I am the tag that is responsible for storing your navigation menu or the navbar of your site. I come under header as a good practise. </nav>
<main> You can use me to display all the content that you want to display to your audience by placing it inside me. </main>
<details> I am the tag that stores and hide your information until someone clicks on me. As soon as a click is made on my title, I am displayed. By default my title also appears as "Details" </details>
<summary> I am responsible for changing the title of "details" tag. You can customise me as per your liking. </summary>
<section> My work is to define a section on your website. <!--<article> tag can be used inside <section> tag or vice versa.--> </section>
<figure> and <figcaption>
<figure> <img src="#" alt="We are enclosed within <figure> tag"> <figcaption> I am here to give caption to your image</figcaption> </figure>
What are Non-Semantic Elements?
Just the opposite of semantic tags, we have non-semantic tags. The tags that don’t show their function from their name are non-semantic tags. They literally show nothing through their name alone. They require some “class or id” to make them understandable. <div> and <span> tags are some examples.
Look at the following example of code:
<div> <p> Hello There! We are learning about non-semantic tags here. </p> <div> <div> <p> Non-Semantic tags show nothing through their meaning </p> <div> <div> <p> Example is div and span tag </p> <div> <!-- We can have a lot of <div> tags on our webpage. So How can we identify a particular div?-->
<div class="intro"> <p> Hello There! We are learning about non-semantic tags here. </p> <div> <!-- We use class and ids to denote a particular non-semantic tag. Here this div is identifiable when a class is being given to it. -->
<div> and <span> tags don’t speak for themselves. They just act as a container to store information. If you want to give identity to them, then the use of CSS classes and ids is a must.
So I hope this article clears the simple difference between both of these tags. It is highly advisable to use the semantic tags in a very organized manner so that they can reap proper benefits for your SEO also. Let me know if you have any other problem areas in HTML, I’ll cover that also.
I have made a video on Techbit’s YouTube channel on the same topic. Please go through it to make your level of understanding even better. I have included some examples of live websites too. And if you still have any doubt, please leave a comment.
Check out some of the latest articles here: