Divitis and other itis
The ending -itis is a Greek and Latin suffix used in medical terms to denote inflammation (literal or figurative) of an organ. It is sometimes used as a proper word (itis, with plural itises) to define a disease characterized by inflammation or, in a more extended way, an abnormal state, excess, or obsession for something.
Divitis, or the excessive use of
<div> tags, is a well-known and incredibly common web development illness. The name has been around for a long time, and I'm not going to discover anything new with it.
It is a design illness centered in the structure and layout of the page, and in this article, we will try show how it is the result of the evolution of other -itis, how to fix them, and what could be the next step in the evolution of this illness.
Although the ending -itis seems appropriate in this case and the term Divitis is widely spread, while writing this post, we seriously considered renaming it from Divitis to the Flu.
This is because the flu virus continuously evolves. Similarly, Divitis is an evolution of another design illness (Tablitis) that was in itself the evolution of yet another design illness (Framitis)... and it will probably just be one more step in the evolution of these design/layout problems.
While Divitis will be the main part of this article, we are going to see the rest of the itis illnesses in a chronological order. That will lead us to our current situation, and get us ready for what is coming next.
At the beginning of the web, there was frame-itis (or Framitis for short). The abuse of frames and frame tags. This is an example of a page that uses frames:
<frameset rows="100,*"> <frame src="header.html" /> <frameset cols="150,*"> <frame src="menu.html" /> <frame src="body.html" name="main"/> </frameset> <noframe> Your page doesn't support frames </noframe> </frameset>
Code like this was quite popular in the 90s and early 2000s. It generates a layout of frames with a header/banner section on top, a menu to the left, and the main content on the right.
Frames looked like a great idea back then, they served a purpose: each frame contained a static page, and only the "changing" frame had to be updated, saving precious loading time in the era of the screeching modem.
But the cons outnumbered the pros, especially due to frames terrible user experience: the back, forward, and refresh navigation buttons will not work the way you expect them to, and bookmarking or printing a page in the same way you see it on the screen would be almost impossible.
With the evolution of the web technologies, other more suitable alternatives showed up like
iframes or AJAX... which lead to the frame tags being deprecated in HTML5.
After the Framitis, designers and developers started using (and abusing) the tables... starting a new -itis.
In the 2000s, we had Table-itis (or Tablitis for short). An excessive (an unnecessary) abundance of tables incorrectly used for layout.
This is an example of design using tables. It looked better than the design using frames, as it divided the page in a grid that allowed for more flexible designs than the frames:
<table> <tr> <td> ... </td> <td> <table> <tr> <td> ... </td> <td> ... </td> </tr> </table> </td> <td> ... </td> </tr> </table>
But it still had many limitations: the design was too "boxed" and the code was flooded with unnecessary tags (each cell requires at least a table and a row). Also, if you wanted to redesign your site, you basically had to rewrite the whole thing which was painful and long.
This problem was in part due to the limitations at the time. Improvements in CSS made it easier to get out of the box (or cell), and create more flexible layouts (imagine only changing CSS and getting a completely fresh and new-looking site).
Unfortunately, not all systems caught up as the web browsers. Many email applications only allow a limited set of HTML and CSS to be used, and tables are still a (relatively) popular layout choice for email campaigns even close to the 2020s.
But apart from that, developers moved to a new -itis...
Div-itis: too many
<div> tags. This is where we are right now. The current step on this evolution of -itis.
This is actually an extreme example of Divitis. You can see the code is monochrome, tough to follow, and boring. You cannot tell what is what unless you look at the content. And a machine may not have a clue:
<div> <div> <div> <div>Title</div> </div> <div> <div>Section A Title</div> <div>Section A Content</div> </div> <div> <div>Section B Title</div> <div>Section B Content</div> </div> <div> Related Content </div> <div> Copyright Information </div> </div> </div>
But there are good news: there's a div-itis vaccine. And it is... [drumroll]... HTML5!
<main> <article> <header> <h1>Title</h1> </header> <section> <h2>Section A Title</h2> <div>Section A Content</div> </section> <section> <h2>Section B Title</h2> <p>Section B Content</p> </section> <aside> Related Content </aside> <footer> Copyright Information </footer> </article> </main>
Now you can see the code is more colorful and thanks to the more semantic tags you can tell what each thing is without having to look at the context. It's easier for humans to read and understand. You can see it's an article, with a header, two sections, some related aside information and a footer.
It is also easier to maintain because there is a lower risk of forgetting a closing div and know inside which part you are at each moment. And it is also nice for screen readers and users with disabilities, the flow of the content in the page is more natural... we will see more about that in a little bit.
To see if a website suffers from Divitis, you just need to right-click and view source code. If you barely see any semantic tags, and it is mostly
<div> and more
<div>, you are in front of a case of Divitis.
And it is a common web illness, popular sites like CNN, ESPN, Yahoo!, or Reddit, suffer it. Chances are that if you inspect your corporate site, it may be suffering a mild case of it.
And before we continue, one important thing to remember:
<div> tags or tables ARE NOT BAD. They have their own purpose and if you use them correctly there is nothing wrong with them.
There is this cartoon I really like that explains it better:
If you want to display data in a table, use the
<table> tag. It's what it was designed for! And if you find yourself using
<div>, stop for a second to think if a more semantic tag could be used instead of it... if not, there's nothing wrong with using a
We have seen Framitis, Tablitis, and Divitis, and how each of them evolved into the following one. It would be naïf thinking that Divitis is the end of the road for these -itis illnesses.
Reality is HTML5 is the current design solution. But once a new version of HTML (say HTML6) comes out with more specific semantic tags, maybe we will be talking about HTML5-itis.
And actually, there are signs of a new layout -itis that may be coexisting along with Divitis nowadays. Reviewing different projects, I found that developers are using (and abusing) FlexBox a lot. Even in situations in which it is unnecessary, or in other situations in which Grid would be a better choice.
So it wouldn't be too surprising if in the future we end up talking about Flex-itis or Flexbox-itis.