Get the Semantics Right, then the Styling Right: Try to Keep Everyone Happy

The web is a publishing platform. First things first, we should get our semantics right, just like we expect a book publisher to do.

Wes Bos had a tweet last night, showing him using a h2 tag but presenting it like a h1 tag.

From my point of view, I don't see a problem with this. It separates the concerns between semantics and styling. What happens here is that your code says to screen readers and other parsers, "here is the order of my document, written in such a way that you can make sense of it". Then it says to people looking at your webpage, "here is the visual order of my website, presented in such a way that you can make sense of it".

I often receive designs that have a styleguide with a number of heading styles, h1, h2, h3, etc. I'll then create classes for .h1, .h2, .h3 etc or perhaps .heading--largest, .heading--larger, .heading--large, .heading etc. Then when I want to use these, I can just add those classes where I need them, leaving the element/semantics correct.

My response to Wes:

Filed Under:

  1. Semantics
  2. HTML
  3. CSS
  4. Frontend Development