CodeinWP CodeinWP

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.

2 Responses

  1. Kadir GUNAY says:

    absolutely we have to use comment. Especially you use dw for coding html or other language you can lost your divs :)

  2. I’ve been hand-coding sites for 25 years, and whether it’s HTML or any other language, I’m a firm believer in commenting code. If necessary, the comments can be removed when taking it live, but I seldom do that. Comments don’t add that many characters, and I sure don’t want to maintain a full set of duplicate files.

    But somewhere in time, browsers stopped respecting nested comments, creating a major Achilles heel. It’s especially vexing when faced with a bunch of nested DIVs. I place a comment after each closing DIV tag. But a large block of code can’t be simply commented out (whether temporarily for testing, or whatever), if there is an HTML comment within that block.

    I can’t imagine what W3C is thinking in not allowing any parameter within a closing DIV tag. It would make life so simple, rather than having to devise a kludge.

    So, what is the best method? The HTML “hidden” parameter comes to mind, but it can result in SEO penalties. Adding a parameter to an ineffective tag, such as ? Make up my own meaningless tag? What?

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).