HTML has a whole lot of tags, most of these are rarely used. Here are some that I particularly like and actually use sometimes.
Display keyboard keys more meaninfully with the
Use it to diplay keyboard shortcuts for your app for example. Bonus points if you style them like a physical key!
Check out Key Shortcuts I Know But Rarely Use note to see it in action.
⌘ + ⇧ + A
The description list is a list for key-value pairs. This trio makes a great descriptive list, here a tiny meta demo
A description list:
<dt>‘description term‘ element
<dt>‘description definition‘ element
- It can even have multiple descriptions for one term!
- Or multiple descriptions
- On in plain language: multiple keys
- For one or multiple terms
I bet this is the most unknown of the three HTML lists. I don't think it's used all that much. I keep finding it useful, my only critique is that styling it can be a little awkward.
My solution is usually making the
<dl> a flex container and giving the
flex-basis that add up to 100%. I think CSS grid would be good here too.
I've seen some select that group
<option>s by prefixing the category.
That works, but the
<optgroup> is nicer, use
<optgroup> to group
<option>, label it with the
disable on the
<optgroup> to disable all its children (not sure iOS handles this right).
list attribute on
<input> can refer to a
<datalist> by its
Seems to only accept hex codes, which is unfortunate.
<caption> on a table to give it a table title,
caption-side: top | bottom to place it
<span> with some CSS to highlight some text? Stop that right away, that’s what
<mark> is for!
Oh hi Mark.
<blockquote> is pretty well–known, it's inline brother
<q> less so.
cite attribute on
<q> to include the source of the cited material.
CSS-tricks has more: Quoting in HTML, quotations, citations and blockquotes
This is one weird element. The
<ruby> element is to annotate text, it even has its own layout mode with a couple of CSS properties specific to it:
ruby-align is supported only in Firefox so far.
This the origin of its name:
The term ruby originated as a unit of measurement used by typesetters, representing the smallest size that text can be printed on newsprint while remaining legible.
This is what the spec has to say about it
So I guess it can be used anywhere in prose for small annotations.
Here are other potential uses than guides for pronouncing East Asian languages
The authors thought and emotion? Anger? Surprise? Short bonus content like side thoughts, to give text a personal touch. You may have noticed emoji works too.
Code and math annotations that explain the symbols
A = π × r 2
const [openMenu, setOpenMenu] = useState("edit")
Times and dates are ubiquitous, most pages that show a time or data should use
<time>, not all.
<time> element can help mobile OS's perform an action on the content, like add it to a calendar. 
CSS tricks has more.
These are similar.
title attribute to the
<dfn> tag to make the browser show a native tooltip on pointer over.
Als note that the definition element represents the term that is being defined, rather than the definition itselfETA HTML element