20120222-waldo

Simple Solutions – Commenting Your Closing Tags

There’s a problem on your website. Your code isn’t validating. Maybe there’s a layout glitch. You look at the source code and there’s a big mass of nested elements. Which closing tag is for which element? Where does that div end? A great solution is commenting your closing tags in HTML code.

Nested confusion

I’ve come across this problem on multiple occasions. I know that there’s a problem somewhere in the code, but there are elements nested several levels deep. In simpler websites this might not be a problem. Great semantic markup can make code easy to read, and identify which element is which.

In more complex websites, and particularly when working with content management systems such as WordPress which eliminate the ability to totally control the visual layout of your HTML code, it can become a much more difficult problem.

<div id="foo">
  <div class="bar">
    <ul>
      <li>Lorem ipsum</li>
      <li>Dolor sit amet</li>
      <li>Sed risus enim</li>
    </ul>
    <div class="intro">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    <div class="content">
      <p><strong>Sed risus enim, laoreet ut hendrerit sed, auctor...</strong></p>
	</div>
    </div>
</div>

Even in this relatively simple piece of code, as soon as the tabbing becomes inconsistent, it’s difficult to identify at first glance that there’s a missing closing tab, or which closing tag is relevant to which div.

HTML5 improves the situation a little. A wider range of elements means less reliance on multiple divs with different purposes. Even within HTML5 code, however, it’s likely that there’ll be nested sections, articles and the still useful divs.

Take notes while you’re coding

A quick and easy way to eliminate the issue is to clearly identify in your markup where divs start and where they finish. If an element has the id of “foo”, then immediately after the closing tag I add a comment identifying the closing tag as being for the “foo” id.

<div id="foo">
<div class="bar">
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Sed risus enim</li>
</ul>
<div class="intro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
<div class="content">
<p><strong>Sed risus enim, laoreet ut hendrerit sed, auctor...</strong></p>
</div><!-- .intro -->
</div><!-- .bar -->
</div><!-- #foo -->

Even when all indentation is removed, these comments make it easy to identify the issue. In this example, there is no closing tag for the div with the “content” class.

Easy and it works

There’s nothing very complex here. It has a minor negative impact on file size, but the benefits easily outweigh that problem.

Simple as it is, I still find it one of the most useful habits that I’ve ever picked up. There are so many occasions when it’s helped me to quickly identify a markup problem and fix it. It makes code easier to read, and going back to old code a much more pleasant experience.

If you enjoyed this post, why not subscribe to receive all the latest stories from Shiny Toy Robots?

Tagged as: , ,