What Are HTML Semantic Tags?
Semantic HTML tags provide information about the contents of those tags that goes beyond just how they look on a page. These tags give meaning to the web content, making it understandable for both browsers and developers.
Traditional HTML tags, are concerned with presentation like <b> for bold text or <i> for italic text. Semantic tags specifically tell us what type of content they contain. For example, <article>, <footer>, <header>, and <nav> are all semantic because they clearly describe the purpose of the content inside them. This helps with Search Engine Optimization (SEO) as search engines better understand the structure and content of the pages, and also aids in accessibility, allowing screen readers to navigate and interpret the content more effectively.
Semantic tags stand in contrast to non-semantic tags, which don’t give any indication about their content and are used purely for formatting. The use of semantic tags is considered a best practice in HTML coding because they make the web more inclusive and the content more accessible for everyone.
Why Use HTML Semantic Tags?
Using semantic tags in HTML offers several benefits, particularly in terms of readability and maintainability of the code. When using frameworks like Tailwind, which focuses on utility-first CSS classes, the semantic meaning of HTML elements can become obscured by the presentation details. Semantic tags help maintain clarity of the document’s structure even when presentation layers are complex.
Example Comparison:
Without Semantic Tags:
<div id="header"></div>
<div class="main">
<div class="section"></div>
<div class="section"></div>
</div>
<div id="footer"></div>
With Semantic Tags:
<header></header>
<main>
<section></section>
<section></section>
</main>
<footer></footer>
In the non-semantic example, we use generic <div> elements that require IDs and class names to define their meaning. But let’s be honest, a lot of websites don’t have that either. The only way to decipher what’s what is to render the page or read the code more carefully.
On the other hand, the semantic example uses tags that inherently describe their content, making it immediately clear what each section represents.
For developers, semantic tags act like signposts throughout the HTML document, signaling what each part of the website is for. This self-explanatory nature of semantic tags makes it easier to navigate the document, debug issues, and update the website. Additionally, when a developer sees a <nav> tag, they can instantly understand that the enclosed items are part of the site’s navigation. This intuitive aspect speeds up development and enhances collaboration among team members who might be working with the codebase.
Common HTML Semantic Tags Explained Simply
Now, that we know why to use HTML semantic tags we should get familiar with the most useful ones. Here’s a list of some popular ones that help keep things clear:
<article>: Think of this as a container for any complete story on your page, like a blog post or a news article.<aside>: This is for stuff that’s related to your main story but not part of it, like a sidebar with extra info or related links.<figcaption>: If you have a photo or a drawing on your page, this tag gives it a caption so everyone knows what it’s about.<figure>: Use this for content that stands on its own and makes sense by itself, like images, diagrams, or charts.<footer>: This is the bottom part of your page or section, where you often find the fine print like who made the site, some links, or contact details.<header>: The top part of your page or section, where you might find the title or navigation links to other parts of the site.<main>: This is the heart of your webpage, where the most important content goes. It’s the main story that your page is all about.<mark>: Use this when you want to highlight a bit of text because it’s important or needs attention.<nav>: This is like the signpost of your page; it helps people get around, holding links to other pages or parts of the page.<section>: This tag helps you divide your page into chunks, each one about a different topic.<time>: Whenever you mention a specific date or time, this tag makes it clear that’s what it is.
In my experience, <header, <nav>, <main>, <footer> are the most useful, not only for developers but also from the SEO perspective (as they make it easier for search engines to parse your website). Also <article> is pretty handy for a website like mine.