Decorative text within HTML

Back in 2020, Andy Bell introduced me to the idea of grouping attribute values.

You've probably seen something like this before:

 HTML<article
  class="card-section-background1-colorRed"
></article>

A single class over-encumbered by all sorts of things. The more modular way to write this would be:

 HTML<article
  class="card section box bg-base color-primary"
></article>

That's pretty good! Each one of those classes can have its own bit of CSS and everyone is happy. But… sometimes it is hard to spot the gaps. Is that a - or a spec of dirt on your screen? Is there a way to make it more visually obvious what the groupings are?

Andy proposed this:

 HTML<article
  class="[ card ] [ section box ] [ bg-base color-primary ]"
></article>

Or, if you don't like brackets, this:

 HTML<article
  class="card | section box | bg-base color-primary"
></article>

The nice thing about attributes values is that they can contain any character. The spec says:

An attribute value is a string. Except where otherwise specified, attribute values on HTML elements may be any string value, including the empty string, and there is no restriction on what text can be specified in such attribute values.

Obviously there are some little gotchas. Quotes may need to be encoded, and some attributes only take specific variables. For the class attribute, however, the spec says they can have:

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.

If a string isn't referenced within the CSS, it is simply ignored. So let's get creative!

Space Cowboy

You can space your variables however you like. These are all perfectly valid and (might) be easier for a human to read.

Separating out primary and secondary classes:

 HTML<article
  class="card             section box  bg-base color-primary"
></article>

Newline classes:

 HTML<article
  class="card
         section
         box
         bg-base
         color-primary"
></article>

Vertically aligned classes:

 HTML<article
  class="card 
            section
            box
         bg-base 
            color-primary"
></article>

Specific call-outs

Remember, you can have any text in your class names. If you need to highlight something specific to a human, you could use emoji:

 HTML<article
  class="card ➡️ section box ⬅️ bg-base color-primary"
></article>

Or

 HTML<article
  class="card 👉 section box 👈 bg-base color-primary"
></article>

Unicode Abuses

Unicode contains lots of mathematical symbols which look like letters but aren't. You could write something like:

 HTML<article
  class="𝐜𝐚𝐫𝐝 𝑠𝑒𝑐𝑡𝑖𝑜𝑛 𝒃𝒐𝒙 𝘣𝘨-𝘣𝘢𝘴𝘦 c𝐨l𝐨r-p𝐫i𝐦a𝐫y"
></article>

But I wouldn't recommend it; you would need to change your CSS to target those particular values.

Commenting

All code should be self commenting. HTML allows <!-- comments in code --> but there's nothing stopping you from adding comments inside values.

 HTML<article
  class="
    'Cards_updated_with_2025_setting'
     card
    //section_box_to_be_deprecated_next_year
     section box
    #Colours_set_in_primary.css
     bg-base color-primary"
></article>

I'd suggesting using underscore spacing to keep things readable and avoid having words which are accidentally class names.

Or, go artstic:

 HTML<article
  class="
     / \
    / _ \
   | / \ |
   ||   || _______
   ||   || |\     \
   ||   || ||\     \
   ||   || || \    |
   ||   || ||  \__/
   ||   || ||   ||
    \\_/ \_/ \_//
   /   _     _   \
  /               \  Don't change this
  |    0     0    |  code without first
  |   \  ___  /   |  speaking to Sam 
 /     \ \_/ /     \ in front-end.
/  -----  |  --\    \
|     \__/|\__/ \   |
\       |_|_|       /
 \_____       _____/
       \     /
       |     |
     card section box bg-base color-primary"
></article>

Yes. That is perfectly valid HTML. It may not be sensible, but it won't cause any problems in the browser. It might make people grumpy though.

Caveats

There are a few things to be aware of here:

• Optimisers might strip spaces.
• Pre-processes might re-order values.
• This is unusual and humans might get confused.