Published: Wed 08 Apr 2020

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 Liked Get Your Semantics Right, then Your Styling

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:

If you like what I write, you might like to follow me on Twitter @markconroy

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.