1. Respect the title Attribute

1 <a mode="dark" type="expanded" name="politics" href\
2 ="/politics" data-analytics="header_expanded-nav" t\
3 itle="visit the US Politics section" class="nav-lin\
4 ksstyles__Link-sc-1tike8v-0 nav-linksstyles__Sectio\
5 nLink-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 works is that each chapter has 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 of 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? No matter the naming school, the class names are poor—after processing in the tool chain they end up verbose yet say way too little.

The point, however, is this: Don’t use titles that parrot what the link text says. Don’t use titles when they almost say 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.

titles 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 one title would use neglects that more such attributes might be added, and that all of them have to be maintained. Be mindful. Respect the title attribute.

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

1 <a href=/politics>US Politics</a>