9 Out Of 10 Developers Don’t Care About Semantic HTML
And even less actually use it…
So, talk to me about semantic HTML, assuming of course that you’re familiar with it. This used to be a fairly common question in web development interviews. I was asked it, and I asked it myself from others. Every so often, I still do, just to get a pulse on where things are in candidate-world. At this point, HTML5 is the norm. Many don’t even call it HTML5 anymore, just HTML. Technically, there’s nothing wrong with that. It’s good that everyone sees it as the de facto version to use, right? Well, kind of…
With HTML5 becoming the status quo, the fact that this major new version was also dubbed as Semantic HTML, either got forgotten, never taught, never learnt and more importantly never understood, and from where I’m standing, staring at a web that’s 98.1% inaccessible, that’s a pretty big booboo, and frankly inexcusable. Now, don’t get me wrong. I am not pointing the finger at someone specific, or any given group.
We are all collectively at fault for the tragic and inexcusable state of the web.
Undoubtedly, we all share some blame and it all starts with something as simple as semantic HTML because yes, this is the moment to remember what HTML5 actually is and why it was created. I know that many developers would easily create entire web applications relying on nothing but <div>
tags, but every markup language’s syntax has a purpose, and it’s typically more than just creating boxes.
So, why does semantic HTML really exist?
Don’t misunderstand me, the new standard introduced in 2008 wasn’t merely about semantics, however semantic HTML tags played an important role in enabling complex web applications and machine-readability. HTML5, without a doubt, had a multi-faceted goal that had to look way into the future.
Its goals were to improve the language with support for the latest multimedia and other new features; to keep the language both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, etc. — Wikipedia
That second part there — “to keep the language both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, etc” — is the one I want to focus on.
As a software engineer who reads and writes a lot of HTML, I always find it very refreshing when just reading the tags, I can make a sense of what the application does, what are its key functions, what’s interactive and what’s just presentational. I know what to expect where, and I don’t have to rely on reading random made up class names which with the advent of frameworks and libraries such as React, Angular, Vue and many others are increasingly difficult to read and make sense of, as they’re generated.
The reality is even more impactful when a correctly marked up web app gets parsed by a screen reader. What otherwise would be an unintelligible mess, with semantic HTML, it comes to life, it gains meaning.
Semantic HTML was created to improve the lives of both software engineers and users.
It exists to cater to built-in cross-browser accessibility. Whenever the answer to “talk to me about semantic HTML” is something vague, perhaps briefly mentioning the <section>
, <article>
or <nav>
tag, I already know this engineer hasn’t a clue about accessibility. The expected answer is never a regurgitation of tags an engineer saw or used before, but rather why they used them, how, and in what context. Simply using a <nav>
tag from muscle memory means absolutely nothing for accessibility if that same tag appears in the footer with no label to identify and distinguish it from the one in the header.
Why the lack of love for semantic markup?
This is going to be controversial, but I will not apologise for stepping on some snob software engineer and web developer toes. If we’d round up all the software developers on high horses dismissing HTML as a valid language, thinking they’re too good to spend more than an afternoon learning it, we’d probably have ourselves a new country. I am not making this up. 98.1% of the web is not accessible and 98 courses out of 100 on Udemy teach nothing about accessibility in their web development bootcamps. Why? Because learning HTML is apparently not cool enough. React is. Vue is. Next is. Everything else, heck even COBOL, is cooler to learn than HTML.
Honestly, I blame JSX for much of the inaccessible web we built over the last decade.
There. I said it. So many software engineers have been “brought up” in a React dominated web development world that there is now a shortage of software engineers who don’t start their apps with index.js
, which is funny, because the concept of index
anything on the web originates from HTML, as web servers—good ol’ Apache for instance—instantly recognised and loaded any index.html
file you’d FTP onto it.
It’s gotten so bad, that many engineers now simply don’t know any better.
It’s not even ignorance or lack of love for HTML5 and semantic markup, it’s rather that it’s seen as nothing more than the output of their labour, and not the work itself. yarn add magic-component
, fill in the props, and it’s just another day at the office, or couch these days. I kid you not, I bet my winter socks, there are web developers out there who have never typed <button>some text</button>
, but have coded a zillion times <Button label="some text"/>
or something to that effect. Whether the output is an actual button tag, a span, div, hell, maybe even a link tag, who the heck cares anymore? It doesn’t matter, does it, if it’s on the page, and it works, right?!? 🤦♂️
But it does matter…
And a lot more than many web developers and software engineers might think. It matters so much, that it can be life-altering, hell, even life-threatening. We often say that in software development we don’t have to worry too much because it’s not like we have patients on an operating table. It’s not open-heart surgery. While that is certainly true, an inaccessible web app or website can become a life or death situation.
Let me remind you, semantic HTML brings reliable machine-parsing capabilities. Assuming that our users will rely on the same senses and mechanisms to consume our apps and sites, as we do, is the most dangerous assumption a software engineer can make. Every single line of code that’s rendered in the browser, on the screen and off the screen is meant to be read by machines, and meant to be made sense by machines and translated for humans. That’s semantic HTML. That is its purpose. Enabling people, elevating their digital experiences in an analogue world. Removing the barriers between the two worlds and making it more seamless.
So, talk to me about semantic HTML, what does it mean to you…?
Attila Vago — Software Engineer improving the world one line of code at a time. Cool nerd since forever, writer of codes and blogs. Web accessibility advocate, LEGO fan, vinyl record collector. Loves craft beer! Read my Hello story here! Subscribe and/or become a member for more stories about LEGO, tech, coding and accessibility!