HTML Elements Visualized

There are a lot of HTML elements, over 110!(wow!). This is an old side project of mine; it’s a sort of explorable map for all the modern HTML elements, organised and visualized in a in clear overview.

But I got stuck, lost interest and then forgot about it. I figure I’d just post it here instead of letting it languish.

Or open it in its own tab.

HTML is a fairly simple . It’s what webpages are made of.

HTML is composed of elements. Different elements have different purposes and meaning. Some elements can be applied to pieces of text to give them different meaning in a page. Other elements can be used to embed interactive input, images or videos, or other types of content, and some elements have no meaning at all.

There are many rules on how elements can be used. Some elements, like <body> or <main> can only occur once in the document. Other elements, like <input> can not contain child nodes. Some elements really can’t be nested in other elements, for example an <article> can’t directly go in a <table>. And the other way around, some elements can only occur within certain elements; a list item <li> can only appear in a list, <ul> or <ol>. There are many more rules like that.

Elements can be configured by adding attributes. There are global attributes that can be added to every element. But many elements also have their own specific attributes, which often can be only certain types of value. For certain elements, their behavior varies on what attributes are set (looking at you, <link>). Certain attributes can only have a set of specific allowed values.

There really is a lot more to HTML than most people think. HTML is really easy to get started with, it’s very forgiving, you can write bad HTML and it will appear on screen ‘fine’ but it might be incorrect for other reasons.

It’s worth knowing HTML well, it’s important to give the content the right meaning. This helps people using keyboards and assistive technologies to navigate through a page.

So the goal of this explorable is to present all HTML elements and their attributes in a visually structured way. An additional goal is organising quality content on the elements & attributes that I collected over time. If you come away having learned a few new elements or attributes, I’m satisfied!

Things I didn’t get to

When I started this I had high goals for it. But, as happens with side projects, I lost interest after a while. I really don’t have the motivation to work on it anymore so I’ll just call it done and publish it here.

Here’s a list of the things I had in mind but didn’t get to:

Special tweaked tabular structure for the <table> element circle
Displaying attribute values
Color coding attributes by type
Color coding attributes values by type
Keyboard navigation and accessibility
Design polish
Add tag filters to highlight related elements, for example elements highlight all elements for quoting
Better animations and interactions.
Highlighting which elements can be nested in an element when it’s hovered.

An inexhaustive list of things I learned while making this.

Using a <span> with some CSS to highlight some prose? Stop that right away, that’s what <mark> is for!

The <caption> element is for giving a table a title, with the single-purpose CSS property caption-side it can be placed at the top or bottom of the table.

Use <optgroup> to group (surpise!) <option>s and label the group with its label attribute. Add disable on the <optgroup> to disable all its children (not sure iOS handles this right).

Units

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!

⌘ + ⇧ + A

The list attribute on <input> can refer to a <datalist> by its id. It is a very useful feature to add suggestions for all kinds of input types, without any JavaScript!

Enter your favorite HTML element

This seems to only accept hex codes as values, which is unfortunate.

Pick a color for the color scheme:

This is one weird element that I always glossed over. 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:

Chords
Synonyms?
The authors thought(hmmmm) and emotion? Anger? Surprise(Aaaaaah)? Short bonus content like side thoughts(I’m starting to like this element), to give text a personal touch. You may have noticed emoji works too(🆒).
Code and math annotations that explain the symbols

A(circle area) = π(pi) × r(radius) ²

const [openMenu(the state variable), setOpenMenu(state-setter function)] = useState(React state hook)("edit"(the initial value))

Footnotes?

<blockquote> is pretty well–known, its inline brother <q> less so. The cite attribute on <blockquote> or <q> can be used to include the source of the cited material. CSS-tricks has more on these: Quoting in HTML, quotations, citations and blockquotes

<fieldset> is used to group several inputs and their labels within a form. Use <legend> to give the group a caption, it has be the <fieldset>s first child.

Note that <fieldset> has unusual default styles, also the <legend> element does not participate in <fieldset>’s layout box.

If disabled attribute is set, all inputs in that <fieldset> are disabled and won’t be submitted along with the <form>, which is neat. For some reason, this won’t disable an input element inside the <legend> element itself.

See Use Legend and Fieldset by Adrian Roselli or Using the fieldset and legend elements by the gov.uk folks.

Times and dates are ubiquitous, most pages that show a time or data should use <time>, not all.

The <time> element can help a mobile OS perform an action on the content, like add it to a calendar. [citation needed]

CSS tricks has more.

These two are very similar. Adding a title attribute to one of these make the browser show a native tooltip on pointer over and adds meaning to the element.

Also note that the definition element represents the term that is being defined, rather than the definition itself

ETA HTML element

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

As I don’t plan to work on this anymore I decided to publish the source. View it on GitHub.