YOU DON'T KNOW THESE HTML TAGS! 🫣

Matteo Bianchi - Jul 12 - - Dev Community

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.

. . . .
Terabox Video Player