<!-- Comments --> in HTML

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

Comments in HTML 5

Comments are used to identify sections of code or text that are to be ignored by HTML parsers. There are various reasons for adding comments to HTML code, for example:

  • to identify sections of HTML code, or include some informational or descriptive text
  • to comment out HTML code that is in error or no longer relevant
  • to provide an easy way to make changes to a web page for HTML code testing or A/B/multivariate testing in marketing analysis of web designs

Any text, scripts or HTML code within properly coded comments will be ignored. However, if comments are coded where not expected, such as in text content, what looks like comments is sometimes treated as text, which will not be ignored.


HTML Comment Syntax

<html xmlns="http://www.w3.org/1999/xhtml">
   <!-- ... comment ... -->
   <head>
      ...
      <title>My Title</title> <!-- no comments inside title element -->
      ...
      <!-- ... comment ... -->
      ...
   </head>
   <body>
      ...
      <!-- ... comment ... -->
      ...
   </body>
   <!-- ... comment ... -->
</html>
How to code comments in HTML or XML
Rules for commenting out HTML code
  • Code HTML comments anywhere between the starting <html xmlns="http://www.w3.org/1999/xhtml"> tag and ending </html> tag, but not where text content is expected. (See the issues with HTML 5 comments.)
  • Code the starting comment delimiter characters <!-- at the beginning of the HTML code that is to be commented out.
  • Code the ending comment delimiter characters --> at the end of the HTML code that is being commented out.
  • Make sure the body of the comment does not include any sequence of -- characters (double hyphens).
Child elements in HTML comments

Although the code within HTML comments can include other tags, all of the tags between the beginning of the comments and the end of the comments will be ignored. Tags inside comments do not need to be matched up since they are not treated as nested elements.

HTML comments within scripts

However, HTML comments within scripts will not cause the script code to be ignored. This HTML code pattern was designed to allow hiding content inside a script element from any browsers that might otherwise treat that content as phrasing content rather than as JavaScript code.

Comments in JavaScript

In JavaScript code, use two slash characters (//) to comment out code to the end of the line. For a comment that can span more than one line of HTML code, start the comment with the delimiter characters /* and end it with the delimiters */.


HTML Comments in XSLT code

<xsl:template ...>
   ...
   <!-- XSLT comment -->
   ...
   <xsl:comment>HTML comment</xsl:comment>
   ...
</xsl:template>

When comments are coded in an XSL template, they are treated as XSLT comments, not HTML comments. The <xsl:comment> instruction can be used in XSLT code to include an HTML comment in a template.


Examples of HTML Comments

Examples of comments in HTML 5
Comments in HTML Documents
<!-- This will be ignored - - it's a comment! -->

The space between the hyphens in the middle is required because two adjacent hyphens (--) are not permitted in comments.

<!-- changed to use <abbr> because <acronym> is deprecated:
<acronym>--><abbr>HTML<!--</acronym>--></abbr>

In this example, the starting <abbr> tag and ending </abbr> tags actually do match up even though they look like they are not properly nested.

<!--
<script type="text/javascript">
   window.onload=alert("This won't happen.")
</script>
-->
<script type="text/javascript">
<!--
   window.onload=alert("Hello JavaScript World!")
// -->
</script>

In this case the alert will be displayed if JavaScript is enabled. The comments will only hide the JavaScript code from browsers without JavaScript support or with scripts disabled. In some cases, browsers give the user an option to disable scripts.

Comments in HTML Templates
<xsl:template name="html-navigation-template">
   <!-- no parameters -->
   <xsl:if test="not(html:nav)">
      <xsl:comment> Missing web page navigation section! </xsl:comment>
   </xsl:if>
   <xsl:apply-templates select="html:nav"/>
</xsl:template>

The XSLT comment (<!-- no parameters -->) will appear in the template but not in the HTML code. The comment inside the xsl:comment element will appear only when the template is used to transform the HTML document on the server side or, if transformed on the client, when viewing the HTML code for the result document.


Changes in HTML 5 - HTML Comments

What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML
Issues with HTML comments

When comment code appears where text content is expected, such as in a <title> tag, which is one of the tags that expect text content, whether or not it is treated as comments depends on how the HTML document is being parsed. When it is being parsed as legacy HTML (for example, by IE 8 and some search engine crawlers), the code will be included in the text content. When the HTML document is being parsed as either xHTML, the XML serialization of HTML, or pure XML, the code will be treated as comments and will not appear in the displayed text. To avoid this, do not code comments in the <title> tag or other text content.

To escape text containing the comment delimiters (<!--) in text content so that it appears for all browsers, use a <![CDATA[...]]> section instead.


Valid HTML 5