Jens Oliver Meiert

Get 15% off on select books on Gumroad—use discount code “testdrive”.

HTML Concepts: Common Idioms

Post from November 2, 2021 (↻ August 26, 2022), filed under .

Welcome to another brief post in the “HTML Concepts” series. Today we’re going to look at common idioms: popular design patterns for which HTML doesn’t have dedicated elements, but makes suggestions.

You’re noticing that this isn’t strictly speaking a “concept”; but as this section of the specification is as commonly overlooked as it’s useful, I found it relevant to cover.

The 4 Idioms

Breadcrumbs

Despite being a popular pattern, there is no element for breadcrumbs in HTML. The spec acknowledges this by suggesting the nav element to be used for this purpose:

<nav>
  <p>You are here: <a href=/>Home</a> → <a href=/examples>Examples</a> → Example
</nav>

The spec doesn’t give examples for using lists for this purpose, but there are attempts in that direction, and using lists is probably fine. (Personally, I don’t find them suitable for breadcrumbs, but I stopped arguing against everything.)

Tag Clouds

For tag clouds the HTML spec gives the advice any experienced frontend developer would give: Use a list, and classes for popularity-related styling.

<ul>
  <li><a href=/tags/tag>tag</a>
  <li><a href=/tags/taggy>taggy</a>
  <li><a href=/tags/tagtag>tagtag</a>
  <li><a href=/tags/taggidytag>taggidytag</a>
  <!-- … -->
</ul>

You see how I omitted classes here. I did this because I’d base the decision on what markup to use on the complexity and number of levels of the tag cloud.

If there were, for example, 3–5 levels, I’d suggest to express the importance of the more popular tags through markup: For example, use strong elements for the most popular tags, em for the next most popular ones, and no markup for “normal” tags. Working with more elements (like span) and combining elements can help spawn more tag levels, and style these accordingly.

If there are many more tag levels, I might use a numbered scheme like the spec does, but I could also think of names like popular, widespread, frequent, rare, names like that, to portray tag frequencies. Sure, you probably want to prefix these following a methodology of your choice.

Conversations

For conversations, the spec describes and discusses several options. I’m an HTML minimalist and recommend the simplest option: Use paragraphs.

<p>Alice: HTML is awesome.
<p>Bob: Especially if it’s valid!
<p>Alice: Especially then.
<p>Bob: Let’s make sure we always write valid HTML!
<p>Alice: That’s what I’ve been telling you the entire time, Bob.
<!-- … -->

Footnotes

HTML has no markup for footnotes, either. Here, too, does the spec promote a few options. My favorite—and my recommendation–is to use internal links to paragraphs following the respective content (you see my own handling of footnotes in a recent article).

<p>There’s no Google homepage that uses valid HTML <a href=#fn1><sup>[1]</sup></a>.
<!-- … -->
<p id=fn1><sup>[1]</sup> except for <a href=https://www.google.cn/>google.cn</a>

❧ These are the “common idioms” in HTML, as of the end of 2021. I think this is a mildly strange section that could benefit from “TLC.” On the one hand, we could review the different cases and perhaps trim them; for example, with title coming with accessibility problems, why maintain the idea it was appropriate for footnotes? On the other hand, we could gather feedback from developers on what elements they miss in HTML, and give guidance on those.

That’s it—see you again soon, in another episode of “HTML Concepts.”

About Me

Jens Oliver Meiert, on September 30, 2021.

I’m Jens, and I’m an engineering lead—currently manager for Developer Experience at LivePerson—and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!

Read More

Maybe this is interesting to you, too:

Looking for a way to comment? Comments have been disabled, unfortunately.

Cover: The Web Development Glossary.

Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

Stay up-to-date? Learn about new posts by feed or on Twitter.

Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2021 → HTML Concepts: Common Idioms

Last update: August 26, 2022

Professional frontend developers produce valid HTML and CSS.