How many tags can I name?

A quickie online HTML tag quiz has been making the rounds. I got about half of the tags on the first pass, and almost three-quarters on the second — while forgetting many of the elements I listed during the first pass.

For guys like me challenges like this verge in some respects towards irrelevance, because…

When you’re using CSS for your presentation layer, you don’t need that many elements in your markup

Solid knowledge of CSS obviates a lot of elements, leaving the producer with only a few that are essential:

1. Document structure: html, head, title, and body
2. Document metadata: link and script
3. Headings: h1…h6
4. Containers: div, span, and p
5. Lists: ol, ul, dl, li, dt, and dd
6. Links: a
7. Emphasis and de-emphasis: em, strong, big, and small
8. Forms: form, input, select, option, and textarea

To that producers working on diverse projects might add a few more:

9. Images: img
10. Plug-in content: object and param
11. Quotes and sources: blockquote, q, and cite
12. Data tables: table, tr, th, td, and col

Once you open the book of document usability and cross-media accessibility, things start to telescope a bit:

13. Parent element metadata: legend and caption
14. Form control helpers: fieldset, label, and optgroup
15. Table containers: thead, tbody, and tfoot
16. Acronyms and abbreviations: acronym and abbr

…These three lists comprise 50 of the 91 elements officially supported in HTML 4, and the core of the namespace occupies only a third of the total.

What I omitted altogether, and why

• base and style

  You only truly need these elements if the behavior of your publishing platform encourages or requires it.

• applet

  The inline-Java train left the station in 1998, boys and girls.

What I relegated to the secondary lists, and why

• img

  A picture may be worth a thousand words, but it’s been my experience that on most sites, images rarely comprise principal content. Getting full mileage out of the CSS background attributes is often more structurally/semantically appropriate.

• legend and caption

  If you’re on top of your editorial game, these roles are often (though not always) handled by headings.

• fieldset

  This is too easily abused … hell, even I abuse it because there’s no easy way to sequester label-control pairs. I’m not convinced that the design oversight doesn’t make div equally applicable.

• label

  Have you ever noticed that this element is only truly useful if you have a pointer input device? Yeah, me too.

• optgroup

  Though not actually obscure, the scope of this element is limited to situations in which the best alternative would be to use empty options as separators.

• Table containers

  As currently implemented, these acquire their greatest usefulness in paginated media — so using them is simply a signal that you’re really on top of your cross-media accessibility game.

• acronym and abbr

  Between their relative obscurity, their uneven implementation across user agents, and their limited scope, these really cannot be considered part of a core toolset.

The point to this dissertation (other than the fact that I’ve often thought of prettifying it and submitting that prettified version to A List Apart) is that… folks, HTML ain’t rocket science, folks. At least, not by itself.