It is beneficial to get into a good practice of using effective comments in your coding early on. As you continue to learn more, your code will likely become significantly more complicated, and projects will take longer. As a result, you may start to forget what each piece of code does, or what you wanted to accomplish with it. Additionally, in bigger web projects, there's a good chance that other people will also work with your code. Well-commented code is easier to work on, and generally looks more professional when done right, reflecting positively on the designer who wrote it.
An HTML comment tag opens with the character combination <!-- and closes with -->. A comment can span one 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 that only need to be viewable to the designers.
Because of this syntax, there are a couple restrictions on what can go into a comment.
| <!----My Comment----> | <!--My--Comment--> | < !--My Comment-- > |
| No extra hyphens on either end | No double hyphens inside the comment | No spaces between the tag's characters |
A comment can be placed at the start of HTML 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 you or anyone else will know that all the code in that group is tied into 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> |
You'll also eventually find that with more complicated 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!
| <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 that's handy on more complex projects 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" bits of code you think may be the culprit. The best part about this approach is there's little risk of losing code compared to deleting code to find the error. And 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 from displaying that hasn't been finalized yet. Let's look at our multiple list code again. If say, the page count isn't finalized for Chapter 2 yet, 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> |
