Semantic HTML

Today's modern monolithic web frameworks have eschewed the semantic web elements for a bland palette of divs and spans. Rather than use the browser's default styling we completely reset the css, assign classes, add our own styles, and re-invent native controls with our own javascript methods. Is this decision something to be lauded? This isn't a tutorial about how to write semantic HTML.

The new normal

What makes <div class="navbar"></div> better than <nav></nav>? Or <span class="text-lg"></span> better than <h1>? There's not exactly a clear explanation. Here's a few excuses that float around the web development space regarding the reluctance to use elements with no corresponding role.

1. You lose fine-grained styling of individual elements

This argument tends to falter against examples of larger applications where virtually all styling is abstracted out to semantic CSS classes. No reasonable web developer is creating selectors like:

/* If you are doing this: don't do this */

div.container div div {
    padding-left: 6px;

Element-level selectors are absurd when you scale past a simple static landing page and that's not even mentioning the nested parent to child structure. We instead prefer to assign semantically named classes to our elements and selectors on a single class or ID like .banner-image, .blog-posts, and .header-text. If we accept semantics in our CSS then why are we opposed to it in our HTML?

2. Style interoperability among browsers is poor

The idea that your web application may appear inconsistent to users with different browsers tends to be extremely unacceptable to designers and product managers. I personally disagree with this opinion, just as the user is free to choose their browser they should also be free to choose the look and feel of the sites they visit.

Disregarding my opinion, the same CSS resets I mentioned earlier are present and common in many popular web frameworks. I can understand and acknowledge the concern for consistent styling but this argument fails due to the fact that we already tend to do what we can to replicate user experience among all browsers.

3. DRY principles and copy/paste-ability are hindered

Developers may be concerned that their precious reusable modules may not be reusable anymore and render poorly depending on the context where they're inserted (This is an actual argument I've heard from professional web developers).

Obviously absurd, either their CSS selectors are immeasurably fragile, or the semantics of their design is flawed. If replacing your elements with their semantic equivalent results in illegal HTML then the user experience should likely be redesigned. A <button> is still a <button> regardless of where it's inserted as long as it's within permitted Content Categories.

Accessibility and the crux of this rambling

Accessibility is a real concern. As of 2018 there are over 7.5 million Americans with a visual disability. Needless to say, Screen reader usage will likely become more prevalent as the web sees an increasing amount of traffic. Surveys indicate that many visually impaired users report that the web has not become more accessible and the reason for this inaccessibility is due to a lack of awareness or lack of skills/knowledge.

It's not difficult to design for screen reader compatibility. Organizing content in reasonable ways doesn't require much effort, and it helps everyone navigate your website. If it's too daunting of a task to restructure your HTML or rewrite you CSS selectors, we can at least start with trying to reintroduce semantic structure back into our web applications.

A note about lighthouse

If you have used Google's lighthouse software to determine the accessibility of your website, you may be misleading yourself about its actual performance. Lighthouse tends to check that you're not breaking the rules rather than following best practices. I received a perfect score

lighthouse reports a perfect score

on my lighthouse report before I even added any skip links. I'm not visually impaired but to someone using a screen reader, is that perfect score actually justified?