Did you know that there are 112 elements in HTML?!
It would be a bit too easy to only blame JS frameworks, there are several reasons we use
divs so much:
- Poor knowledge of HTML elements
- Lack of understanding why
- Insufficient CSS skills
- Default styles
- JS frameworks
- We don't care enough about the page
- Some elements are hard to style
Poor knowledge of HTML elements
It's hard to use something you don't know exists. As someone who teaches HTML, I know that universities don't put enough emphasis on teaching semantic HTML. They teach syntax, basic structure and the ~20 most important elements and attributes, and that's pretty much it.
Did you know that there are 112 elements in HTML? Paul Foster built this fantastic HTML memory test. Try it, you'll be surprised how much you don't remember and know. (Heads up: His test lists 115 elements because it includes
math, and the deprecated
See the Pen HTML Tags Memory Test by Paul (@plfstr) on CodePen.
Lack of understanding why
Having spoken with many developers at workshops, meetups, and conferences, I believe that most know that semantic HTML is important, but only a few know why.
For accessibility! Duh!
Of course, for accessibility, but most people don't know why you need a sound document outline or landmarks, or what the advantages of a
button button over a
div button are. If I don't know which consequences my choices have on users, why would I bother using anything else but the div?
div. I believe they got used to the
div so much that they began using it all the time. It's common to see invalid code like this:
The number of wrapper divs can be reduced, though, because most frameworks don't require you anymore to wrap your components in HTML elements. React supports fragments, wrapper elements that don't add extra nodes to the DOM, and Vue supports multi-root components in version 3.
Insufficient CSS skills
A pattern I've noticed among students who start my beginner HTML and CSS course with previous knowledge of HTML is that they wrap almost everything in a
div. When I ask them why, they usually say that they're adding them in case they might need them later. I know CSS pretty well and usually when I look at a design, I can tell if I will need extra elements for styling. Even if I miss something, it's much better to add some
divs later than wrapping everything preemptively. Pro tip: Start with pen and paper and sketch out the structure of your site before you write a line of code. I usually use a combination of drawing boxes and writing Emmet pseudo code. If you make mistakes, you're making them on paper, which is easier to fix than changing actual code later.
By the way, you can get pretty far without using a single
div. Just take a look at the source code of Erik’s website.
divs are so much easier to style than buttons.
That might have been true in the past, but it's not anymore. Here's what you need to remove the default styles of a button.
If you want to reset everything, but inherit font styling, you need 2 more lines.
We don't care enough about the page
Many devs don't build pages anymore, they build components. I do that, too, because it makes sense as soon as your site reaches a certain level of complexity. Also, frameworks and pattern libraries think in terms of components which kind of forces you to do that, too.
The problem with working on small pieces is that it's easy to ignore the big picture. We can conceive, design, and develop components, but the end results for users is usually a whole page. A component with 2 or 3
divs might not look bad, but if I nest it in 5 other components, I might end up with 15
divs that don't do anything but increase complexity and file size.
Some elements are hard to style
Yes, some elements are hard to style. To make our designers or customers happy, we don't use the default
select element, but we write a complex component that consists of a bunch of divs with aria roles and a lot of JS. Sometimes have to do that, but sometimes it's better to just live with the fact that you can't style
option elements and use the native component that comes with all the functionality and accessibility by default.
So?! What's the point of this post?