Servage Magazine

Recently, while discussing graphic design related topics with a senior colleague, she brought up her previous position with the company where she did HTML and CSS, along with graphics designing. During our lengthy discussion, she opened her source code to correct a few mistakes. At that very moment, I took keen interest in the appearance of the source code and its clumsy structure.

Moreover, I witnessed her struggle to find an unaccounted for, closing div tag. After that little incident, I decided to demystify the misuse, or rather overuse, of div tags, as a favor to my readers. This overuse of div tags is best referred to as Div-itis.

Many of my colleagues and friends commit div related mistakes frequently. I consider it a duty to note the error, but more importantly to provide guidance to correct the mistake. Hopefully, this improves their performance and their reputation among all clients.

Let’s start by understanding Div-itis. After intensely looking at this, we can see possibilities to overcome it, without a struggle.

What are div and span tags?

When we say, “Div” tag, this actually means division within our coding structure. Div tags break HTML documents into various parts, in ways that are meaningful to a coder. There is another tag, span, which does a very similar job, but works at the inline level, while div acts at the block level, over several lines of code. For instance:

<div id=”header”><img src=”logo.jpg” />

<h1>This is My Company</h1>

</div>

<div id=”content”>

<p><span class=”firstletter w”>W</span>e are enjoying old HTML.</p>

</div>

<div id=”footer”>Author Bio</div>

In these code examples, div tags are defining blocks at a structural level, while span is representing a fancy W, via inline stylizing. In the above examples, you may have noticed the multiple use of div tags, for one HTML document, each with their own closing tags. This works, but this is exhaustive in terms of coding structure. This opening and closing of tags, is the reason that my older colleague, an HTML programmer, was struggling to debug her inflated HTML documents.

HTML5: Ahead of the Game

I politely suggested that she instead applied the latest HTML5 markups, whereby she could eliminate the excessive div tags in her documents. Unlike the new crop of programmers, she didn’t have immediate awareness of the latest HTML5 tags at her disposal, such as section, header, aside, footer, hgroup, figure, etc.

Another thing I observed in her web page source code was her using div tag for more than just simply wrapping elements to insert class or id attributes. This, of course, for sake of CSS styling. She could have instead used div tag one time to define class and its sub-class. But her preference was to use it twice, or even multiple times, for each class or sub-class. As an example of her code structure:

<div ><div>

<img src="logo.png” alt=”this is a logo” />

<p>This is well-placed logo.</p>

</div>

</div>

This is easily corrected by putting same elements in single container of div tag:

<div><img src="logo.png” alt=”this is a logo” />

<p>This is well-placed logo.</p>

</div>

When I saw her using div tag to define a navigation list, I was really put off. Because, instead of doing this:

<div id=”nav”><ul>

<li>…</li>

She could easily have gone directly with:

<ul id=”nav”>                <li>…</li>

And it would have had the same result.

Div-itis is Bad for A Good Coder

Honestly, I consider Div-itis a very bad habit for any seasoned coder, given that we are in the modern HTML5 era. I say this because:

• We have structural elements like header, section, footer, aside to define major sections of a web page, by default, in HTML5. For image and text content, we now have the sectional elements, along with may CSS selectors, to solve our graphical problems.
• If we are going to fix each graphical expression, using div tag, we can easily end up with highly intricate and rather cluttered documents. These affect load time in a negative way.
• Today, search bots have little time to penetrate and index your weighted and difficult to read web page source. Thus, proper semantic use of HTML5 tags is a mandatory skill, to beat our fierce competition. Overuse of div tags make a document non-semantic.
• We actually need clear separation of presentation from the structure. Taking advantage of modern CSS3 and HTML5 tagging structure minimizes the usage of div, and ought to be a welcome step for any smart coder.

Be sure to make use of the latest CSS3 coding and its elements, such as:

• Attribute selectors
• Pseudo-classes
• Pseudo-elements
• Combinators
• General sibling and
• Adjacent sibling

Doing this will overcome Div-itis. Moreover, it will give us highly clean, compact, and comprehensive code to improve performance and ease the lives of other coders who may access your documents for maintenance or updates.

References & More Reading

Divitis: What it is and how to avoid it (Updated!)
What is a Div?