What are HTML semantic tags and why should you use them?
HTML, or HyperText Markup Language, is the basic language that builds the structure of websites. Although its origins date back to the 1990s, the growth of the Internet has brought many changes that have affected its syntax and functionality. With the introduction of HTML5 came semantic markup, which is a breakthrough in creating clear and effective websites. Why use them and how do they differ from traditional tags? Here are the answers.
What are HTML semantic tags?
Semantic tags carry information about the content they contain. Thanks to them, browsers and indexing programs (such as Google) better understand the structure of a page. This in turn helps its display, positioning and improves the user experience. Examples of such tags are:<article>, <section> or <nav>.
In comparison, non-semantic tags, such as <div> or <span>, have only an organizational function. They say nothing about the content stored in them.
An example of semantic markup in HTML:
<header>
<h1>Hello on my website!</h1>
</header>
An example of a non-semantic tag:
<div class="header">
<h1>Hello on my website!</h1>
</div>
In the first example, the browser knows that this element is a page header, which makes it easier to interpret.
New HTML5 semantic markup – an overview
HTML5 introduced a number of new tags that significantly ease the work of developers. Here are the most important of them:
<article>...<article/>Represents an independent block of content, such as a blog post, newspaper article or forum post. Example:
<article>
<h2>How to become a programmer?</h2>
<p>Programming is one of the most in-demand skills on the market...</p>
</article>
<section>...</section>
It is used to group content with a common theme. It can contain headings, paragraphs, lists or other elements. Example:
<section>
<h1>Services</h1>
<p>We offer a wide range of IT services, including:</p>
<ul>
<li>Website development</li>
<li>SEO optimisation</li>
<li>Technology consulting</li>
</ul>
</section>
<nav>...</nav>It contains navigational elements, such as menus or links to key sections of the page. Example:
<nav>
<a href="/about-us">About us</a> |
<a href="/services">Services</a> |
<a href="/contact">Contact</a>
</nav>
<aside>...</aside>
It is used to place side content, such as additional information, ads or links. Example:
<aside>
<h3>Worth reading</h3>
<p>See our article on the latest trends in technology.</p>
</aside>
<footer>...</footer>This is the place for the footer of a document or section, where information about the author, copyright or contact links are usually located. Example:
<footer>
<p>© 2025 My Site. All rights reserved.</p>
</footer>
<main>...</main>
The <main> tag in HTML is used to mark the main content of the document, which is unique to the page. It contains key information that directly answers the purpose of the page. It can occur only once in a document and should not contain elements such as headers, footers or forms. The
tag can include navigational links to subsections of the main content of the document that are not repeated on other pages. Example:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example of tag usage <main></title>
</head>
<body>
<main>
<section id="about-us">
<h2>About us</h2>
<p>We are a company specializing in designing modern websites.</p>
</section>
<section id="services">
<h2>Our services</h2>
<ul>
<li>Website development</li>
<li>SEO optimisation</li>
<li>Technical audit</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Contact us at: <a href="mailto:kontakt@example.com">kontakt@example.com</a></p>
</section>
</main>
<footer>
<p>© 2025 Moja Firma. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>
<figure>...</figure>
The <figure> semantic tag in HTML is used to group visual content, such as images, charts, diagrams or other graphical elements, together with their descriptions. It is often used together with the <figcaption> tag, which provides a description for the <figure> content. This allows browsers and screen readers to better understand the connection between the graphic and its description. Example:
<figure>
<img src="example.jpg" alt="Example of graphics">
<figcaption>Graphics descriptions: Example of tag usage <figure>.</figcaption>
</figure>
Below are all the semantic HTML tags that are responsible for correctly marking the semantic structure of the page:
source: https://www.w3schools.com/html/html5_semantic_elements.asp
Why does HTML semantics matter for SEO?
HTML semantics are important for SEO (Search Engine Optimization) for several key reasons:
1. Helps search engines understand the content of a page
Semantic HTML elements, such as <header>, <footer>, <article>, <section>, <nav>, or <aside>, clearly indicate what function a piece of content serves. This allows search engines to better interpret the structure of the page and the context of the information contained therein, resulting in better matching of search results to user queries.
2. Improves accessibility
Semantic markup helps assistive technologies, such as screen readers, interpret the content of a page. This, in turn, supports a better user experience, which can affect engagement rates and indirectly improve SEO results.
3. Makes content easier to index
Search engines use crawlers to index web pages. Semantic markup makes it easier for these crawlers to identify key elements of a page, such as headings(<h1> – <h6>), lists, tables or images with relevant descriptions (alt). This allows content to be more accurately understood and cataloged.
4. Emphasizes the importance of the content
The use of appropriate tags, such as <h1> for the main heading, <strong> or <em> to highlight text, or <article> for articles, indicates to search engines which elements are crucial to a document. These elements can be considered more relevant and ranked higher in search results.
5.Creates better results in snippets
HTML semantics can affect how snippets of content (snippets) are displayed in search results. For example, the correct use of tables or lists can be included in so-called “featured snippets,” which are particularly prominent in the SERP (Search Engine Results Page).
Practical tips and best practices
1 Use semantic markup whenever possible. You will increase the clarity of your code.
2.Avoid overuse of non-semantic tags, such as <div> or <span>.
3.Ensure proper formatting of your content, such as using H1-H5 headings.
4.Remember SEO – use <title>, <meta>, <h1> tags and alt attributes correctly .
5.Don’t use semantic HTML tags for text styling.
Questions asked by users:
Which version of html introduced semantic markup?
HTML5 introduced a number of semantic tags. They are designed to better describe the structure and meaning of content on a website.
What is the purpose of semantic html tags?
The purpose of semantic HTML tags is to give the structure of a page a meaning that makes it easier for search engines, assistive technologies and users to understand. Elements such as <header>, <article>, <section> or <footer> clarify the function of content, supporting SEO, improving accessibility and organization of information, and providing a better user experience (UX).
How many semantic tags in html?
There are more than 100 tags in html, while strictly semantic tags are fewer.
