10+ HTML5 Tags You Probably Didn’t Know 🤔

HTML (HyperText Markup Language) is a standard text markup language used to create the structure of web pages. However some tags may not be as widely known or used as popular ones. In this article, we’ll focus on lesser-known but highly useful tags of HTML5. These tags can assit web developers in creating cleaner, more organized and accessible code.

1. <details> - <summary>

The <details> and <summary>t ags are used to expand and collapse the details of content, providing users with a better user experience. These tags allow the user to open and hide content when they need to see it.

<details open>
  <summary>Title or Summary</summary>
  Detailed content is here.
</details>

2. <dialog>

The <dialog> tag represents a modal or non-modal dialog box on a web page that is interactive with the user.

<dialog open>
   <p>Lorem ipsum dolor sit amet.</p>
   <form method="dialog">
      <button>OK</button>
   </form>           
</dialog>

3. <time> - <datetime>

The <time> tag is used to specify a time or date information. This tag is used to represent a specific time period and allows it to be presented in a machine-readable format. The datetime attribute provides this.

<p>New Year's Eve: <time datetime="2024-12-31T23:59:59">December 31, 2024, 11:59:59 PM</time>.</p>

<p>New Year: <time datetime="2024-01-01">January 1, 2024</time>.</p>

4. <datalist>

The <datalist> tag provides a way to present a specific list of options to user in a form field. As users make an entry in the form, this list shows specific options and suggests options that match or are similar to the users entry. This can help users enter correct information quickly and reduce incorrect entries.

<label for="color">Select a color:</label>
<input list="colors" id="color" name="color">

<datalist id="colors">
    <option value="Red">
    <option value="Blue">
    <option value="Green">
    <option value="Yellow">
    <option value="Orange">
</datalist>

5. <meter>

The <meter> tag is used to indicate the position of a measurement value (for example, a percentage or a numerical value) within a range. This tag is often used to present a visual representation of a measurement to the user.

<label for="file">File Size:</label>
<meter id="file" value="60" min="0" max="100">60%</meter>

6. <progress>

The <progress> tag is used to show the progress of a process. In particular, it is ideal for showing the user how much of a transaction has been completed.

<label for="upload">File Upload Status:</label>
<progress id="upload" value="80" max="100">80%</progress>

In the <meter> tag the minimum value is always 0 and the min attribute can be used. However, it is not mandatory. In the <progress> tag, the minimum value is always 0, but the min attribute is not used.

7. <optgroup>

The <optgroup> tag is used to group options within a <select> tag. This tag is used to present the options to the user in a more organized and understandable way.

<label for="fruits">Select a fruit:</label>
<select id="fruits" name="fruits">
    <optgroup label="Citrus Fruits">
        <option value="orange">Orange</option>
        <option value="lemon">Lemon</option>
        <option value="lime">Lime</option>
    </optgroup>
    <optgroup label="Tropical Fruits">
        <option value="banana">Banana</option>
        <option value="pineapple">Pineapple</option>
        <option value="mango">Mango</option>
    </optgroup>
</select>

8. <output>

The <output> tag is used in an HTML form or a web page where calculation results are displayed. It is typically used within a form and is used to display the result when a user input is received or a calculation is made.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="number" id="a" name="a" value="0">
    +
    <input type="number" id="b" name="b" value="0">
    =
    <output name="result" for="a b">0</output>
</form>

9. <abbr>

The <abbr> tag is used to indicate that a word or phrase is an abbreviation. It is an important tool for informing users about what exactly a particular abbreviation represents.

<p>
   <abbr title="Hypertext Markup Language">HTML</abbr> is a markup language used to create a web page.
</p>

10. <picture>

The <picture> tag is a structure used on web pages to enable selection between multiple image formats or sizes. This allows browsers to choose the most suitable image based on factors such as the device’s screen size, pixel density, and other characteristics. This feature is particularly useful for meeting the requirements of responsive design. The most suitable format supported by the browser is automatically selected.

<picture>
  <source media="(min-width: 768px)" srcset="large-image.jpg">
  <source media="(min-width: 320px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="A Sample Image">
</picture>

11. <figcaption>

The <figcaption> tag is an HTML tag that contains description or caption text below an HTML figure (typically an image or drawing).
This tag is used in conjunction with the <figure> tag to describe the content of the figure or to provide a caption for the image.

<figure>
  <img src="image.jpg" alt="An image">
  <figcaption>This is a description of the image.</figcaption>
</figure>

12. <object>

The <object> tag is used to display external content (such as images, videos, audio files, Flash animations, etc.) in HTML documents. The <object> tag is used to integrate various content types into web pages.

<object data="video.mp4" type="video/mp4">
    <!-- If the video doesn't load, this area will work.-->
    <img src="image.jpg" alt="An image">
</object>

Conclusion

Introducing and explaining lesser-known HTML tags with usage examples can expand web developers’ knowledge base and assist them in creating more diverse and effective web pages. These tags can contribute to improved accessibility, SEO, and user experience of websites. Additionally, by utilizing less common tags, developers can create cleaner and more organized HTML code, making maintenance and development easier. Therefore, it can be beneficial for developers to explore these tags and incorporate them into their projects when necessary.