Mathieu Bouchard

HTML5 semantics: is CSS holding us back?

With HTML5 quickly becoming the de facto markup language for the web, we front-end developers are now armed with a slew of semantic tags to help better describe the meaning of various parts of text on our web pages. This is a big step in the right direction.

But we're still screwed... because of CSS.

Are you like me in that something has always felt off about how markup tags are so intimately tied to CSS? I usually just shrug it off and keep on coding. We've painstakingly learned the nuances behind it all, accepting the quirks as they are (I cringe every time I type <div class="container">). I love that we're making all this cool progress with CSS3 and HTML5, but they are fancy distractions to the real problem: the inability to truly separate markup from presentation.

I'm a big believer in semantic markup and am very excited about the rise of the WYSIWYM (What You See Is What You Mean) movement. In an ideal world, our web pages would have absolutely zero extraneous markup tags (I'm lookin' at you div and span!). Semantic tags only, whose sole purpose are to give meaning to the enclosed text within.

In short, if you're using a div tag, you're doing it wrong. A div has absolutely no semantic meaning, and is especially obsolete now that we have section and article. Its only purpose is for styling, so if you're using div tags, you might as well use inline styles.

And I blame CSS. Granted, the idea behind CSS is great: style separated from markup. But CSS fails at this because of the language itself. It is rigidly attached to markup tags. CSS should be styling around markup tags, not the actual markup tags. I really don't know how else to describe it. Honestly, we just need to go back to the drawing board with regards to CSS.

But alas, we have to use div tags, because that's how this crazy mess is all set up.