HTML Elements Visualized

Published Last updated v1.0.1

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 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 each element. 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 is 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 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 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 text? 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).

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 is a very useful feature to add suggestions for all kinds of input types, without any JavaScript!

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

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.

MDN: The Ruby Element

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.
HTML Spec: The Ruby Element

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:

  1. Chords

  2. Synonyms?

  3. 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(🆒).

  4. Code and math annotations that explain the symbols

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

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

  1. Footnotes?

<blockquote> is pretty well–known, it’s inline brother <q> less so. The cite attribute on <blockquote> or <q> can be used to include the source of the cited material.

<fieldset> is used to group several inputs and their labels within a form. Use <legend> to give the group a caption, this has be it’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 in the <legend> element won’t be disabled.

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