Introduction
This chapter demonstrates about the HTML Comments which is used to insert the comments into an HTML document and are ignored by all the browsers. Comments are very useful to understand the code. Following are the concepts covered.
- About HTML Comments
- Types Of Comments
Description
Html comments is a comment code which are used to explain what the code does and the comments are not displayed by all the browsers and are very useful when the user dealing with lot of code. Comments does not have any Attribute values. Usually comments are placed in between the <!-- …--!> tags as shown in the below snippet code.
[html]
<!DOCTYPE html>
<html>
<body>
<p>This is paragraph</p>
<!-- Add Your comment here -->
</body>
</html>
[/html]
In Html whatever the content placed in between the <-- ….--> tag is an ignored content by all the browser. The figure below demonstrates the html comments.
The code below consist of comments which demonstrates about the header session, where it is starts and where it is ends.
[html]
<!DOCTYPE html>
<html>
<body>
<p>Content of the document</p><!-- This is an header section -->
<p>SPlessons</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
HTML introduced various types of comments to understand the code easily, when the user dealing with the complex codes. Comments are very helpful and increase the readability of the code. Here are the various types of comments listed below.
- Comment tag
- Multiline Comments
- Comment Script Code
- Valid Comments vs Invalid Comments
- Commenting Style sheets
Description
Html also have the a comment tag which is used display the comments in browser. Whatever the content written in these comment tags is displayed on a web page as a part of an html code.
The code below demonstrates the comment tag which displays the given comments in a web browser. Internet explorer (Earlier version) do not support the comment tag and and where as supported by all other browsers. The snippet code below demonstrate the use of comment tag in html.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Comment Tag</title>
</head>
<body>
<p> Simple Programming lessons <comment>(SPlessons)</comment> Tutorials </p>
</body>
</html>
[/html]
Result
By running the above code in a supported browser user can get the following output as shown in below image.
Now run the above code in earlier version of Internet Explorer user can get the following output as shown in below image.
Description
Usually in all the documents single line of comments are used, but html also supports multi lines of comments. These comments are not displayed by the web browsers which is placed in between the < !—Multi line comments --> tags.
The code below demonstrates the Multi line comments which contains 2 or 3 lines of comments as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!-- This is a multiline comment and it can
span through as many as lines you like.-->
<p>Content of the Document</p>
<p>SPlessons</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Commenting script code means giving the comments in a script format, script code should be displayed in a web browsers but when using the script code in html then it is mandatory to maintain the scripts in proper comments, so that the browsers can work properly.
The code below demonstrates the use of commenting Scripts, were script comments also displayed on web browsers like as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("SPlessons!")
//-->
</script>
</head>
<body>
<p>Simple Programming Lessons!</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Nested comments are not supported by the Html and the next thing is spaces should not appear in between the double slashes. The ending tag is the mandatory for the comments.
The code below demonstrates the valid comment.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>SPLESSONS Tutorial</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates the invalid comment which have some unwanted spaces in between the angular bracket and exclamation mark.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
< !-- This is a Invalid comment -- >
<p>SPLESSONS Tutorial</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In order to use style sheets in commenting style sheets user need to maintain the proper codes, so that the web browser work correctly.
The code below demonstrates inserting the style sheet into the html code.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
border:2px solid #FF0040;
}
//-->
</style>
</head>
<body>
<div class="example">SPlessons</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Examples
Finally The code below demonstrates the way to give the comments to the html code.
[html]
<!DOCTYPE html>
<html>
<body>
<p>This is paragraph</p>
<!-- Add Your comment here -->
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Comments are very useful to understand the complex codes.
- Nested comments are not allowed by the html.
- Multi-line comments also supported by the html.