Hello and good morning, welcome to this new section of my tutorial. In this tutorial am going to be talking about Html comments, am guessing you all should know what a comment is so we are going to discuss how these comments can be used on a Html document.
Comment is a piece of code which is ignored by the web browser. It is a very good practice to always comment on all your Html codes, especially in complex documents, in order to be able to indicate sections of the document, and any other important note to any other persons looking at the Html code. Comments also helps you and others understand your code and increases code readability.
The Html comments are placed inside the <!-- ...... --> tags. So any content placed within <!-- .... --> tags will be considered as a comment and will be completely ignored by the web browser.
Example
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts Here -->
<title>Comments Example</title>
</head> <!-- Document Header Ends Here -->
<body>
<p>This is the body of the document</p>
</body>
</html>
<html>
<head> <!-- Document Header Starts Here -->
<title>Comments Example</title>
</head> <!-- Document Header Ends Here -->
<body>
<p>This is the body of the document</p>
</body>
</html>
You can try the above code out using your text editor for better understanding. In the above code you will find out that the contents of <!-- ... --> tags will be ignored by the web browser and wont be processed.
RECOMMENDED: Html Document Structure
Valid VS Invalid Comments
The comments do not nest which means a comment cannot be put inside another comment. Secondly the double-dash sequence "--" may not appear inside a comment except as a part of the closing --> tag. You may also make sure that there are no spaces in the start-of-comment string.
Example
<!DOCTYPE html>
<html>
<head>
<title>Valid Comments Example</title>
</head>
<body>
<p>This is the body of the document</p>
<!-- This is a Valid Comment -->
</body>
</html>
<html>
<head>
<title>Valid Comments Example</title>
</head>
<body>
<p>This is the body of the document</p>
<!-- This is a Valid Comment -->
</body>
</html>
The comment on the above code is a valid Html comment but the following line below is not a valid comment and will be displayed by the web browser. This is becuase there is a space between the left angle bracket and the exclamation mark.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comments Example</title>
</head>
<body>
<p>This is the body of the document</p>
< !-- This is not a Valid Comment -->
</body>
</html>
<html>
<head>
<title>Invalid Comments Example</title>
</head>
<body>
<p>This is the body of the document</p>
< !-- This is not a Valid Comment -->
</body>
</html>
If you try the above code out it will produce the following result:
This is the body of the document
< !-- This is not a Valid Comment -->
< !-- This is not a Valid Comment -->
Multiline Comments
So far we have seen the single line comments, Html also supports multi-line comments.
You can comment multiple lines by the special beginning tag <!-- ending tag --> placed before the first line and end of the last line as shown in the example below.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multi-line Comments Example</title>
</head>
<body>
<p>This is the body of the document</p>
<!--
This is a multi-line comment and it can take as many lines as
possible without the browser doing any process on it.
-->
</body>
</html>
<html>
<head>
<title>Multi-line Comments Example</title>
</head>
<body>
<p>This is the body of the document</p>
<!--
This is a multi-line comment and it can take as many lines as
possible without the browser doing any process on it.
-->
</body>
</html>
Conditional Comments
Conditional comments only work on Internet Explorer on windows but they are ignored by other web browsers. They are only supported from Explorer 5 onwards, and you can use them to give conditional instructions to different versions of Internet Explorer.
Example
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comment Example</title>
<!--[if IE 6]>
Special instructions for IE 6 goes in here
<![endif]-->
</head>
<body>
<p>This is the body of the document</p>
</body>
</html>
<html>
<head>
<title>Conditional Comment Example</title>
<!--[if IE 6]>
Special instructions for IE 6 goes in here
<![endif]-->
</head>
<body>
<p>This is the body of the document</p>
</body>
</html>
You will often come accross some conditions where you will need to apply a different style sheet based on various versions of the Internet Explorer. When such situations are encountered, then the conditional comments will be helpful.
You can also read our tutorial post on: Html Introduction
Using Comment Tag
There are few web browsers that support the use of <comment> tag to comment a part of Html code.
Example
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is the body of the document</p>
<comment>this is a comment tag example</comment>
</body>
</html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is the body of the document</p>
<comment>this is a comment tag example</comment>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. Your can also drop your questions via the comment box.
Commenting Script Code
Though you will learn javascript in a seperate tutorial, but here you should take note that if you are using javascript in your Html code then it is recommended to put that script code inside a proper Html comments so that old browsers can work properly.
Example
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Example</title>
<script>
<!--
document.write("Hello HTML")
//-->
</script>
</head>
<body>
<p>This is the body of the document</p>
</body>
</html>
<html>
<head>
<title>Commenting Script Example</title>
<script>
<!--
document.write("Hello HTML")
//-->
</script>
</head>
<body>
<p>This is the body of the document</p>
</body>
</html>
Commenting Style Sheets
Though you will be learning about how to use style sheets with Html in a separate tutorial post, but you should take note that if you are making use of Cascading Style Sheet in your Html code then it is recommended to put that style sheet code inside a proper Html comment so that old browsers can work properly.
RECOMMENDED: Html-Meta Tags
Example
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheet</title>
<style>
<!--
.menu {
background-color:blue;
border:3px solid red;
}
//-->
</style>
</head>
<body>
<div class="menu">Hello world!</div>
</body>
</html>
<html>
<head>
<title>Commenting Style Sheet</title>
<style>
<!--
.menu {
background-color:blue;
border:3px solid red;
}
//-->
</style>
</head>
<body>
<div class="menu">Hello world!</div>
</body>
</html>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box.
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be discussing about Html Images.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.