---
title: Collection of less commonly used HTML elements
url: https://calvin.my/posts/collection-of-less-commonly-used-html-elements
published: 2025-05-08
updated: 2026-09-14
category: Development
tags:
- html
- elements
summary: The article highlights lesser-used HTML elements that can improve semantics, usability, and accessibility without complex implementation. It covers annotation support for pronunciation and supplementary text, native progress indicators, labeled form groupings, expandable content sections, and grouping related headings. These elements provide built-in structure and interaction for common interface needs, helping developers create clearer forms, compact disclosures, multilingual content, and more meaningful document organization.
---

# Collection of less commonly used HTML elements

This article shows several useful but not commonly used HTML elements

Reference: [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)

* * *

## 1\) \<ruby\>, \<rt\>

This adds annotations at the top of a string, usually used to print the pronunciation of some Asian languages (E.g., Japanese and Chinese).

Code Sample:

```html
<ruby>1200<rt>milliliters (ml)</rt></ruby>
<ruby>智能<rt>zhì néng</rt></ruby>
```

Output:

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/cf20ee84-7cde-4edb-809c-1fca5919d4a3.png)

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/33c9a843-6a32-45d7-b9e5-ed7fefd7569e.png)

## 2\) \<progress\>

It shows a progress bar, indicating the current progress.

Code Sample:

```html
<progress max="100" value="70">70%</progress>
```

Output:

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/e87e462c-898d-4d02-ab2a-8de9d7246821.png)

## 3\) \<legend\> & \<fieldset\>

It provides a caption for a fieldset. For example, a radio button group.

Code Sample:

```html
<fieldset class="border border-gray-600 rounded p-4">
      <legend class="bg-gray-600 text-white my-1 px-2">Select Volume</legend>
     <!-- radio buttons -->
</fieldset>
```

Output:

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/d69fa645-2fd1-43c5-bfce-ed74f94dde1b.png)

## 4\) \<details\> & \<summary\>

To show a compact view, the content is visible only when toggled.

Code Sample:

```html
<details>
    <summary class="cursor-pointer text-blue-500 underline">Optional Fields</summary>
   <!-- Content -->
</details>
```

Output:

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/8c87b3a1-1790-459e-9869-3c512c3d1448.png)

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/b7d7be25-41dc-45d2-afe6-c59d0abe7e0c.png)

## 5\) \<hgroup\>

It groups one or more headings of related content. It does not have much visual impact, the purpose is more for accessibility and search engine optimisation.

Code Sample:

```html
<hgroup>
    <h1>Article Name</h1>
    <h4>Last Updated: 2025-05-08</h4>
</hgroup>
```

Output:

![](https://camy-pub.s3.ap-southeast-1.amazonaws.com/81ae69fb-3d88-4c17-af7a-7f2a77c128fc.png)