a person typing on a laptop surrounded by icons

Hidden Gems of HTML: 10 Underused Elements to Boost Your Web Design

As a web developer, you’re likely familiar with HTML, the cornerstone of all websites.

You may be aware of the frequently used elements, but there are many lesser-known ones.

In this article, we’ll explore 10 underused HTML elements that can improve your website’s functionality and user experience.

1. <details> and <summary>


The <details> element creates an interactive widget that allows users to toggle the visibility of its contents. The optional <summary> element defines a summary or heading for the <details> content.


<summary>Click to reveal the content</summary>
<p>This is the hidden content that will be displayed when the summary is clicked.</p>
Click to reveal the content

This is the hidden content that will be displayed when the summary is clicked.

2. <fieldset> and <legend>


The <fieldset> element is used to group related form controls, such as input fields, checkboxes, and radio buttons, within a <form>. This element improves the organization and readability of forms, making it easier for users to understand and interact with them. The <legend> element can be used in conjunction with the <fieldset> element to provide a caption for the group of form controls.


    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="birthdate">Birthdate:</label>
    <input type="date" id="birthdate" name="birthdate">

    <legend>Preferred Contact Method</legend>
    <input type="radio" id="contact-email" name="contact" value="email">
    <label for="contact-email">Email</label>

    <input type="radio" id="contact-phone" name="contact" value="phone">
    <label for="contact-phone">Phone</label>

    <input type="radio" id="contact-post" name="contact" value="post">
    <label for="contact-post">Post</label>

  <input type="submit" value="Submit">
Personal Information

Preferred Contact Method

In this example, we have used two <fieldset> elements to group related form controls. The first fieldset contains personal information fields, while the second one groups radio buttons for selecting the preferred contact method. The <legend> element provides a clear label for each group, making it easy for users to understand the purpose of each section.

3. <datalist>


The <datalist> element works with <input> elements to create a dropdown list of suggestions based on user input, enhancing the user experience by providing relevant options.


<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="Edge">

4. <figure> and <figcaption>


The <figure> element represents content that is referenced from the main content, such as images, diagrams, or videos. The optional <figcaption> element provides a caption or description for the content within the <figure>.


<img src="image.jpg" alt="An example image">
<figcaption>An example image with a caption.</figcaption>
An example image
An example image with a caption.

5. <time>


The <time> element represents a specific point in time or a range of time, allowing for better machine-readability and semantic meaning.


<time datetime="2023-04-05">April 5, 2023</time>

6. <mark>


The <mark> element is used to highlight text within a document, making it visually stand out to draw attention to specific content.


<p>Here is some text with a <mark>highlighted section</mark> to emphasize its importance.</p>

Here is some text with a highlighted section to emphasize its importance.

7. <meter>


The <meter> element represents a scalar measurement within a known range, such as disk usage, voting results, or a fraction of a value.


<label>Disk usage: <meter value="0.6" min="0" max="1">60%</meter></label>

8. <progress>


The <progress> element represents the completion progress of a task, like a file download, a form submission, or a quiz.


<label>File Download Progress: <progress value="50" max="100"></progress></label>

9. <ruby>, <rt>, and <rp>


The <ruby> element, along with the <rt> and <rp> elements, is used for displaying annotations, typically used for East Asian typography to provide pronunciation or meaning for a base text.


漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>


10. <wbr>


The <wbr> (word break opportunity) element represents a point within the text where a line break may occur, particularly useful for long words or URLs that might disrupt the layout.


<p>Here is a verylongwordthatmightcauselayoutissues<wbr>butweuse<wbr>the<wbr>wbrelement<wbr>tohelp.</p>

Here is a verylongwordthatmightcauselayoutissuesbutweusethewbrelementtohelp.