Thursday, July 6, 2017

Html-Comments

Hello and good morning,welcome to this new section of my tutorial. In this tutorial am gonna be talking about HTML comments, am guessing you all should know what a comment is so we gonna 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 good practice to always comment on your HTML codes, especially in complex documents, in other 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.

HTML comments are placed inside the <!--  ......   --> tags. So, any content placed with-in <!-- ...  --> 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>

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 browser and wont be processed.

Valid VS Invalid Comments
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 staer-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>

The comment on the above code is a valid 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>
 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  -->

Multiline Comments
So far we have seen 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>

Conditional Comments 
Conditional comments only work in Internet Explorer on windows but they are ignored by the browsers. They are 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 Comments 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 come accross conditions where you will need to apply a different style sheet based on different versions of Internet Explorer, in such a situation conditional comments will be helpful.

Using Comment Tag 
There are few 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>
You can try the above code out using your text editor for better understanding and feel free to drop your questions on the comment box.

Commenting Script Code 
Though you will learn javascript in a seperate tutorial, but here you must take note that if you are using javascript in your HTML code then it is recommended to put that script code inside 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>

Commenting Style Sheets 
Though you will learnn using style sheets with HTML in a seperate tutorial, but you should also take note that if you are using Cascading Style Sheet (CSS) 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.



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>
 You can try the above code out using your text editor for better understanding and feel free to drop your questions on the comment box.

Well that it for tutorial, now that you know all about HTML comments, we gonna talk about HTML images in our next tutorial, bye for now and goodluck!!

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration , Html Basic Tags , Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase Tags , Html-Phrase Tags[CONCLUSION] , Html-Meta Tags
Share:

0 comments:

Post a Comment