DEV Community

Cover image for YOU DON'T KNOW THESE HTML TAGS! 🫣
Matteo Bianchi
Matteo Bianchi

Posted on

5 2 1 1 1

YOU DON'T KNOW THESE HTML TAGS! 🫣

When working with HTML, most developers are familiar with the basic tags like <div>, <span>, and <a>.
However, HTML includes a variety of lesser-known tags that can be extremely useful in specific scenarios.

Here are some of the less commonly used HTML tags that you might find helpful:

<abbr>

The <abbr> tag is used to define an abbreviation or an acronym, providing explicit information about its meaning.

<abbr title="HyperText Markup Language">HTML</abbr>
Enter fullscreen mode Exit fullscreen mode

In this example, hovering over "HTML" will show "HyperText Markup Language."

HTML

<address>

The <address> tag is used to define the contact information of the author of a document or article.

<address>
  Written by <a href="mailto:webmaster@example.com">John Doe</a>.<br>
  Visit us at:<br>
  Example.com<br>
  Box 564, Disneyland<br>
  USA
</address>
Enter fullscreen mode Exit fullscreen mode

This tag is useful for providing structured contact information.


<bdo>

The <bdo> tag stands for "bidirectional override" and is used to change the text direction.

<bdo dir="rtl">This text will be written from right to left</bdo>
Enter fullscreen mode Exit fullscreen mode

This tag is particularly useful for languages that are read from right to left.


<datalist>

The <datalist> tag provides a list of predefined options for an input field.

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>
Enter fullscreen mode Exit fullscreen mode

 <details>

The <details> tag is used to create a collapsible box that can contain additional interactive details.

<details>
  <summary>More information</summary>
  <p>Here is some additional information that you can see when you click the summary.</p>
</details>
Enter fullscreen mode Exit fullscreen mode

This tag is useful for creating expandable sections on a webpage.


<meter>

The <meter> tag represents a scalar measurement within a known range, such as disk usage.

<meter value="2" min="0" max="10">2 out of 10</meter>
Enter fullscreen mode Exit fullscreen mode

This is useful for displaying progress or levels within a set range.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (1)

Collapse
 
johannes_k_rexx profile image
johnblommers

Special HTML tags can indeed make our documents more accessible.
But please, don't present your article title in all capital letters. That is considered shouting and is therefore generally considered inappropriate. Some will even take offense ;-)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free