HTML5 provides an extensive array of semantic elements. Using these alone, it’s possible to impart a mind-numbing amount of semantic information on a document from within its markup. Going further, it’s possible to assist users of accessibility software with the WAI-ARIA specification. If your target is machines, it’s possible to extend these semantics with microformats that can ease data intake.
HTML also contains elements with no value. These elements don’t add anything to a document — they don’t make it more structured in a meaningful sense. That’s not a problem with these elements, however. In some cases, it’s a benefit.
There are downsides to bloated markup, and there are benefits to cleaner, more consise documents. But there are cases where the extra div or span can be used to improve development, and they don’t hurt anything at all.
The same applies for semantically-unburdened attributes like classes.
These elements and attributes have no semantic value: they don’t add any, and they don’t reduce that which is already present.
Exploring responsive grid systems for complex but structured layouts.
Using the flag or media pattern for locking up graphics and text for comments, alerts, and more.
A hidden element within a link can stretch the link’s focus outline to the edge of the viewport — and beyond.