Comments in HTML

Similar to other programming, markup, and markdown languages, comments in HTML provide other developers with development-specific information without affecting the user interface. Unlike other languages, however, HTML comments can be used to specify HTML elements for Internet Explorer only. This topic explains how to write HTML comments and their functional applications

Creating comments

HTML comments can be used to leave notes to yourself or other developers about a specific point in code. They can be initiated with <!--and concluded with -->, like so:

<!-- I'm an HTML comment! -->

They can be incorporated inline within other content:

<h1>This part will be displayed <!-- while this will not be displayed -->.</h1>

They can also span multiple lines to provide more information:

<!-- This is a multiline HTML comment.

 Whatever is in here will not be rendered by the browser.

 You can "comment out" entire sections of HTML code.

-->

However, they cannot appear within another HTML tag, like this:

<!-- This is a multiline HTML comment.

 Whatever is in here will not be rendered by the browser.

 You can "comment out" entire sections of HTML code.

-->

However, they cannot appear within another HTML tag, like this:

Note:- However, they cannot appear within another HTML tag, like this:

<h1 <!-- testAttribute="something" --> >This will not work</h1>

This produces invalid HTML as the entire <h1 <!-- testAttribute="something" -->block would be considered a single start tag h1 with some other invalid information contained within it, followed by a single > closing bracket that does nothing.

For compatibility with tools that try to parse HTML as XML or SGML, the body of your comment should not contain two dashes --.

Commenting out whitespace between inline elements:-

Inline display elements, usually such as span or a, will include up to one white-space character before and after them in the document. In order to avoid very long lines in the markup (that are hard to read) and unintentional white-space (which affects formatting), the white-space can be commented out

<!-- Use an HTML comment to nullify the newline character below: -->

<a href="#">I hope there will be no extra whitespace after this!</a><!--

--><button>Foo</button>

Try it without a comment between the inline elements, and there will be one space between them. Sometimes picking up the space character is desired.

Example code:

<!-- Use an HTML comment to nullify the newline character below: -->

<a href="#">I hope there will be no extra whitespace after this!</a>

<!--

--><button>Foo</button>

<hr>

<!-- Without it, you can notice a small formatting difference: -->

<a href="#">I hope there will be no extra whitespace after this!</a>

<button>Foo</button>