HTML Oddities: Does the order of attribute values matter?

HTML elements can have attributes. For example id, class, src, alt, and many others. These attributes can contain values - an img element's src attribute has a value which is a link to an image. An id attribute's value is a single string. But some attributes can contain multiple values.

Here's a thought experiment for you. Consider these two HTML elements:

 HTML<p class="alpha bravo charlie">………</p>
<p class="bravo charlie alpha">………</p>

Is there any semantic difference between them? Does the ordering of the values inside the class attribute matter?

Both can be targetted with CSS like:

 CSS.bravo {
   color: red;
}

They can also be targetted using:

 CSS.charlie.bravo {
   color: green;
}

Or using a Selector List

 CSS.bravo, .alpha {
   color: yellow;
}

So order doesn't matter, right?

Well, it's a bit more complicated than that

Consider Presence Selectors.

This CSS will only select the first element:

 CSSp[class="alpha bravo charlie"] {
  font-size: 2em;
}

It targets the class name in that exact order. No other.

Similarly, Substring Selectors can be used in an order-specific manner.

This CSS will only select the second element:

 CSSp[class^="b"] {
  display: block;
}

It looks for a class attribute where the value starts with b

Where ordering matters

The HTML spec has a (non-normative) section on attributes. Those which accept multiple values are (broadly) in three categories.

1. A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more ASCII whitespace, where words consist of any string of one or more characters, none of which are ASCII whitespace.
2. An unordered set of unique space-separated tokens is a set of space-separated tokens where none of the tokens are duplicated.
3. An ordered set of unique space-separated tokens is a set of space-separated tokens where none of the tokens are duplicated but where the order of the tokens is meaningful.

The class attribute belongs to the first group. While ordering isn't meaningful, it also isn't irrelevant.

The only attributes which are specifically unordered are:

• All elements:
  • itemprop=, itemref=, itemtype=
• <link>, <script>, <style>
  • blocking=
• <output>
  • for=
• <td>, <th>
  • headers=
• <a>, <area>, <link>
  • rel=
• <iframe>
  • sandbox=
• <link>
  • sizes=

The only attribute specifically listed as "Ordered" is the accesskey attribute.

There are a few others which do require an order, although it is not immediately obvious.

Both imagesrcset and srcset require a "Comma-separated list of image candidate strings". The comma separated strings can be in any order, but the text within them has a strict ordering.

For example:

 HTML<img srcset="header640.png 640w, header960.png 960w, header1024.png 1024w" …

Similarly, the type attribute requires its value to be a valid MIME type. But MIME types can also include a codec. So it's possible to end up with HTML like:

 HTML<video>
  <source 
    src="movie.webm"
    type="video/webm; codecs='vp8, vorbis'">

Assuming those attributes were whitespace separated tokens would lead to nonsense!

The autocomplete type is another complex example. The spec just says "Autofill field name and related tokens", but MDN makes it clear that it requires:

An ordered set of space-separated tokens consisting of autofill detail tokens preceded by optional sectioning and either billing or shipping grouping tokens. Phone numbers, email addresses, and messaging protocol tokens are preceded by a token identifying the type of recipient.

For example autocomplete="home email" says to suggest the user's home email address whereas autocomplete="work email" suggests their work email. The ordering is necessary and autocomplete="email home" will not be understood.

Where else might ordering matter?

Rather obviously, alt text should always remain in order. No one wants to read alphabetically ordered image descriptions!

As mentioned by Nathan Knowler some ARIA attributes require ordering for accessibility.

And, as Kagan MacTane pointed out, sometimes the ordering is important for a human - even if it is irrelevant for a machine.

What have we learned today?

I originally asked this question on Mastodon. About two-thirds of respondents thought that attribute ordering was irrelevant.

Post by @Edent@mastodon.social

View on Mastodon

I hope I've demonstrated that it is slightly more complicated than it may appear at first.