Discovering the Most Unknown Semantic HTML Tags: Hidden Gems for Better Accessibility and SEO
Posted by Nuno Marques on 26 Dec 2024
Semantic HTML tags are like the unsung heroes of web development. They make your code more meaningful, enhance accessibility, and boost SEO. While popular tags like <header> and <section> get a lot of love, some powerful semantic elements often go unnoticed. Let’s uncover ten lesser-known semantic tags, their use cases, and how they can transform your website.
1. <main>
What It Does:
Defines the primary content of a webpage, excluding headers, footers, and sidebars.
Use Case:
Ideal for wrapping the central content of a blog, article, or application.
<main>
<article>
<h1>Welcome to the Semantic Web</h1>
<p>Discover the magic of meaningful HTML elements...</p>
</article>
</main>
Why Use It:
- Helps screen readers quickly locate main content.
- Improves SEO by signaling the focal point of the page.
2. <mark>
What It Does:
Highlights relevant text with semantic importance.
Use Case:
Highlight user search terms in search result pages.
<p>Results for "<mark>CSS Grid</mark>":</p>
<blockquote>CSS Grid is a powerful layout system in <mark>CSS</mark>.</blockquote>
3. <time>
What It Does:
Encodes a machine-readable date or time.
Use Case:
Display publish dates for blogs or event schedules.
<time datetime="2024-12-26T10:00">December 26, 2024</time>
4. <figure> and <figcaption>
What They Do:
Wrap images or media with an optional caption.
Use Case:
Illustrate blog posts with images and relevant descriptions.
<figure>
<img src="example.jpg" alt="Beautiful sunrise" />
<figcaption>Figure 1: A breathtaking sunrise over the mountains.</figcaption>
</figure>
5. <details> and <summary>
What They Do:
Create collapsible sections with a clickable summary.
Use Case:
Build interactive FAQ sections.
<details>
<summary>What is Semantic HTML?</summary>
<p>Semantic HTML uses tags that describe their meaning in context.</p>
</details>
6. <address>
What It Does:
Defines contact information like an email or physical address.
Use Case:
Add contact details to a footer or contact page.
<address>
<a href="mailto:info@example.com">info@example.com</a><br>
123 Web Street, Internet City
</address>
7. <abbr>
What It Does:
Denotes an abbreviation or acronym, often with a description.
Use Case:
Clarify technical jargon or acronyms.
<p>The <abbr title="HyperText Markup Language">HTML</abbr> standard is managed by the W3C.</p>
8. <progress>
What It Does:
Represents the progress of a task, such as file uploads or installations.
Use Case:
Visualize task completion for users.
<progress value="70" max="100">70%</progress>
9. <meter>
What It Does:
Displays a scalar measurement within a known range, like ratings or scores.
Use Case:
Show a satisfaction rating.
<meter value="0.8" min="0" max="1">80%</meter>
10. <output>
What It Does:
Displays the result of a calculation or action.
Use Case:
Show live results of a form or JavaScript calculation.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" name="a"> +
<input type="number" id="b" name="b">
= <output name="result" for="a b"></output>
</form>
Conclusion
These ten semantic HTML tags are not just about aesthetics or structure; they redefine how users and machines interact with your website. From accessibility enhancements to better SEO and cleaner code, these tags bring real-world benefits to your projects.
Which of these tags will you use next? Dive into your code and give these semantic heroes a try!