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>
Usage
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.
Example
<details> <summary>Click to reveal the content</summary> <p>This is the hidden content that will be displayed when the summary is clicked.</p> </details>
Click to reveal the content
This is the hidden content that will be displayed when the summary is clicked.
2. <fieldset> and <legend>
Usage
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.
Example
<form>
<fieldset>
<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">
</fieldset>
<fieldset>
<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>
</fieldset>
<input type="submit" value="Submit">
</form>
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>
Usage
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.
Example
<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"> </datalist>
4. <figure> and <figcaption>
Usage
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>.
Example
<figure> <img src="image.jpg" alt="An example image"> <figcaption>An example image with a caption.</figcaption> </figure>
5. <time>
Usage
The <time> element represents a specific point in time or a range of time, allowing for better machine-readability and semantic meaning.
Example
<time datetime="2023-04-05">April 5, 2023</time>
6. <mark>
Usage
The <mark> element is used to highlight text within a document, making it visually stand out to draw attention to specific content.
Example
<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>
Usage
The <meter> element represents a scalar measurement within a known range, such as disk usage, voting results, or a fraction of a value.
Example
<label>Disk usage: <meter value="0.6" min="0" max="1">60%</meter></label>
8. <progress>
Usage
The <progress> element represents the completion progress of a task, like a file download, a form submission, or a quiz.
Example
<label>File Download Progress: <progress value="50" max="100"></progress></label>
9. <ruby>, <rt>, and <rp>
Usage
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.
Example
<ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby>
漢 字
10. <wbr>
Usage
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.
Example
<p>Here is a verylongwordthatmightcauselayoutissues<wbr>butweuse<wbr>the<wbr>wbrelement<wbr>tohelp.</p>
Here is a verylongwordthatmightcauselayoutissues