Adding Comments to HTML Code
In this guide you will learn how to use HTML comments to add documentation to your code base.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this video, we're going to work on an element that you can't see on the browser, but should not be overlooked-- comments.

When you use comments, you're making notes or giving instructions to yourself and/or other developers. These comments can be seen only on the source file, as they'll not be rendered on the browser.

To write a comment, use this syntax:

<!-- This is my great comment -->

Obviously, nothing is displayed on the browser.

However, if you right-click on the page and choose "View source code" option, you can see the comment in that file. Remember, anyone can see this comment through the browser. Refrain from putting anything such as insults about your boss, passwords, or anything else you wouldn't want the public eye to see onto the comment tag.

Also, you don't need comments for things that are self-explanatory. For example, a comment saying "bullet points" before a <ul> tag is completely unnecessary. Such comments are simply a waste of time and effort. Also, some developers think they need to explain any complex task they do. This is not considered good practice because you may change the code, but fail to change the comment. As a result, the comment may no longer be relevant to the reader.

I've seen these mistakes made by other developers, and this is why I recommend not repeating them.

This doesn't mean all comments are irrelevant. In fact, they bring attention to a specific code, making it exceptional for before custom tags, so everyone knows why these tags are in the code.

<div>
  <!-- Start of nav -->
  <widget>
    <h3>My Navigation Element</h3>
  </widget>
  <!-- End of nav -->
</div>

In short, use comments sparingly and only when relevant.