HTML5 Tutorial - HTML Comments

HTML Comments

Before we go ahead in this chapter we need to understand one thing that whether we are learners or professionals, we have to write massive codes to learn or to built a web site. If we think programming or coding is required less amount of work or efforts then we are wrong. A huge amount efforts and cods are required to build a little app. We need to remember and understand the codes on HTML documents.

For example we can look at the Facebook. Facebook started in 2004 but even in the starting period it was not too simple to code. It was a group effort and now FB is an ocean of codes.

Why HTML Comments are used?

When a developer builds a website then he needs to remember the use of the codes. In other words we can say why particular code is placed at particular location of the document is must be remembered by the developer. If he doesn’t understand the purpose of the code then he might be confused while he is trying to debug the codes. It is almost impossible for a developers to keep remember those massive codes. Therefore Programmers and Developers use the comments.

Comments are the set of information or notifications that defined by the developers which is not displayed by the web browsers and they help the developers to understand the source code.

Example - 1

<!--This is an HTML comment-->

Above code is not rendered on web page and stay invisible

How HTML Comments are used

To use HTML comment we need to define opening tag with “<! --“. After that we can write information and notifications and define closing tag “-- >”. Likely you can see in below example.

Example - 2

<div class="dropdown-menu">
 <a class="dropdown-item" href="#">HTML-5 Tutorial</a>
 <a class="dropdown-item" href="#">CSS Tutorial</a>
 <a class="dropdown-item" href="#">JS Tutorial</a>
 <!--
 <a class="dropdown-item" href="#">PHP Tutorial</a> -- Not Displayed on web page --
 -->
 <a class="dropdown-item" href="#">JQuery Tutorial</a>
 <a class="dropdown-item" href="#">NodeJS Tutorial</a>
</div>

Comment usually looks in Green color on HTML document but some text editor uses different color.
Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.

Conditional Comments

Many website use feature detection techniques to ensure their site provide different experience for browsers of different capabilities. Some of the web sites use server or client side script to detect the browser version but some use conditional comments which is supported by Internet Explorer only. Conditional comments make it easy to detect earlier versions of Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.

Internet Explorer Version below IE5 is referred as downlevel browser. IE version above then 5 is called uplevel browsers. A block conditional comment that is ignored by downlevel browsers is referred as downlevel- hidden and a block conditional comment that is parsed by downlevel browsers is referred as downlevel- revealed.

Syntax of conditional comments

Comment Type	Syntax or possible Value
Standard HTML Comment	<!--Comment Content-->
Downlevel-Hidden	<!--[if expression]>HTML <![endif]-->
Downlevel-Revealed	<![if expression]>HTML <![endif]>

Example - 3

Example 1.1
<!--[if IE 8]>
<p>Welcome to Internet Explorer 8.</p>
<![endif]-->

Example 1.2
<!--[if gte IE 7]>
<script>
  alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer.");
</script>
<p>Thank you for closing the message box.</p>
<![endif]-->

Tips: Conditional Comments are no longer supported from Internet Explorer 10. To test all given examples of conditional comment you must have IE version below 10.

Related Topics