❮❮ PREV NEXT ❯❯

HTML - Semantic Tags

So far we have used <div> tags to group a block of texts. Well! The <div> tag is a non semantic tag that tells you nothing about the code block in HTML.

And thus HTML5 came up with Semantic Tags that makes your HTML code easy to read and understand.

What are Semantic Tags in HTML?

As said Semantic Tags in HTML provides with a set of tags that gives a meaning to every block of code you write. And most importantly the Semantic Tags are SEO friendly.

Sounds little tough?

Let's make it simple.

Let us take a scenario, where you are asked to write a news article in a web page. With your present knowledge you would be using <div> tag to represent the article.

But the Semantic Tags provides with an <article> tag using which you can represent a news article.

Also we know that every website contains a header and a footer. And the Semantic Tags in HTML provides a <header> and <footer> tag that represents the header and footer of a webpage.

Again there is a <section> tag using which you can group your contents into sections.

Coming to the next point, how are Semantic Tags SEO friendly?

Say, you have designed a website. And you want to inform it to Google(As Google is one of the popular search engine) that the <header> tag is used for the header, <footer> tag is for the footer and <article> tag is used to represent an article that you have written in your website.

Don't you think your website would rank better in google. Yes! It would. Because google would know which section is for what purpose and that in turn would rank your website higher.

Now, coming to the next important question.

Why do we need Semantic Tags in HTML?

Let us understand the need of Semantic Tags in HTML with the below piece of code.

Example :

<html>
<body>
	<header>
		<h1>My Header</h1>
	</header>
		
	<section>
		<h1>First Paragraph</h1>
    	<p>This is the first paragraph</p>
    </section>
    	
	<article>
		<h1>Second Paragraph</h1>
    	<p>This is the second paragraph</p>
    </article>
    
    <footer>
    	<p>My Footer</p>
    </footer>	
</body>
</html>

Output :

Actual Output

If you look at the above piece of code, you can see the code looks a lot cleaner. i.e. The header is placed within the <header> tag.

<header>
	<h1>My Header</h1>
</header>

And the footer is placed within the <footer> tag.

<footer>
	<p>My Footer</p>
</footer>

So, if a new developer comes and sees your code, he/she can understand it better.

Next, we have the <section> tag that defines a section of your webpage.

<section>
	<h1>First Paragraph</h1>
	<p>This is the first paragraph</p>
</section>

Then we have the <article> tag that usually defines a news article of a blog.

<article>
	<h1>Second Paragraph</h1>
	<p>This is the second paragraph</p>
</article>

Commonly used Semantic Tags in HTML

Semantic Tags	Usage
header	Specifies header for an HTML page
footer	Specifies footer for an HTML page
section	Specifies a standalone section
article	Used for a news article or blog posts
nav	Specifies a navigation link
aside	Used to place the content aside from the existing content
figure	Specifies self contained content like images
figcaption	Specifies a caption for figure tag
main	Specifies the main content of a document
mark	Used for highlighting a text in an HTML page
details	It provides a dropdown that would show and hide on click

❮❮ PREV NEXT ❯❯