Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

Useful Comments

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v4 i7
Originally Published: May 1, 2008

One of the more useful - and overlooked - bits of (X)HTML and CSS is the Comment tag. Something as small as a <!-- and --> and a /* and */ is so handy that if the coding gurus hadn't thought of it, I'd have to come up with it myself.

You may know that Comment tags are used to hide some of your code and/or content of your page. But it's how they can be used which gives them their valued utility.

For example, say I had a paragraph that I wanted to temporarily hide from my web visitors. The rest of the page is good to go live (put on the server), but this one paragraph needs to be checked out for whatever reason. I could do this:

<!-- <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante</p> -->

Everything between <!-- and --> will be commented out (hidden) from my web visitor. This way I'm relieved of the burden of cutting this paragraph out of my web document and having to store the information elsewhere.

But what are some of the other ways I could use the Comment tag?

1. Making A Note

Say you have a tricky section of code. Six months from now you're going to forget what you did (maybe six minutes from now, in my case).

You could use a Comment tag to make a note, like this:

<!- Inside (nested) list is nested directly against a list item -->

<ul>
<li>Asia</li>
<li>Africa</li>
<li><ul>
<li>Botswana</li>
<li>Burkina Faso</li>
<li>Zimbabwe</li>
<li>Djibouti</li>
</ul></li>
<li>Europe</li>
</ul>

2. Making A Label

Along the same lines, you can use a Comment tag to label the start and/or end of a section of markup. For example:

<!-- start header section -->

<div id="masthead"><img src="images/joc_logo.gif" alt="Joy Of Code - Web Design Training and Consulting" /></div>

<h1>Welcome To My Page</h1>

</div> <!-- end header section -->

3. Troubleshooting

This last example of the (X)HTML Comment tag might be the best of all.

If you're running into code woes and you are working with the (X)HTML Validator (and I know a lot of you are), you can comment out the code you suspect is causing your page not to pass validation.

For instance, you might look at this and think that the list is not properly closed, so you comment it out like so:

<!--
<ul>
<li>list item one</li>
<li>list item two</li>
-->

If your page validates, then remove the Comment tags, put in the close </ul> tag and then re-validate your page. You should get that warm and fuzzy feeling when you know you've done something right.

What about CSS? Is there a Comment "tag" for it too?

To hide anything when using CSS use /* and */ like this:

/* sets the foreground and background color of my entire page */

body
{color:#fff;
background:#000; }

Besides using the CSS Comment tag to make a note (as in the above), here I use it to hide a rule that I'm not sure about. The rule needs to be checked out or maybe used at a later date:

h1
{text-transform:uppercase;
font-weight:normal;
/* border-bottom:1px blue solid; */ }

The bottom border style for the h1 element is commented out. If later I want to use it, I'll just remove /* and */.

Use the CSS Comment tag for all of the same reasons you can use the (X)HTML Comment tag. Also, remember never - in (X)HTML or CSS - nest Comment tags. For example:

<!-- this is work I have to do later

<!-- <p>lorem and all the rest</p> -->

when I get back to work -->

That's a big no-no!!