Learn HTML and CSS: An Absolute Beginner’s Guide

Share this article

Commenting Your HTML

Back in the garage, you’re doing a little work on your project car and, as you prepare to replace the existing tires with a new set, you notice that your hubcaps aren’t bolted on: you’d stuck them to the car with nothing more than super glue. There must have been a good reason for doing that, but you can’t remember what it was. The trouble is, if you had a reason to attach the hubcaps that way before, surely you should do it the same way again. Wouldn’t it be great if you’d left yourself a note when you first did it, explaining why you used super glue instead of bolts? Then again, your car wouldn’t look very nice with notes stuck all over it. What a quandary.

When you’re creating a web site, you may find yourself in a similar situation. You might build a site then not touch it again for six months. Then when you revisit the work, you might find yourself going through the all-too-familiar head-scratching routine. Fortunately, there is a solution.

XHTML — like most programming and markup languages — allows you to use comments. Comments are perfect for making notes about something you’ve done and, though they’re included within your code, comments do not affect the on-screen display. Here’s an example of a comment:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”      
     “https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>      
 <html xmlns=”https://www.w3.org/1999/xhtml”>      
   <head>      
     <title>Comment example</title>      
     <meta http-equiv=”Content-Type”      
         content=”text/html; charset=utf-8″/>      
   </head>      
   <body>      
     <p>I really, <em>really</em> like this XHTML stuff.</p>      
     <!– Added emphasis using the em element. Handy one, that. –>      
   </body>      
 </html>

The figure below shows the page viewed on-screen.

The comment remains hidden in the on-screen display

Comments must start with <!--, after which you’re free to type whatever you like as a “note to self.” Well, you’re free to type almost anything: you cannot type double dashes. Why not? Because that’s a signal that the comment is about to end — the --> part.

Oh, and did you spot how we snuck another new element in there? The emphasis element, denoted with the <em> and </em> tags, is used wherever … well, do I really need to tell you? Actually, that last question was there to illustrate this point: did you notice that the word “really” appeared in italics? Read that part to yourself now, and listen to the way it sounds in your head. Now you know when to use the em element.

Using Comments to Hide Markup from Browsers Temporarily

There is no limit to the amount of information you can put into a comment, and this is why comments are often used to hide a section of a web page temporarily. Commenting may be preferable to deleting content, particularly if you want to put that information back into the web page at a later date (if it’s in a comment, you won’t have to re-type it). This is often called “commenting out” markup. Here’s an example:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”      
     “https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>      
 <html xmlns=”https://www.w3.org/1999/xhtml”>      
   <head>      
     <title>Commenting out XHTML</title>      
     <meta http-equiv=”Content-Type”      
         content=”text/html; charset=utf-8″/>      
   </head>      
   <body>      
     <h1>Current Stock</h1>      
     <p>The following items are available for order:</p>      
     <ul>      
       <li>Dark Smoke Window Tinting</li>      
       <li>Bronze Window Tinting</li>      
       <!– <li>Spray mount</li>      
       <li>Craft knife (pack of 5)</li> –>      
     </ul>      
   </body>      
 </html>

The figure below shows how the page displays in Firefox.

The final, commented list items are not displayed

Remember, you write a comment like this: <!--Your comment here followed by the comment closer, two dashes and a right-angled bracket-->.

Go to page: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19
Ian LloydIan Lloyd
View Author
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week