03 - HTML comments

03 - HTML comments

Comments may seem like a very simple topic, yet they can be very powerful. There are several circumstances where comments written in your code can be helpful.

  1. Help you locate particular sections of your code quicker
  2. A communication tool when working within a team
  3. Provide an explanation for the code that's written
  4. Useful when debugging sections of code

When you really dig into each of the above mentioned circumstances you'll note that the underlying result of using comments in your code is an increase in productivity. However, it's important to note that your comments are only as good as the information you put into them. If you write poorly detailed comments, then hand your code over to a team member it's quite likely that it will take them just as long to figure out the code then if there were no comments written at all.

Syntax

The syntax used for comments differs depending on the code or programming language you're writing. When a comment is written within your HTML code, the web browser will ignore it and it will not be seen on the web page. Instead, it will only be visible within your code editor.

The syntax for an HTML comment is below:

<!-- I am an HTML comment -->

Visual Studio Code

Shortcut

Typically, the code editor you use will have a keyboard shortcut allowing you to quickly make written text a comment. For VS Code this shortcut is:

  • Windows: CTRL + /
  • Mac: CMD + /

Extension

One of the more common VS Code extensions for commenting your code is Better Comments by Aaron Bond. This extension allows you to categorize your comments into alerts, todos, highlights, etc. and to assign specific colors to these categories so the comments stand out more clearly in your code.

Conclusion

Whether you're working within a larger team or creating a personal project, I feel it's important to get comfortable using comments within your code. However, to really see an increase in your productivity your comments should be specific and provide detail regarding what you're trying to accomplish.