Do You Comment Your DIVs?

Since I started working for my current employer, I’ve built a number of sites from scratch using CSS layouts. I’ve also had to work on older web sites built using older HTML methods. The good thing is, many of these sites have CSS-based layouts. The annoying part is that some of them suffer from divitis (i.e. too many nested <div> tags, in the same style as table layouts). In my view, if developers are going to use this style of layout, then they might as well use tables.

The Problem is…

But getting to the purpose of this post — what I find tedious at times is when I need to wade through dozens of nested <div> tags, and there are no comments to guide me along. I might have to delete or alter one particular <div> . Or I might even have to add another <div> to the already existing mess, as it may not be in the budget to rework the whole section. But I can’t tell just from glancing at the code which <div> is the one I need to edit.

Dreamweaver Offers Some Help

Fortunately, there’s a simple feature in Dreamweaver that allows you to right-click on any opening tag and choose “edit tag”. This highlights the entire tag, including closing tag, so you can see where it ends. But that method is not always easy, since the opening and closing tags may be in different files (because of server-side includes), and the closing tag may even be well off the screen, and so the whole section is not completely visible. Thus, you still have to do a little poking around just to ensure you’re deleting/editing the correct tag.

My Recommended Solution

My solution to this problem is to put a comment at the end of every single <div> in my HTML. Here is an example:

<div id="div_one">
  <div id="div_two">
    <p>Example Text</p>
  </div><!-- div_two ends -->
</div><!-- div_one ends -->

I know, it adds to the file size, and it can be pointless at times (for example when the closing <div> tag is on the next line with nothing nested). But commenting ensures that anyone who needs to look at the code will be able to read it easily, and most importantly, be able to discern almost immediately which section of code he will have to edit.

I think this is a good, clean, and universal solution to many code reading issues, and I find that it should be considered a “best practice” — especially in complex CSS layouts.

One caution about using this method: Including multiple comments in a CSS layout can trigger the IE6 ghost text bug. But the simple solution is to put the comment just inside the closing <div> tag. It’s not as clean looking, but it’s an acceptable workaround.