Less known HTML tags

• May 18, 2025 at 09:20 IST
• html

I collected a list of 28 less known but very useful HTML tags:

1. Abbreviation – abbr

Marks abbreviations and shows full form on hover.

Example:

HTML:

<abbr title="HyperText Markup Language">HTML</abbr>

2. Bi-directional Isolation – bdi

Isolates text that may have different writing directions.

Example:

HTML:

User <bdi>علي</bdi>

3. Calculation Result – output

Shows the result of a calculation or user input.

Example:

HTML:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input name="a" type="number" value="3"> +
  <input name="b" type="number" value="4"> =
  <output name="result">7</output>
</form>

4. Citation – cite

Used to reference the title of a work like a book, movie, article, or website. Usually shown in italics by browsers.

Example:

HTML:

<p><cite>The Great Gatsby</cite> is a novel by F. Scott Fitzgerald.</p>

5. Contact Information – address

Used to provide contact details for a person, group, or organization. Usually displayed in italics and often used in footers.

Example:

HTML:

<p><address>Contact us at support@example.com</address></p>

6. Definition – dfn

Marks the term being defined, often used in technical writing.

Example:

HTML:

<dfn>Latency</dfn>

7. Deleted Text – del

Used to mark removed text. Often shown with a strike-through.

Example:

HTML:

<p>This was <del>removed</del>.</p>

8. Description List with Terms and Details – dl + dt + dd

Used to list terms and their descriptions. <dl> wraps the whole list, <dt> defines the term, and <dd> gives the description.

Example:

HTML

A markup language for web pages.

CSS

Used to style HTML content.

HTML:

<dl>
  <dt>HTML</dt>
  <dd>A markup language for web pages.</dd>
  <dt>CSS</dt>
  <dd>Used to style HTML content.</dd>
</dl>

9. Direction Override – bdo

Forces a section of text to display in a specified direction.

Example:

HTML:

<bdo dir="rtl">Hello World</bdo>

10. Expandable Section – details + summary

Creates a collapsible content box that can be expanded by the user.

Example:

HTML:

<details>
  <summary>Click to expand</summary>
  This text is hidden until clicked.
</details>

11. Group Form Fields – fieldset + legend

Groups related form inputs and adds a caption using <legend>.

Example:

HTML:

<fieldset>
  <legend>Login</legend>
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
</fieldset>

12. Heading Group – hgroup

Groups a set of headings (like h1 to h6) when a heading has a subtitle or multiple levels. Helps with document outline.

Example:

HTML:

<hgroup>
  <h1>Main Title</h1>
  <h2>Subtitle</h2>
</hgroup>

13. Hidden Content – template

Stores HTML that is not rendered until used with JavaScript.

Example:

HTML:

<template>
  <p>This is hidden and not rendered.</p>
</template>

14. Highlight Text – mark

Used to highlight part of text, often shown with yellow background.

Example:

HTML:

<p>This is <mark>important text</mark>.</p>

15. Inline Quotation – q

Used for short quotations that are displayed inline. Browsers usually add quotation marks automatically.

Example:

HTML:

<p>She said, <q>Always write clean code.</q></p>

16. Inserted Text – ins

Used to mark text that was added later. Often shows as underlined.

Example:

HTML:

<p>This is <ins>new</ins> text.</p>

17. Keyboard Input – kbd

Used to show keyboard input, like shortcuts or key presses.

Example:

HTML:

<kbd>Ctrl</kbd> + <kbd>V</kbd>

18. Option Group – optgroup

Used to group related options inside a <select> dropdown, making it easier for users to choose from categorized lists.

Example:

HTML:

<select>
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Banana</option>
  </optgroup>
</select>

19. Program Output – samp

Represents output from a program, like an error or log message.

Example:

HTML:

<samp>Login failed: incorrect password</samp>

20. Progress Bar – progress

Shows progress of a task like loading or uploading.

Example:

HTML:

<progress value="40" max="100"></progress>

21. Ruby Annotations – ruby + rt + rp

Used in East Asian text to show pronunciation hints.

Example:

HTML:

<ruby>漢<rt>kan</rt>字<rt>ji</rt></ruby>

22. Shown If JS Disabled – noscript

Displays content only if JavaScript is disabled in the browser.

Example:

HTML:

<noscript>JavaScript is disabled in your browser.</noscript>

23. Subscript Text – sub

Displays text lower and smaller than the baseline, commonly used in chemical formulas or math expressions.

Example:

HTML:

<p>H<sub>2</sub>O</p>

24. Superscript Text – sup

Displays text higher and smaller than the baseline, often used for exponents or footnotes.

Example:

HTML:

<p>E = mc<sup>2</sup></p>

25. Time or Date – time

Represents a specific time or date, useful for events or timestamps.

Example:

HTML:

<time datetime="2025-05-18">May 18, 2025</time>

26. Value Within Range – meter

Displays a value inside a known range, like disk or battery levels.

Example:

HTML:

<meter value="0.6">60%</meter>

27. Variable Name – var

Used to show variables in math or programming context.

Example:

HTML:

<var>x</var> + <var>y</var> = 10

28. Word Break Opportunity – wbr

Suggests a possible break point in a long word or URL.

Example:

HTML:

www.example<wbr>long<wbr>word.com

• ← Previous
  Michael Jamin about comedy and drama
• Next →
  Vibe coding won't replace software engineers