< div >
The little element that could, but maybe shouldn't.
I don’t hate the <div> element. I hate what it has become, and how many developers have used it, and quite often continue to use it today.
For many frontend and “full-stack” developers, the <div> element is the one object they reach for first to start building anything.
What many do not realize, and what I hope to convey, is that it should actually be one of the last things they reach for while building things for the web.
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
Web Hypertext Application Technology Working Group (WHATWG)
This post isn’t really about the <div> element. It is about how HTML, even though foundational to the very existence and daily use of the web, continues to be given the least amount of attention, respect, and time dedicated to learning it and realizing how many of today’s modern challenges can be solved by starting with a knowledgeable HTML approach.
Please note: I am 100% guilty of all the examples I have mentioned, and then some. I have used tables for layout, I have used spacer gifs, I have used flexbox for two-dimensional layouts, and I have used divs for all kinds roles imaginable. I was a Flash developer for nearly a decade. And, to top it all off, my HTML knowledge up until several months ago was woefully lacking. Do you know how many different <input> types there are today?? Twenty-two! See for yourself!
I am not here to blame; I’m here to discover, learn, re-learn, and share.
I will be writing under the assumption that everyone wants to be a better developer. Whether that means taking care of accessibility sooner than later, or making sure e2e and unit tests actually do exist, or that (gasp) some documentation associated with whatever was built exists and can actually be found (what?!). I am assuming from here on out is that you, like me, consistently desire to write better code.
What is better code? What makes code better? A follow-up question might be, better for who? Who are we writing code for, in the year 2023?
If you are involved in any way with writing anything using HTML, you are, by association to the language, writing for everyone, because that’s what Tim Berners-Lee intended for it to do from the very beginning: enable free access to information for anyone, anywhere in the world.
HTML is open source, it can be accessed by anyone right-clicking and selecting ‘view source’ on any website, and it can be written in plain text, with the most basic writing app included with any device in any OS. HTML truly is a language for the world.
Better code then, at least from an HTML-based perspective, would be code that is able to be rendered at any given time on any given device, thereby satisfying the premise that “the web is for everyone”.
With that being said, it is important to note that building well-structured websites with semantic HTML is not a magical formula for solving all accessibility challenges. It will, however, give you and your team a much more solid foundation from which to work.
How do we arrive at composing better HTML? My first suggestion is by using the various elements for their intended purposes, and avoiding as much as possible any hacks or work-arounds to arrive at a desired outcome. In other words, use the right tool for the right job.
Just as you wouldn’t (hopefully) use a screwdriver to pound a nail into wood, you also shouldn’t reach for a div and attach role=button to it in order to render a button. You can take a screwdriver to pound a nail into wood. No one will stop you. (My friends would encourage me to do so, because I am often a source of entertainment). But your life would be better, and your efforts would be more rewarded if you were to pick up a hammer instead, to finish the job.
This shouldn’t be a problem in 2023, right? I mean, the web is now over 25 years old! Surely we have come far enough to know…. *sigh*.
I can still find many results from general searches of developers around the world asking “what is the best way to make a button?”, and other similar queries that prove we simply do not know the number of tools we have at our disposal to build all the things.
So join me, and let’s discover HTML once again, and discover not just all the tools that we can use, but also how to wield them, and how best to leverage them in production.
Let us strive toward building a better web experience for everyone.
Reference:
- WHATWG
- the-div-element
- caniuse.com
- mdn-html_elements_div
- MDN Docs
- Web/HTML/Element/div