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.

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.
Basics
Introduction
Syntax
Editors
Basic Examples
Head Section
<!DOCTYPE>
Tags and Elements
Semantic Elements
Tags Reference
Attributes
Comments
Block and Inline Elements
Forms
Form Elements
Input
Responsive Web Design
Inline Scripts
Uniform Resource Locator
Redirect
XHTML
Geolocation
Drag and Drop
Local Storage
Web Workers
Server-Sent Events
Character Encoding
Text Formatting
Quotation and Citation Elements
Headings
Paragraphs
Links
Tables
Lists
Symbols
Space
Tab
Styles
Computer Code
Layout
Classes
Colors
Images
iframes
Audio Player
Video Player
YouTube Videos
Multimedia
Canvas
SVG
<!-- -->
<a>
<abbr>
<acronym> DEPRECATED
<address>
<applet> DEPRECATED
<article>
<aside>
<audio>
<b>
<base>
<basefont> DEPRECATED
<bdi>
<bdo>
<big> DEPRECATED
<blink> DEPRECATED
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center> DEPRECATED
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir> DEPRECATED
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font> DEPRECATED
<footer>
<form>
<frame> DEPRECATED
<frameset> DEPRECATED
<h1> – <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen> DEPRECATED
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem> DEPRECATED
<meta>
<meter>
<nav>
<noframes> DEPRECATED
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike> DEPRECATED
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt> DEPRECATED
<u>
<ul>
<var>
<video>
<wbr>