{sample: true}
<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 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.
D> Invisible content, in my view, is a disaster. Meta descriptions, alt attributes, 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 alt.
What’s the bare minimum for the sample code above?
<a href=/politics>US Politics</a>I> 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. It’s my strong suggestion to omit such optional code, at least for production code.