The UX of HTML
In the end of October I attended the border:none conference 2023 and saw the great talk "Do we have to reinvent the wheel?" by Vasilis van Gemert. He used the phrase The UX of HTML to describe how semantically correct markup can significantly improve the user experience.
I found the term so catchy and convincing that I decided to borrow it and give a presentation of the same name to our developers to convince them to pay more attention to correct semantics.
He probably already had his article for the HTMhell advent calendar in the pipeline and that's why he used the term, but my romantic self would like to think that his own phrase struck a similar chord with him as with me and that's why there is now this outstanding article.
I probably should have called my article something else, but I think (like Vasilis too) that the title is really memorable and it's better to lure people into semantics by giving them a catchy phrase than to drive them away by talking directly about "boring" semantics. So I just hope Vasilis will forgive me and tacitly approves the title.
It's best if you take the time to read Vasilis piece before you continue reading here, because this article ultimately describes the same thing. However, as I probably can't put it into words as well as Vasilis, I would like to focus on the examples that I have prepared for my lecture, because sometimes a picture tells more than 1000 words, as they say.
The UX of interaction elements
I'll directly dive into one of Vasilis examples. Having e.g. a span element with an onclick event instead of a proper link.
<span onclick="window.location.href='#'">a span with an onclick event</span>
<a href="#">a proper link</a>
So you could think, there is already a much better developer experience with the link and that only adds up if you style the mouse cursor, the colour and more to really look like the link, but in a world of JS frameworks it's still not an uncommon sight.
So now try to right-click those elements.
a span with an onclick event and a proper linkDepending on your browser you will get something like this for the span and something like that for the link
And here we haven't even talked about the impact on accessibility. The span element does not receive a focus with the tab key and it also does not appear in a screen readers list of all links etc.
The link is maybe the most impressive example, but the general rule of having the best UX with the semantically correct elements applies to many other cases too. So is a proper
button superior to a button styled
div and even a correct heading hierarchy can be a huge improvement.
One of Vasilis other examples is a checkbox.
<label>Label</label> <input type="checkbox" />
Notice how you can only click the checkbox itself. But when you ad the correct semantics to it ...
<label for="check">Label</label> <input type="checkbox" id="check" />
... you can also click the label to check and uncheck. Also with that little change you make the element much more accessible again. When focusing the checkbox, the screen reader will read out the label's content.
The UX of forms
A checkbox is part of a form most of the time and you can gain an astonishing amount by using correct semantics in forms. But I didn't want to talk about semantics anymore, so I'd better talk about the UX of forms.
You can save yourself time-consuming validations if you give the inputs the right type and use the
<p><label>Name:</label><br><input type="text" required></p>
<p><label>Mail:</label><br><input type="email" required></p>
<p><label>Phone:</label><br><input type="tel" required></p>
DetailsYour initially hidden content.
Or a full pop up without any JS by the
My popover content
Or having really responsive images with the
picture element and it's
In the end it's really worth to say goodbye to your (hopefully not to thick) div-soup and use the semantics of HTML to really facilitate it's UX.
To get more people into that, try to stop boring with semantics and start talking about the UX of HTML.