🔧 14 rarely known Useful HTML Tags
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
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
<details>
<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
<p>The concert starts at <time datetime="2023-07-15T20:00">8:00 PM on July 15, 2023</time>.</p>
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
<p>Here's a sentence with <mark>highlighted text</mark> using the mark tag.</p>
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
<label for="download">Download progress:</label>
<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
<label for="fuel">Fuel level:</label>
<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
<p>I work in <abbr title="User Interface">UI</abbr> development.</p>
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
<p><dfn>HTML</dfn> stands for HyperText Markup Language and is the standard markup language for creating web pages.</p>
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
<p>My favorite book is <cite>The Hitchhiker's Guide to the Galaxy</cite> by Douglas Adams.</p>
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>This text is left-to-right.</p>
<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
<p>The command <code>print("Hello, World!")</code> will output: <samp>Hello, World!</samp></p>
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
<p>To save your file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
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
<p>In the equation <var>E</var> = <var>m</var><var>c</var><sup>2</sup>, <var>E</var> represents energy.</p>
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
<ruby>
漢 <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
<ul>
<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:
<article>
<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! 🚀
...
🔧 14 rarely known Useful HTML Tags
📈 60.62 Punkte
🔧 Programmierung
🔧 6 LITTLE KNOWN BUT USEFUL HTML TAGS
📈 39.76 Punkte
🔧 Programmierung
🔧 Lesser-known HTML tags #1
📈 28.37 Punkte
🔧 Programmierung
📰 51 Useful Lesser Known Commands for Linux Users
📈 22.34 Punkte
🐧 Unix Server
📰 51 Useful Lesser Known Commands for Linux Users
📈 22.34 Punkte
🐧 Unix Server
🔧 Less known but useful features of CSS
📈 22.34 Punkte
🔧 Programmierung
🔧 5 Lesser-Known but Useful JavaScript Functions
📈 22.34 Punkte
🔧 Programmierung
🔧 5 Lesser-Known but Useful JavaScript Functions
📈 22.34 Punkte
🔧 Programmierung
🍏 Top 6 Useful Lesser-Known Mac Apps Worth Trying
📈 22.34 Punkte
🍏 iOS / Mac OS
📰 11 Lesser Known Useful Linux Commands
📈 22.34 Punkte
🐧 Unix Server