This article shows several useful but not commonly used HTML elements

Reference: 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:

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

Output:

2) <progress>

It shows a progress bar, indicating the current progress.

Code Sample:

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

Output:

3) <legend> & <fieldset>

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

Code Sample:

<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:

4) <details> & <summary>

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

Code Sample:

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

Output:

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:

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

Output: