Do Semantics Really Matter?

Ever since I started seriously coding, good coding practices, semantics and validation have all been very important to me. Having well-written code that’s also organized reduces bugs and future headaches when you need to update the site months or years along the line.

But every thing in moderation is just as important. I’ve read countless blog posts about how we’ll all burn in a fiery hell if the semantics of our HTML isn’t exactly perfectly. But what exactly is semantics, who is in charge of making this stuff up, and do we have to listen to them?

Using IDs and classes that properly explain what the section is, or what content it contains is extremely helpful when working on the CSS side. An ID of “column-a” tells me nothing much, except that it’s probably the first column in a series of columns, but an ID of “main-callout” tells me exactly what it is and where it goes on the site.

However, I’m also a fan of using classes like “left-column” and “right-column”. Sure, this describes layout rather than content, but most of the time content changes more than the layout, so giving it a specific name like “latest-news” or “testimonials” won’t always work. Also, if you’re trying to write a bit of OOCSS (Object Oriented CSS), or CSS that is a bit more modular and doesn’t require you to repeat styles or classes, a class name of “left-column” might be more useful than usual multiple class names and the same style, say for “testimonials”, “latest-news”, “main-content”.

In some ways, I think it’s more important to write well-organized code that just works, instead of always trying to bend over backwards to make sure 100 different items on the Web Developer’s Website Life List is checked off. Is it validated? Is every single HTML element semantic, but doesn’t repeat styles, and doesn’t over populate the HTML with classes and IDs? Is it Google friendly? Mobile friendly? TV friendly? Freaking tiny touchscreen watch friendly? Can people without a mouse navigate it? Is it touch friendly? Can blind people, deaf people, purple people, ugly people navigate it? Will it work without Javascript? With Javascript? With a million different devices in 30 thirty years? (who even keeps a site that long?). Is every image coded in CSS now? Does it work from IE2-IE20?

Sometimes it’s enough to want to pull one’s hair out.