My Favorite HTML Elements & Attributes
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 <kbd> tag!
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: <dl>
- The
<dt>‘description term‘ element - The
<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 <dt> & <dt> a flex-basis that add up to 100%. I think CSS grid would be good here too.
Read On the <dl> by Ben Meyers for more on the <dl>.
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 label attribute.
Add disable on the <optgroup> to disable all its children (not sure iOS handles this right).
The list attribute on <input> can refer to a <datalist> by its id.
It is is a very useful feature to add suggestions for all kinds of input types, without any JavaScript!
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
Using a <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.
Use the cite attribute on <blockquote> or <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 and ruby-position.
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
The ruby element allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations. In Japanese, this form of typography is also known as furigana.
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
-
Synonyms?
-
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.
The <time> element can help mobile OS's perform an action on the content, like add it to a calendar. [citation needed]
CSS tricks has more.
These are similar.
Add the title attribute to the <abbr> and <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 itself
ETA HTML element