How to use comments in HTML?

[admin]

Comments
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:

Code: Select all

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

They can be incorporated inline within other content:

Code: Select all

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

They can also span multiple lines to provide more information:

Code: Select all

<!-- This is a multiline HTML comment.
Whatever is in here will not be rendered by the browser.
You can "[color=#FF0000]comment out[/color]" entire sections of HTML code.
-->

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

Code: Select all

<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.

Code: Select all

<!-- 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:

Code: Select all

<!-- 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>

Output: