Respect the title Attribute

You’ve read the short intro, and the first thing you’re about to witness are equally short chapters. The way this will work is that for each chapter there’s a theme, announced in the title, for which I’ll provide code from an undisclosed live website that I’ll make remarks and recommendations about.

This snippet, taken from a U.S. news site, is interesting in many ways. There are overt and covert lessons to be learned. An example for an overt lesson? It would probably be smart to drop name=politics, or to use an id. A covert lesson? mode=dark and type=expanded smell and need examination. On the sparse information we have we can’t tell. Another overt one? The class names are poor, viewed from any naming school of thought—for all their verbosity that has already been pushed through some tool chain they say way too little.

The point, however, is this: Don’t use title s that parrot what the link text says. Don’t use title s when theyalmostsay what the link text says. In fact, use the title attribute sparingly: Use it only when context and contents do not provide sufficient cues to understand an element, and only once you balanced the need for title maintenance with the needs of your audience.

title s can be useful for users (UX +) but, relatively speaking, they are costly to add and maintain (DX –). Note “relatively speaking”: It’s easy to key in a few characters, but only looking at the few characters for a title misses that more such attributes are added in other cases and that they all have to be maintained. Be mindful. Respect the title attribute.

What’s the bare minimum for the sample code above?

Much code that I’m showing in between, and all minimal code presented at the end of each chapter has been pruned of optional markup, like optional tags and quotes. Whether and how you adopt this practice is entirely up to you and your needs, however omitting such optional code is my strong suggestion at least for production code.