DEV Community

Cover image for YOU DON'T KNOW THESE HTML TAGS! šŸ«£
Matteo Bianchi
Matteo Bianchi

Posted on

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.

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 ;-)