Lädt...


🔧 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:

  1. Improve your website's accessibility
  2. Enhance SEO
  3. Make your code more semantic and easier to read
  4. 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:

  1. Accessible to all users
  2. Easy for search engines to understand
  3. Semantically correct
  4. 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:

  1. Use feature detection in JavaScript to provide fallbacks
  2. Style tags to degrade gracefully in unsupporting browsers
  3. 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

🔧 10 Rarely Used HTML Tags You Should Start Using Today


📈 38.28 Punkte
🔧 Programmierung

🔧 HTML Tips - Less Known HTML Tags and Attributes ♥️


📈 32.57 Punkte
🔧 Programmierung

🔧 10 Useful but Rarely Used OS Functions in Python


📈 32.25 Punkte
🔧 Programmierung

🔧 Exploring the Hidden Gems of HTML: 11 Lesser-Known Tags You Should Know


📈 28.37 Punkte
🔧 Programmierung

🔧 Exploring Lesser-Known HTML Tags: Hidden Gems for Web Developers


📈 28.37 Punkte
🔧 Programmierung

🔧 Lesser-known HTML tags #1


📈 28.37 Punkte
🔧 Programmierung

📰 LinkDesk Smart Tags vorgestellt: Schicke NFC-Tags mit App-Anbindung


📈 26.44 Punkte
📰 IT Nachrichten

🕵️ Piwigo up to 2.9.2 Administration Panel admin/tags.php tags sql injection


📈 26.44 Punkte
🕵️ Sicherheitslücken

🕵️ Piwigo bis 2.9.2 Administration Panel admin/tags.php tags SQL Injection


📈 26.44 Punkte
🕵️ Sicherheitslücken

📰 LinkDesk Smart Tags vorgestellt: Schicke NFC-Tags mit App-Anbindung


📈 26.44 Punkte
📰 IT Nachrichten

🕵️ Repurposing boring eInk electronic shelf labels / price tags into useful wireless photo frames


📈 24.6 Punkte
🕵️ Reverse Engineering

📰 How AI Is Useful — and Not Useful — for Cybersecurity


📈 22.76 Punkte
📰 IT Security Nachrichten

📰 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

🔧 Laravel Advanced: Lesser-Known, Yet Useful Composer Commands


📈 22.34 Punkte
🔧 Programmierung

📰 Not Everything About ".well-known" is Well Known, (Mon, Sep 14th)


📈 21.92 Punkte
📰 IT Security

📰 VM: Protecting Known Assets against Known Vulnerabilities


📈 21.92 Punkte
📰 IT Security Nachrichten

🐧 HTML: Überschriften formatieren mit HTML-Heading-Tags


📈 21.6 Punkte
🐧 Server

📰 Our favorite AirPods are $80 off right now -- and that rarely happens


📈 20.87 Punkte
📰 IT Nachrichten

📰 Online Risks Are Everyday Events for Teens -- But They Rarely Tell Their Parents


📈 20.87 Punkte
📰 IT Security Nachrichten

🕵️ Money from bank hacks rarely gets laundered through cryptocurrencies


📈 20.87 Punkte
🕵️ Hacking

🔧 OpenResty: The Overpowered Web Server Used by 40M Websites (that people rarely talk about)


📈 20.87 Punkte
🔧 Programmierung

📰 People rarely change their passwords after a data breach, study says


📈 20.87 Punkte
📰 IT Security Nachrichten

🔧 Why I rarely use `getByRole`: Testing Library and the first rule of ARIA


📈 20.87 Punkte
🔧 Programmierung

📰 After a Breach, Users Rarely Change Their Passwords, Study Finds


📈 20.87 Punkte
📰 IT Security Nachrichten

📰 Compressing LLMs: The Truth is Rarely Pure and Never Simple


📈 20.87 Punkte
🔧 AI Nachrichten

🕵️ After a breach, users rarely change their passwords, study finds


📈 20.87 Punkte
🕵️ Hacking

matomo