Why Divs Suck
I don't like
divs. In fact, I'm convinced they should only be used only when absolutely necessary - and it pains me to see how many websites overuse this element. Even the big boys, like Google, Facebook, Wikipedia, you name it, are filled with incredible amounts of
What are they really for?
Let's see what their purpose is supposed to be according to the HTML5 specifications. It's definition is extraordinarily vague, as the specs state that
The div element has no special meaning at all. They also note the following:
Authors are strongly encouraged to view the
divelement as an element of last resort, for when no other element is suitable. Use of the
divelement instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.
That pretty much proves my point already; you shouldn't really use
divs, unless you have no other choice. So, when are you allowed to use them then? Why do they exist? Well, sometimes you need to group some elements but there doesn't really exist a semantic element for that grouping. In such a case, it may be the right choice to use a
div. However, a lot of websites end up using the
div element as a helper in the visuals of their website - and I'm sorry to say, that's bad too. I have to admit, sometimes, you're forced to. But very often, a little CSS magic does the same thing while keeping the HTML clean and semantic. After all, HTML is a markup language, and CSS is for styling. So really, using the
div element for styling purposes is like using shampoo to wash your body. Yeah, it works, but that's not what you're supposed to do.
Examples of what not to do
Before I start trashtalking some sites here, I just want to say; I have nothing against any of these websites or brands. I'm just objectively looking at their coding practices.
First of all, we will have a look at Google. At the time of writing, about half of all the elements in their homepage are
divs. The first thing that I notice about the layout they're using, is
<div id="main">. Why would you ever do that when you can use a
main element instead, that is specifically meant for this purpose? And they do it all over again with
<div id="footer">, when they could just use the perfectly fitting
footer element. You might say; but maybe they used it for browser support? After all, Google is being used by a lot of people. Well, the semantic elements are being supported by 97.9% of all browsers, and the browsers that don't just consider them "unknown" (which essentially means they function like
divs). So really, they gain nothing from using
The homepage, my own timeline, at the time of writing, contains over two-and-a-half thousand (you read that right; two-and-a-half thousand)
divs. It just hurts my soul to look at. Anyway, let's try to find a concrete example of something they did that they should be doing differently. Let's take a look at the like button. I would show the HTML here, but it's a bit... long. Let me count the
divs though. One, two, three, four... Thirtyeight! I do need to say though, that there's multiple buttons (in addition to liking a post, you can now also laugh at it, be sad at it, be angry, etcetera, and it's all part of the like button). However, the buttons should use
button elements (or, alternatively,
a elements). Not to mention they are doing all these
divs inside a
span, which isn't even valid HTML, but alright. Before I get permanent eye damage from looking at these mountain ranges of
divs, let's move on to the next one.
After seeing Facebook, I'm happy to announce that wikipedia's homepage is only 14%
div! That's mostly due to the fact that a third of all the tags are links, but still, that's a relatively good score. The saddest thing is - even though Wikipedia has so many navigation sections, all of them use a
div instead of a
nav element. Yep; there are more than 10
divs with the role attribute set to "navigation", which the
nav element already has by default. Shame.
So, what should you do?
I've been ranting about how bad
divs are, but let's talk solutions. To create a semantic website, you should start by writing your HTML. Don't mind the CSS or however you plan to style your site, but just write pure HTML first. As soon as you want to use a
div, ask yourself - what purpose does this element have? Why is it here? Is there an element that specifies that role better? If you still don't really know what to do, and it seems as though your only option is a
div, don't feel bad; it's okay. However, consider giving your poor little
div an ID so it doesn't get an identity crisis. Or, at least categorize it by assigning a class to it.