Similar to another programming, markup, and markdown languages, comments in HTML provide other developers with development speciﬁc information without aﬀecting 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.
Section 9.1: Creating comments
HTML comments can be used to leave notes to yourself or other developers about a speciﬁc 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:
<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 –.
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 aﬀects 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.
<!-- Use 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>