Stop Writing Non-Semantic HTML, God Damn It.
With the onslaught of web frameworks, scaffold-ers, sub-par agencies, trash trove of templates and wide-eyed Bootcamp grads, I’m shockingly surprised that so few people seem to give importance to the basic building blocks of the internet — i.e. HTML, CSS, and vanilla-ass Javascript.
I mean seriously — It’s cool that you can scaffold a Redux-based PWA in under 10 minutes (*cough* as long as you have somewhat of an actual understanding of the underlying technology *endcough*), but folks… it’s about time we all just agreed to go back to using a <h1> when you want a heading.
But… But… I don’t need to worry about that — it’s all just ${ insert template language of choice } anyways.
Nope. You are writing ${ insert template language of choice }. Guess what the browser renders? H.T.M.L.
As long as my styles render, I am happy.
Double nope. CSS does not give you a free pass to write garbage, semantically invalid HTML. Styling has come a long way and we all do considerably hacky things from time to time but knowing when you are hacking/bending the rules vs. not knowing the rules at all is a crucial distinction.
What gives you the right to be so judge-y?
Fair. Only fair point — tbh, absolutely nothing other than the internet being a great place to rant for a second.
I’m someone who grew up at a time when you could pick apart websites with nothing but Inspector or View Source (without the element in question vanishing mysteriously in the DOM tree! Imagine!), or seeing exclusively one root node (Mommy, where do all these pretty images and cards come from? Well, let me tell you, honey, once there was this framework tha…).
Compared those days, we’ve already broken the internet enough don’t you think?
I’d rather we stopped breaking it further for legions of screen readers, web parsers, and… developers looking to buy one (JUST ONE, help me god) semantically valid website template.
In closing… if you want to display a heading, consider just maybe using a <h1> and not a cute <div class=”title”>. And if you have some down-time, research how parsers and screen readers work, understand DOM component hierarchy, and please — for the love of all that is the internet, write some god damn semantically valid HTML.
/endrant
P.S. — There are a huge number of people writing great, semantically valid HTML even though they technically don’t have to. This is for the other half. If you don’t know which half you’re in (and I’m ashamed to say I’ve fallen in both camps at times!) then like the saying in Poker goes… find the patsy!