Respect the title Attribute
<a mode="dark" type="expanded" name="politics" href="/politics" data-analytics="header_expanded-nav" title="visit the US Politics section" class="nav-linksstyles__Link-sc-1tike8v-0 nav-linksstyles__SectionLink-sc-1tike8v-4 bwVECJ">US Politics </a>
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?
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
Invisible content, in my view, is a disaster. Meta descriptions,
title information… even with the support of the most advanced content management systems they’re a pain to keep track of and maintain. The only thing that has kept this at bay is that the respective resources are often rather stable, that is, the image described “My first cup of coffee in 2002” is likely only to experience an update once it’s being kicked out altogether. Be careful around invisible content unless it hugely benefits users, as with
What’s the bare minimum for the sample code above?
<a href=/politics>US Politics </a>
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.