This is simply a catalogue of HTML elements and an example of somewhere I’ve used them, if I have ever used them.
I got the full list of elements from the sidebar of MDN’s documentation, then added <math> and <svg> (which are part of MathML and SVG respectively but can be used to embed those formats in HTML).
If I’ve created an element using Markdown or some UI library that doesn’t involve me explicitly typing out the HTML tags, I don’t consider myself to have used it.
I will probably update this page (perhaps using <ins> elements) if I use an element I haven’t used before.
Of 137 elements, 27 are deprecated and 1 is experimental. The other 109 I consider to be usable, if the right opportunity presents itself. Some elements are very esoteric and there is no need for a web developer to have used all of them. But I find it interesting to keep count; I’ve used 86.
<a>The element that puts the “hyper” into HyperText Markup Language, this is on pretty much every webpage I’ve ever made.
<abbr>
Here’s an example of this element: UK.
The code for that is <abbr title="United Kingdom">UK</abbr>.
On desktop, you can mouse-over the element to see the title. On a mobile device, you can’t do that, so it’s not very useful. So I generally prefer to write out abbreviations in the text, without a special element, as in “I live in the UK (United Kingdom).”
But the header of my Latin dictionary, velut, has both approaches, with one expansion of the abbreviation in English and one in Latin:
<p>
<abbr title="Useful Tables of Excellent Latin Vocabulary">
velut
</abbr>
</p>
<p lang="la">
Vocābulōrum Excellentium Latīnōrum Ūtilēs Tabulae
</p>(As an extra nicety, both expansions also appear in the text of the “About” page of velut. Mobile-users who can’t read Latin can understand the abbreviation from there.)
<acronym> (Deprecated)I’ve not used this. I guess I could have used it for the “velut” example above, if it weren’t deprecated.
<address>I’ve not used this, but it’s the tag I’m the most surprised that I haven’t used. Somehow I’ve not needed an element to wrap contact information, such as an email address or social media links (or indeed a street address).
My GitHub profile readme ends with some contact information, including my city, LinkedIn profile, and personal website.
I tried wrapping it in <address> just for the sake of it, but GitHub stripped out the tag when it rendered the file.
<applet> (Deprecated)I’ve not used this; it’s deprecated.
<area>
Years ago I made a graphic with clickable regions, using <area> and <map>.
I’ve not done anything similar since.
<article>I use this on my personal website, because I need an element for grouping the heading and paragraphs within each section.
<aside>
The “This article was written…” box at the top of my blog-posts is an <aside> element.
<audio>I’ve not used this.
<b>It’s used for the example results in the labels on the form for the Advanced Search page on velut. I wanted bold styling, but not for emphasis, merely to mark the text as being different to its surrounding text.
<base>
Very useful whenever I’m displaying a mini-website on a subpath of www.DuncanRitchie.co.uk, such as <base href="/blog/" />.
<bdi>I’ve not used this.
<bdo>I’ve not used this.
<bgsound> (Deprecated)I’ve not used this. It’s deprecated, and I wouldn’t want weird noises playing in the background while I’m looking at a webpage.
<big> (Deprecated)I’ve not used this; it’s deprecated.
<blink> (Deprecated)I’ve not used this; it’s deprecated.
<blockquote>
I’ve used this in Markdown for documentation at my work, where I accompanied with a pure HTML <cite>.
My most recent Eurovision article has it in pure HTML, but without <cite>.
<body>Nobody will be surprised to hear I’ve used this, on every HTML page.
<br>
I use this twice in the header of velut: between “Duncan Ritchie’s” and “velut”, and in the Latin expansion of the acronym (between Vocābulōrum Excellentium
and Latīnōrum Ūtilēs Tabulae
).
It’s a clean alternative to messing around with CSS and <span>s, which is what I would probably do if I wanted the text on one line at some screen-sizes and on two (or more) lines at others.
<button>Yep, I’ve definitely used this. The first use of it on this blog is for the filters on this list.
<canvas>I’ve not used this.
<caption>
Despite running a website called Useful Tables of Excellent Latin Vocabulary, I’ve not made enough HTML tables to need any <caption> elements.
<center> (Deprecated)I’ve not used this; it’s deprecated.
<cite>
This can go with <blockquote>, to mark up the source of a quotation.
I have done so on occasion.
<code>
The code-snippets on this page are all within <code> tags.
<col>I use this on velut, though it’s inside a component that is not yet publicly visible (as of the time of this edit). Here’s a whole article about it.
<colgroup>
<col> elements need to be wrapped in <colgroup> for valid HTML.
That’s the context I’ve used it in.
(Apart from making HTML valid, the point of <colgroup> is for formatting a set of table columns, rather than a particular column.
And it can have a span attribute instead of <col> children, if individual columns don’t need to be targeted.
The <col> element can also have the span attribute, if its parent <colgroup> doesn’t.
I haven’t yet wanted to do any of that.)
<content> (Non-standard Deprecated)
What even is this element?
I’ve never heard of it!
According to MDN, it’s an obsolete forerunner to the <slot> element in Web Components.
The more you know.
<data>
I’m using it on this page!
The statistics at the top of this page are wrapped in <data> tags that have value attributes that serve as keys.
Then I have JavaScript that checks that the visible text matches the appropriate value for the value attribute.
This helps me keep the numbers in sync with the list of tags.
For example, <data value="deprecated">27</data> gets checked against a JavaScript variable called deprecated, which is the number of deprecated HTML tags in this list.
You’ll get a message in your browser’s console if this isn’t 27.
(Is it weird that I’m using value attributes to specify keys for getting values, rather than the values themselves?
Probably.
But it works well enough, and seems to fit within the purpose of the <data> tag.)
Of course, if I were using React or some other front-end library for rendering this page, I wouldn’t need to check the numbers like this and update them manually. But I like that I have a vanilla-JS solution here. And I could use JavaScript to set the text to the correct values, but I like that the content of this page is the same regardless of whether you have scripting enabled in your browser.
<datalist>
I’ve not used this.
Within a <select> element, a series of <option>s is a decent alternative.
<dd>
I’m a big fan of description lists.
This text is inside a <dd> element right now!
<del>I’ve used this at work, for example for bits of documentation that are no longer current.
<details>
The “How to use” section of the Advanced Search page on velut is hidden in a <details> element, so you don’t see it until you open the <summary>.
<dfn>I don’t use the definition element on my own Latin dictionary (maybe I should!), but I do use it on the Neo-Latin lexicon (Latinitas Recens) that I created a mirror for, earlier this year.
<dialog>This is a newer element, and I’ve not used it yet.
<dir> (Deprecated)I’ve not used this; it’s deprecated.
<div>It’s the generic block-content element; yes I’ve used it.
<dl>All this text is in a description list here.
<dt>And this text is under a description term.
<em>Another element so common I really don’t want to give a particular example here.
<embed>I’ve not used this.
<fieldset>
My first use of <fieldset> and <legend> on this blog was when I made flags with CSS.
The fieldset wraps a set of radio buttons that change the flag design.
<figcaption>This is very useful for captioning figures, for example the pictures accompanying the sections on the www.DuncanRitchie.co.uk main website.
<figure>Yes, I’ve used it.
<font> (Deprecated)I’ve not used this; it’s deprecated.
<form>
Every page on velut has a <form> element for searching.
<frame> (Deprecated)I’ve not used this; it’s deprecated.
<frameset> (Deprecated)I’ve not used this; it’s deprecated.
<h1>
I used <h1> through to <h4>, but I don’t think I’ve ever used <h5>.
And of course I wouldn’t use <h6> without <h5> above it.
<head>It’s in every HTML page.
<header>
I’m using this on velut (along with <footer>), and I intend to use it at work.
<hgroup>Maybe I should be using this for the headers for the lists of my projects on my website. I’m not at the moment.
Update: I’m now using it for that purpose!
<hr>I’ve not used horizontal rule elements on webpages, but I made some email templates for work that used them.
<html>Yep, I’ve used this.
<i>I’ve used this a lot, including on this blog, for text in foreign languages that I want italicised.
<iframe>I’ve used this at work in a prototype.
<image> (Non-standard Deprecated)
I’ve not used this: <img> has been the standard element for images pretty much for ever, as far as I’m concerned.
<img>Yep, I’ve used this.
<input>Yep, I’ve used this.
<ins>I’ve used this on markdown documents, such as my plan for re-architecting my Latin dictionary.
<kbd>It marks up the word “Ctrl” on my Dictionary Links for velut page. And I’ve used it elsewhere.
<keygen> (Deprecated)I’ve never used this; it’s deprecated.
<label>
I don’t use <label> on the main search form of velut (I don’t think it’s needed, even for accessibility), but it’s an important element for forms generally.
I get a lot of use out of it.
<legend>
As I mentioned above, I used this and <fieldset> in my CSS flags article.
<li>
The list item is a very common element.
I’ve used it in ordered and unordered lists, but not <menu>.
<link>This is another tag that’s on pretty much all my webpages, because having CSS in .css files and not directly in the HTML is a good idea.
<main>
I don’t use <main> on the main pages of DuncanRitchie.co.uk (homepage, my code, more about me).
But I do use it on a lot of my other pages, including all across this blog.
<map>
As noted above, I’ve used <map> and <area>, but it was several years ago.
<mark>The first time I used this was on my Latinitas Recens mirror, for highlighting the word you searched for in the lexicon entries.
<marquee> (Deprecated)I used this on my article about animating panoramas, as a bit of a joke.
<math>I’ve never used any MathML elements (MDN lists several), but if I were marking up complicated maths expressions in HTML, then I would.
<meta>
This is an element that there should be at least one of in every <head>.
<meter>So far the only time I’ve used this is for the graph at the top of this blogpost, showing the proportion of HTML elements that I would consider using!
<nobr> (Deprecated)I’ve never used this; it’s deprecated.
<noembed> (Deprecated)I’ve never used this; it’s deprecated.
<noframes> (Deprecated)I’ve never used this; it’s deprecated.
<noscript>
A cunning use of <noscript> is in the page on velut that allows you to search for many Latin words at once.
This page has a client-side–rendered version that runs if your browser supports JavaScript, and a server-side–rendered version that is used if you don’t have JavaScript.
One of the form inputs is hidden (so you never see it) and wrapped in <noscript> (to disable it when JavaScript is supported).
When the form is submitted, the presence or absence of this field determines whether the page should be rendered server-side or not.
<noscript>
<input hidden name="ssr" value="true" onChange="void()" />
</noscript><object>I’ve never used this.
<ol>The good ol’ “list with explicit ordering” element. I’ve only used it in Markdown, for instance on my blogposts where I rank Eurovision entries.
<optgroup>
I’ve not built dropdown inputs for forms that are complicated enough to need their options to be grouped, so I’ve never used <optgroup>.
<option>I’ve used this on velut (for the types of rhyme you can search for) and at work.
<output>
The first time I made a form with this element was for my CSS flags article, which was published after I wrote this list.
I have sliders for controlling the flag animation and I display the value of each slider in an <output> element beside it.
<p>Yes, I write in paragraphs.
<param> (Deprecated)I’ve never used this; it’s deprecated.
<picture>This is very useful if I want different sizes of an image to load for different sizes of screen — a smaller picture on mobile, larger on desktop, etc.
<plaintext> (Deprecated)I’ve never used this; it’s deprecated.
<portal> (Experimental)I’ve never used this; it’s experimental.
<pre>I’m using it on this page (and on other pages) for blocks of code.
<progress>
There’s a <progress>-bar on the JavaScript (client–side—rendered) version of the “Look-up of many words” page on velut.
It goes from 0 to 100% as the words load on the page.
There is also a <progress>-bar at the top of this page.
I intend to update it whenever I use a HTML element for the first time.
It might never get to 100%.
<q>
An upcoming blogpost includes <q> elements, because I’m quoting text.
<rb> (Deprecated)I’ve not used any of the “Ruby” elements for marking up the pronunciation of East Asian characters — I’ve never worked with Taiwanese writing (etc). And this element is deprecated, so that’s another great reason for me not to have used it.
<rp>Another Ruby element. Not deprecated, but I’ve still not used it.
<rt>Another Ruby element I’ve not used.
<rtc> (Deprecated)It’s a Ruby element and it’s deprecated. That’s a no from me.
<ruby>This is the element to surround any other Ruby elements and the East Asian characters they explain. I’ve not used it.
<s>
I’ve used <del> for text that was on a page because it was relevant when it was written, but is no longer current after an edit.
I’ve not used
Oh look, I’ve just used it now!
<s> (or its obsolete variant <strike>).
Maybe I should use it in the future.
<samp>I’ve used this on my blogpost about Vim. I’ve also used it in documentation for some things related to my Latin dictionary, such as my Word Data Generator.
<script>Of course I’ve used this.
<search>
This tag was announced in search has a corresponding HTML tag, which means it is pretty much equivalent to <div role="search">.
I’ve not used this element.
On velut, I use <form role="search">, which gives me native HTML form behaviour and the correct Aria role in one element.
This is equivalent to wrapping <form> in <search>.
Swapping the <search> element in is an easy change to make, but there’s not a lot of benefit.
<section>I’m very fond of this element. It’s not used on this blog, but I use it a lot elsewhere.
<select>It’s the dropdown-menu on the homepage of velut (and on all the word pages on velut too).
<shadow> (Non-standard Deprecated)I’ve never used this; it’s deprecated.
<slot>
I like the idea of Web Components.
JavaScript frameworks like Angular and React* are very popular, but can often be overkill.
If Web Components can reduce developers’ reliance on such frameworks, that might be cool.
Unfortunately, they seem like a faff to set up, and they’re such a new thing that I doubt many developers have learnt how to use them.
I certainly have never made a Web Component, so I’ve never used <slot> inside one.
But!
I converted this blog to use the Astro framework, and that uses <slot> elements.
So now I have used them.
<small>
DuncanRitchie.co.uk has a 404 page that appears if the URL is mistyped.
The words “404 error” in the heading are <small>, because it’s technical information that supplements the more layperson-friendly “Page not found” text.
<source>
I’ve used this inside <picture> elements to specify alternative sizes for images.
<spacer> (Deprecated)I didn’t know this element existed (or used to exist), until I wrote this blogpost. I’ve never used it; it’s deprecated.
<span>Yes, I’ve used it frequently.
<strike> (Deprecated)I’ve not used it; it’s deprecated.
<strong>
Why would you use <b> for emphasis when <strong> is so much better?!
<style>
This is useful when I don’t want to put some CSS in a file separate to the HTML.
For example, I use them in Eleventy Astro when making this blog.
So I’m using <style> elements here.
I also use it on the 404-page of DuncanRitchie.co.uk.
<sub>Have I used this in some documentation at work? Maybe, maybe not. I’m surprised, because expressions like “CO2” aren’t exactly obscure. There, I’ve used it now.
<summary>
The “How to use” section of the Advanced Search page on velut is hidden in a <details> element, so you don’t see it until you open the <summary>.
<sup>
As with <sub>, I might have never used it on personal web things.
But I’ve almost certainly written “O(n2)” and suchlike at work.
Or did I use Unicode ordinal characters — “O(n²)” — instead?
(I don’t know why I would have done that.)
I’ll count <sup> among the elements I’ve used.
<svg>I’m pretty sure that I have used inline SVG in a HTML document, even if it was just in a prototype for work. But I’m more likely to have separate SVG files.
As with MathML, SVG has its own tags — here’s the MDN documentation for <svg>.
<table>I don’t write HTML tables very often, but I have done so.
<tbody>I’ve used this at work to wrap the non-header rows of a table.
<td>Yep, on the rare occasion that I make a HTML table, that table has cells.
<template>
I’ve never explicitly used a <template> element.
<textarea>Yep, I’ve used it, both at work and on several things related to my Latin dictionary.
<tfoot>No, I’ve never made a table with the bottom rows in a special element.
<th>
I only recently learnt that <td> should be replaced with <th> when inside <thead> (or when it’s otherwise a header cell).
But I have now used it, and written CSS targeting it.
<thead>
I can’t find or remember where I’ve used a <thead> element, but I’m pretty sure I have.
I’m counting it.
<time>I use it on the dates for code-projects on my website, and for the dates of my posts on this blog.
<title>Every webpage should have a title. Yes, I’ve used it.
<tr>Yep, on the rare occasion that I make a HTML table, that table has rows.
<track>
This would be for specifying subtitles for audio- or video-players.
I’ve never used <audio> or <video>, so I’ve not used <track> either.
<tt> (Deprecated)I’ve not used this; it’s deprecated.
<u>I’ve not used this. I don’t really like underlining things that aren’t hyperlinks, and even when I do underline something, I would just use CSS to make that happen, because I would already have a different element to apply the style to.
The MDN documentation suggests using <u> to mark spelling mistakes in user-submitted text.
The closest thing I’ve ever done to that sort of use-case is (again) the “Look-up of many words” feature of velut.
If the user entered a Latin word that is in my dictionary, a hyperlink is generated for that word; but if the word has not been found, the word appears without a hyperlink.
I suppose I could use <u> to mark those words that are not in the dictionary.
But I don’t need to, so I probably won’t.
<ul>
I like to use <ul> inside <nav> for navigation-menus.
<var>
This is the element for algebraic variables.
I’ve not used it.
For variables in computer code, I would use <code>.
<video>I’ve not used this.
<wbr>I used this on a blogpost earlier this year, because I had written some words with slashes between them and I wanted to allow line-breaks after the slashes.
<xmp> (Deprecated)I’ve never used this; it’s deprecated.