HTML tags can be categorized into two types based on semantics in HTML. They are:
- Semantic Tag
- Non-semantic Tag
Semantic Tags
The tags which accurately describe their purpose and describe the type of their content are called semantic tags. For example,
<h1>Header</h1>
From the above code, we can accurately tell that the content inside the <h1> tag is a heading.
Some examples of semantic tags are 一 <h1>-<h6>, <form>, <table>, <main>, etc
Non-Semantic Tags
HTML non-semantic tags do not have a specific meaning or purpose. They are used to create general-purpose containers for content without providing any additional meaning or context. For example,
<span>Some Text</span>
From the above code, we cannot extract the meaning of the text. This code could come from any section of the document thus it adds no semantic value to the document.
Some examples of non-semantic tags are 一 <div>, <span>, etc
Examples of some Semantic Tags
There are many semantic HTML tags that can be used to give meaning to the content of a webpage. Some examples of semantic HTML tags include
| Semantic Tag | Description |
|---|---|
<p> |
defines a paragraph of a document |
<header> |
defines the header of a document or section of a document |
<footer> |
defines the footer of a document or section of a document |
<nav> |
define a section of the page that contains navigation links |
<article> |
used to specify independent, self-contained content |
<aside> |
defines some content aside from the content it is placed in. It is more like a sidebar |
<main> |
specifies the main content of a document |
<section> |
defines the section of a document |
<details> |
defines additional details that the user can view or hide |
<summary> |
defines the visible heading for the <details> element |
Why use semantic HTML?
We use semantic HTML because the semantic HTML makes:
- makes the code easier to read
- makes the site more accessible
- leads to better SEO
We will explore each of them in detail.
Semantic HTML makes the code easier to read
Some Semantic HTML tags like <main>, <aside>, <header>, etc do not have any added functionality and act identically to the <div> tag. However, these semantic tags make code easier to read.
Let us look at the following two examples.
Using Semantic tags
<body>
<header>
<h1>Heading</h1>
</header>
<section>
<main>
<article>
This is the main content of the website.
</article>
</main>
<aside>Extra information.</aside>
</section>
<footer>Copyright 2022</footer>
</body>
Browser Output
Using <div> tag
<body>
<div>
<h1>Heading</h1>
</div>
<div>
<div>
<div>
This is the main content of the website.
</div>
</div>
<div>Extra information.</aside>
</div>
<div>Copyright 2022</footer>
</body>
Browser Output
As you can see, both examples create the same output. However, the first one is much easier to understand. This is a small example, but in the case of a large document, it might save hours of a developer's time.
Semantic HTML makes the site more accessible
Semantic HTML can help improve accessibility for people with disabilities because it allows assistive technologies, such as screen readers, to more easily interpret and navigate the content of the page. For example,
Using the <h1> tag to denote the main heading, rather than just making the text big and bold with CSS, allows a screen reader to properly identify the content as a heading and give it the appropriate level of importance.
This helps users with visual impairments better understand the structure and hierarchy of the page.
Semantic HTML leads to better SEO
The semantic tags make it easier for search engines to index the content. It also helps to identify important keywords on a webpage because they give the content a clear structure and hierarchy.
For example, using the <h1> tag for the main heading of a page, and the <h2> and <h3> tags for subheadings, allows users and search engines to easily identify the most important keywords on the page.