Sponsored Ads
Comments are piece of codes that are ignored by all browsers. Actually you can’t call comments as codes because they are actually description, instructions or something else about the program.
Sponsored Ads
All programming languages have comments. Comments help you and others understand your code and increases code readability. A good programmer should always add comments to the program because even if you write the program, the program or software will be maintained by some others and may be modified by others. So for them to easily understand the code you should always add comments.
Html comments are created using the comment tag. Html comments are place in between <!– …. –>. So anything written in between the opening comment tag <!– and closing tag –> will be completely ignored by the browser.
Example
<!-- This is a comment. This is completely ignored by the browser -->
Note that there is an exclamation at the opening tag and not at the closing tag.
Multiline Comment
Html supports multiline comments too. The same comment tag is used to comment out multiple lines of code.
Example
<p>This shows a multiline Comment</p>
<!--
This is
a multi line
Comment
-->
Output
This shows a multiline Comment
Debugging Code
Comments are also used for debugging code. Since anything written inside comment tag will be ignored by the browser, you can comment out real code and they will be ignored and you can check what is working and what is not.
<div>this is a div</div>
<!--
<div>
<p>This is a paragraph</p>
<img src=”image.jpg”>
</div> -->
Output
Valid vs Invalid Comments
- Make sure you do don’t add any space as part of the comment tag. You can add space inside the comment but not part of the comment tag. Ie <!– and –>
- The — should not appear anywhere else in the comments other than part of the opening and closing tag. Otherwise it will be and invalid comment. It is a habit for many html coders to write long lines using hyphens like this ————– in comments which is actually invlid. Some browsers display it correctly while others not.
- Nested comment are invalid. That means you can’t have another comment inside a comment. Once you start a comment with an opening comment tag you should close it before writing another opening comment tag.
Example
Sponsored Ads
<! -- This is an invalid comment -->
<!-- This also is an --------- invalid comment -->
<!-- This comment<!-- is also --> invalid-->
Conditional Comments
Conditional comments are applicable to Microsoft Internet Explorer (IE). These comments are supported from IE5 onwords so this can be used to give conditional instructions to different versions of IE. For example you can add separate styles to a particular version of IE.
The starting and ending tags are same as normal comment so other browsers treat them as normal comment and they just are ignored it.
Example
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Using Comment Tag
There are few browsers that support <comment> tag to comment a part of HTML code.
Note − The <comment> tag deprecated in HTML5. Do not use this element.
Example
<p>This is <comment>not</comment> Internet Explorer.</p>
Output If you are using IE
This is Internet Explorer.
Output if you are not using IE
This is not Internet Explorer.
Commenting Script Code and CSS styles
You will javascript and CSS in separate tutorial but for now make a note that if you are using any scripting code like javascript or VB script in your code then it is a recommended to put the script code in valid Html comments so that older browsers can work properly.
Similarly it is recommended to place your CSS inside in valid Html comments so that older browsers work properly.
Example
<!DOCTYPE html>
<html>
<head>
<title>Commenting Scripts and CSS Styles</title><head>
<!-- Commenting javascript codes -->
<script>
<!--
document.write("Hello World! From javascript")
//-->
</script>
<!-- Commenting CSS codes -->
<style>
<!--
.demostyle {
border:1px solid grey;
color: #FF0000;
}
//-->
</style>
</head>
<body>
<p class"demostyle">This style is created using CSS </p>
</body>
</html>
Sponsored Ads
Output
This style is created using CSS
Sponsored Ads