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 all over the Internet.

It is a design illness centered on the structure and layout of the page, and in this article, we will try to 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.

The Flu of Web Development

Although the ending -itis seems appropriate in this case and the term Divitis is widely known, 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.

Frame-itis

At the beginning of the web, there was frame-itis (or Framitis for short). The abuse of frames and frame tags. Here 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 led to the frame tags being deprecated in HTML5.

After Framitis, designers and developers started using (and abusing) the tables... starting a new -itis.

Table-itis

In the 2000s, we had Table-itis (or Tablitis for short): an excessive (unnecessary) abundance of tables incorrectly used for layout.

Here is an example of design using tables. It looked better than the design using frames since 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 one table and one 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 to the times as the web browsers did. Many email applications only allow a limited set of HTML and CSS to be used, and tables are still a (relatively) common layout choice for email campaigns even as we near the 2020s.

But apart from that, developers transitioned into a new -itis...

Divitis

Div-itis: too many <div> tags. This is where we are right now. The current step in this evolution of –itis.

The code below is an extreme example of Divitis. You can see that 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 is good news: there’s a Divitis 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 that 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 that the code above is an article, with a header, two sections, some related aside information and a footer.

The code is also easier to maintain because there is a lower risk of forgetting a closing </div>. It is also nice for screen readers and users with disabilities, and the flow of the content in the page is more natural.

To see if a website suffers from Divitis, you just need to view the source code. If you barely see any semantic tags, and the code is mostly <div> and more <div>, you discovered a case of Divitis.

And it is a common web illness. Popular sites like CNN, ESPN, Yahoo!, or Reddit, suffer from it. Chances are that if you inspect your site, it may be suffering a mild case of it, too!

Here is a list of common tags that can be used instead of <div>:

• <main>: the main content of the <body> of a document or application. It should include content that is unique to the document, excluding common elements such as navigations or footers.
• <header>: represents introductory content for a web page or section. It is common to have some navigational aids as part of it.
• <footer>: represents a footer for its nearest sectioning ancestor or <main>. It normally contains information about the author, copyright messages, and content of that kind.
• <article>: a complete/self-contained composition such as a blog post, news article, or essay. It should contain a heading to identify it.
• <section>: a generic section within a document or application. It groups content by its theme or topic and should be identified with a heading.
• <nav>: a navigational aid. That is, a section of the page with links to different content within the page or to other pages.
• <aside>: content that is tangentially related to the content of the container, but that could be considered independent and separate from it.
• <figure>/<figcaption>: represents an illustration, diagram, photo, code snippet, etc. that is self-contained and referenced from the main content of the page.
• <ul>/<ol>/<li>: lists. These tags have been part of the HTML standard for a long time, but many times they are misused.

There are many more useful tags that are part of the standard: <blockquote>, <cite>, <details>... visit this page for a more complete list of HTML5 tags.

Divs are not bad!

Before we continue, one important clarification: <div> tags or tables ARE NOT BAD. They have their own purpose, and if you use them correctly, there is nothing wrong with them.

The following cartoon explains this concept 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 <div>.

Future -itises

We have seen Framitis, Tablitis, and Divitis, and how they evolved into each other. It would be naïve to think that Divitis is the end of the road for this -itis evolution.

The reality is that HTML5 is the current design solution. But once a new version of HTML (say HTML6) comes out with more specific semantic tags, we will probably be talking about HTML5-itis.

And actually, there are signs of a new layout -itis that may be coexisting alongside 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 which Grid would be a better option.

So it wouldn't be too surprising if in the future we end up talking about Flex-itis or Flexbox-itis... Only time will tell...