🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

Function and Usage of the HTML Comment

Reading time 3 min
Published Jun 23, 2017
Updated Oct 17, 2019

TL;DR – HTML comments can be left in the source code for the developer to see, but the browser will not display them to the user.

HTML Comment Explained

A comment in HTML is a section of code that is not rendered and shown in the browser display. While a visitor of your website can see text, videos, and pictures, they are not able to look at what you have commented:

Example
<!--This is an example text that won't be displayed in the browser-->
<p>This will be shown in the browser.</p>

Generally, HTML comments are for you or other developers who might be looking at the source code. Their purpose is to help the author of the code and other developers understand it better. Using HTML comments, you can explain your choices to a colleague reviewing your code or even debug a program quicker.

Syntax for Comments in HTML

The tags used to separate HTML comments from the rest of the text are simple:

<!-- comment text -->

You can also use them for multiline HTML comments:

<!--
comment line 1
comment line 2
comment line 3
-->

When looking at how to comment in HTML, you may come upon a <comment> tag – however, it's an experimental element which was never in the HTML specification. No modern browser supports it:

Example
This tag is <comment>NOT</comment> supported.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Commenting Code Blocks Out

Using the HTML comment tags, you can also comment out a complex or a long piece of HTML code to disable it:

Example
<div>
<p>This text is visible. Check the source code for multi-line comment.</p>
<!--  
Hello, world! I am a comment and I am
displayed in multiple lines!
--> 
</div>

Being able to comment out in HTML helps in easy debugging or testing. Sometimes you find errors in your code but aren't sure where or what is the exact problem. In such a case, you can comment parts out to temporarily deactivate your code and find out which bit is causing the issue.

Unusual Types of HTML Comments

There are two other types of comments in HTML which are a little more complex and serve a different purpose: conditional and software comments. Both of them belong to old technologies that you should not use now. However, it's good to understand what they are in case you come upon them in older documents.

The conditional HTML comment feature was applicable in the Internet Explorer (IE) browser versions 5–9. As the name suggests, it gave conditions on what to display:

Example
<div>
  <!--[if IE 5]>
  Add special instructions for the Internet explorer browser here
  <![endif]-->
</div>

Note: IE 10 and newer versions do not support conditional comments.

A software comment could be included in an HTML editor called FrontPage to deliver a specific message:

Example
<!--webbot bot-->

Note: FrontPage is discontinued: the extended support for it ended in 2014.

HTML Comment: Useful Tips

  • Unlike most HTML elements, comments cannot be nested.
  • Make sure to delete every unnecessary comment in HTML before publishing the site: a smaller file will be loaded quicker by the browser.