Commentary on Comments

It is a good idea to use comments in your coding projects. As you continue to learn, your code will likely become more complex, and projects will start to take longer. As a result, you may forget what each piece of code does or what you wanted to accomplish with it. With larger web projects, there's a good chance that other people will work collaboratively with you on your code. Well-commented code is easier to work with and generally looks more professional, which reflects positively on the designer(s) who wrote it.

An HTML comment tag opens with the character combination . A comment can span one line or multiple lines. Any text that appears within a comment will be readable in your code but will not display in the browser. Comments are essentially working notes viewable only to you or to anyone else looking over your code.

<!--Place Comment Here-->

Because of this syntax, there are a couple restrictions on what can go into a comment.

<!----My Comment----->
No extra hyphens on either end

<!--My--Comment-->
No double hyphens inside the comment

< !--My Comment-- >
No spaces between the tag's characters

Click through the tabs below to see examples of comments in action!

A comment can be placed at the start of HTML code that is all related to one section of your page.

For example, if you have a section devoted entirely to contact information, you can place a comment above that code so that you or anyone else will know that all the code in that group is tied to that section. This makes it much easier to sift through code if there's a specific piece you want to work on.

<!--Contact information section-->
<p>Get in touch with us!</p>
<table>
    <tr>
        <th>Phone</th>
        <td>(555)555-5555</td>
    </tr>
    <tr>
        <th>Email</th>
        <td>email@service.com</td>
    </tr>
    <tr>
        <th>Address</th>
        <td>10 Street Rd.</br>
        Cityville, MD 99999</td>
     </tr>
</table>

With more complex code, you can end up with a large number of elements nesting within one another. This can make it difficult to determine where the closing tags for certain elements go—especially if they're the same type of tag! Comments can help you easily spot where one section starts and another ends within nested elements.

<ol>
  <li>Section 1</li>
  <li>Section 2</li>
  <li>Section 3
    <ol>
      <li>Chapter 1</li>
      <li>Chapter 2
        <ol>
          <li>Pages 120-150</li>
          <li>Pages 150-180</li>
        </ol><!--End of page ranges-->
      </li>
    </ol><!--End of chapters-->
  </li>
</ol>

Another trick is using comments to debug. If your website is displaying some content incorrectly but you don't know what the cause is, you can "comment out" (or hide) bits of code you think may be the culprit. The advantage of this approach is that there's little risk of losing code compared to deleting code to find the error. You can keep moving the comment tags and previewing the results until you hunt down the cause of the problem.

This is also a good method for temporarily keeping content that hasn't been finalized yet from displaying. Let's look at our multiple list code again. If the page count isn't finalized yet for Chapter 2, you can put comment tags around that part of the list until that information is ready.

<ol>
  <li>Section 1</li>
  <li>Section 2</li>
  <li>Section 3
    <ol>
      <li>Chapter 1</li>
      <li>Chapter 2
        <!--<ol>
        <li>Pages 120-150</li>
        <li>Pages 150-180</li>
        </ol>--><!--End of page ranges-->
      </li>
    </ol><!--End of chapters-->
  </li>
</ol>

Using your own text editor or the coding space below, test out using comments with some of the elements and tags you've learned so far.

Comments are a great tool for clarifying pieces of code for yourself and others.

You Try!