Hey there, fellow UI developers! Ready to dive into the world of lesser-known HTML tags? We all know the usual suspects like <div>, <p>, and <a>, but today we’re going to explore some hidden gems that can make your coding life easier and your websites more accessible. Let’s uncover these html unique tags together!
Why Should You Care About These Unique Tags?
Before we jump into our list, you might be wondering, “Why bother with these obscure tags?” Well, my friend, using the right HTML tags can:
Improve your website’s accessibility
Enhance SEO
Make your code more semantic and easier to read
Reduce the need for custom CSS and JavaScript in some cases
So, without further ado, let’s explore these 14 html unique tags that you might not have heard of before!
1. The Mysterious <details> and <summary> Tags
Have you ever wanted to create an expandable/collapsible section without reaching for JavaScript? Say hello to the <details> and <summary> tags!
How to Use Them
<summary>Click me to see more!</summary>
<p>Here’s the hidden content that appears when you click.</p>
</details>
This creates a native dropdown that users can click to reveal more information. It’s great for FAQs, additional details, or any content you want to keep hidden initially.
2. The Time-Saving <time> Tag
When dealing with dates and times, the <time> tag is your new best friend. It helps machines understand the time and date format, which is great for SEO and accessibility.
Example Usage
The datetime attribute uses a machine-readable format, while the content between the tags can be in any human-readable format you prefer.
3. The Semantic <mark> Tag
Want to highlight text without using CSS? The <mark> tag is here to help!
How It Works
This tag is perfect for search results or emphasizing parts of your text without relying on CSS classes.
4. The Accessible <progress> Tag
For those times when you need to show progress, the <progress> tag is a semantic and accessible way to do it.
Progress Bar Example
<progress id=“download” value=“50” max=“100”>50%</progress>
This creates a native progress bar that’s understood by screen readers and doesn’t require custom styling (though you can style it if you want).
5. The Handy <meter> Tag
Similar to <progress>, but for static measurements, the <meter> tag is great for displaying gauges.
Meter Example
<meter id=“fuel” min=“0” max=“100” value=“75” low=“33” high=“66” optimum=“80”>75 out of 100</meter>
This creates a gauge that visually represents the fuel level, with color-coding based on the low, high, and optimum values.
6. The Abbreviation-Friendly <abbr> Tag
When using abbreviations, the <abbr> tag helps provide full meanings and improves accessibility.
Abbreviation in Action
Hovering over “UI” will show the full “User Interface” text, helping users understand abbreviations without cluttering your content.
7. The Definition <dfn> Tag
When introducing a new term or concept, the <dfn> tag is perfect for marking it as a definition.
Definition Example
This helps both users and search engines understand that you’re defining a term.
8. The Citation <cite> Tag
When referencing a creative work, the <cite> tag is your go-to for proper attribution.
Citation Usage
This tag is typically rendered in italics by default, but remember, it’s about semantics, not styling!
9. The Bidirectional Override <bdo> Tag
Working with multiple languages that read in different directions? The <bdo> tag has got you covered.
Bidirectional Text Example
<p><bdo dir=“rtl”>This text is right-to-left.</bdo></p>
This is super helpful when dealing with languages like Arabic or Hebrew within predominantly left-to-right content.
10. The Sample Output <samp> Tag
When displaying sample output from a computer program, the <samp> tag is your friend.
Sample Output Example
This helps distinguish sample output from other text, improving readability for code-related content.
11. The Keyboard Input <kbd> Tag
Need to show keyboard input? The <kbd> tag is perfect for that!
Keyboard Input Example
This tag typically renders text in a monospace font, making it clear that you’re referring to keyboard input.
12. The Variable <var> Tag
When you’re writing about mathematics or programming and need to denote a variable, the <var> tag comes in handy.
Variable Usage
This tag usually renders its content in italics, helping variables stand out in your text.
13. The Ruby Annotation <ruby> Tag
Working with East Asian typography? The <ruby> tag, along with <rt> and <rp>, allows for ruby annotations.
Ruby Annotation Example
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
This creates small annotations above or to the side of characters, commonly used in Japanese to show the pronunciation of kanji.
14. The Bi-Directional Isolation <bdi> Tag
Last but not least, we have the <bdi> tag, which stands for Bi-Directional Isolation. It’s useful when you’re not sure about the directionality of the text you’re embedding.
Bi-Directional Isolation Example
<li>User 1: <bdi>John Smith</bdi></li>
<li>User 2: <bdi>محمد علي</bdi></li>
</ul>
This ensures that the directionality of each name is handled correctly, regardless of the surrounding text direction.
Putting It All Together
Now that we’ve explored these 14 html unique tags, let’s see how we might use some of them together in a real-world scenario:
<h1>Tech Conference 2023</h1>
<p>Join us for our annual tech conference, happening on <time datetime=“2023-09-15”>September 15, 2023</time>!</p>
<h2>Event Details</h2>
<details>
<summary>Click for more information</summary>
<p>Our keynote speaker this year is <cite>Dr. Jane Smith</cite>, renowned AI researcher.</p>
<p>The conference will cover topics including:</p>
<ul>
<li><abbr title=“Artificial Intelligence”>AI</abbr></li>
<li><abbr title=“Machine Learning”>ML</abbr></li>
<li><abbr title=“User Interface”>UI</abbr> Design</li>
</ul>
</details>
<h2>Registration Progress</h2>
<label for=“reg-progress”>Spots filled:</label>
<progress id=“reg-progress” value=“75” max=“100”>75%</progress>
<h2>Ticket Types</h2>
<ul>
<li>Standard: $<var>x</var></li>
<li>VIP: $<var>y</var></li>
</ul>
<h2>How to Register</h2>
<p>To register, simply press <kbd>Ctrl</kbd> + <kbd>R</kbd> and type your details into the form.</p>
<h2>Sample Conference Schedule</h2>
<samp>
09:00 – Opening Remarks
10:00 – Keynote Speech
12:00 – Lunch Break
13:00 – Breakout Sessions
17:00 – Networking Event
</samp>
</article>
Why These Tags Matter
As UI developers, our job isn’t just about making things look pretty. It’s about creating websites that are:
Accessible to all users
Easy for search engines to understand
Semantically correct
Efficient to style and manipulate with CSS and JavaScript
By using these html unique tags, we’re not just writing code — we’re crafting experiences that are inclusive, informative, and intuitive.
The Impact on Accessibility
Let’s take a moment to appreciate how these tags can significantly improve accessibility:
<time> helps screen readers pronounce dates correctly
<progress> and <meter> provide context for visual representations
<abbr> explains abbreviations without cluttering the visual display
<ruby> assists with pronunciation of complex characters
By using these tags, we’re making the web a more inclusive place, one element at a time.
SEO Benefits
Search engines love semantic HTML. When we use tags like <time>, <cite>, and <dfn>, we’re giving search engines more context about our content. This can lead to:
Rich snippets in search results
Better understanding of our content’s structure
Potentially higher rankings for relevant queries
Reducing Dependency on CSS and JavaScript
Many of these tags provide functionality that we might otherwise implement with CSS or JavaScript. For example:
<details> and <summary> create expandable sections without JS
<progress> and <meter> create visual indicators without CSS
<mark> highlights text without additional classes
By leveraging these HTML features, we can create more performant websites with less code.
Browser Support and Fallbacks
While most modern browsers support these tags, it’s always good to be prepared for older browsers. Here are some tips:
Use feature detection in JavaScript to provide fallbacks
Style tags to degrade gracefully in unsupporting browsers
Use polyfills for critical functionality
Remember, it’s okay if the experience isn’t identical across all browsers — progressive enhancement is your friend!
Conclusion
And there you have it, folks! We’ve explored 14 html unique tags that you might not have known about before. From improving accessibility with <abbr> and <time>, to creating interactive elements with <details> and <summary>, these tags offer a wealth of functionality right out of the box.
As UI developers, it’s our responsibility to stay up-to-date with these HTML features. They not only make our lives easier but also contribute to a better, more accessible web for everyone.
So, the next time you’re reaching for a <div> or a custom CSS class, take a moment to consider if one of these semantic tags might be a better fit. Your future self (and your users) will thank you!
Remember, HTML isn’t just about structuring content — it’s about conveying meaning. These unique tags give us more tools to do just that. So go forth and semantic-ify your markup!
Happy coding, and may your tags always be closing! 🚀
