fbpx
April 2, 2020
html comments

Tutorial #8 | Understanding the HTML Comments and Their Usage

Hello! In this tutorial we will be discussing about HTML comments. Imagine you intend adding descriptive words to your HTML documents so that you can easily remember the function of a particular line of code. You need to add this descriptive words in such a way that it doesn’t affect the HTML codes or any other codes you are writing. How do you intend doing that?

What are HTML Comments?

HTML comments are words added to an HTML document for the main purpose of future reference and for easy identification. This words are expected to be added in such a way that they do not affect the HTML codes and are not readable or executable by the web browser. This words do not add any special function and wont display on the web browser.  Now how do we add HTML comments to an HTML document? Well! We don’t just add comments to a web document, we make use of some structures to enable the web browser identify them as comments.

HTML comments are mostly place between the <!-- --> tags. Any word placed between this tags are seen by the browser as comments.

For example placing the below sentence in a web document as a comment will give the below result.

sentence: “this sentence represents an illustration of how comments work and are been placed in a HTML document”

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
        
    
<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="This web page is about html meta tag learning" >
        <meta http-equiv="refresh" content="5" /> 
        <title>comment Document</title>
        <p>this is a web page explaining comments </p>
        
        
<!-- this sentence represents an illustration of how comments work and are been placed in a HTML document -->
        
        
        
</head>
<body>
        
</body>
</html>
html comments

Valid AND Invalid Comments in HTML

Invalid HTML comments

Sometimes we get to make comments and a single space can turn them to an invalid comment in HTML. When structuring your comment you should ensure there are no spaces between the “--” in the opening and closing tags and also there are no spaces between the "<" and the "!--".

Example of Invalid comments

<!DOCTYPE html>
<html lang="en">
<head>
        
    
<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="This web page is about html meta tag learning" >
        <meta http-equiv="refresh" content="5" /> 
        <title>comment Document</title>
        <p>this is a web page explaining comments </p>
        
        
         <!- - this sentence represents an illustration of how comments work and are been placed in a HTML document  -->
        
       
        
</head>
<body>
        
</body>
</html>

A close observation of the above line of code, you can see that there are spaces between the “–“

RESULT ON WEB BROWSER

html invalid comment example

Valid HTML comment

Example of a valid HTML comment is with the tags having no spaces in them as shown below

<!DOCTYPE html>
<html lang="en">
<head>
        
    
<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="This web page is about html meta tag learning" >
        <meta http-equiv="refresh" content="5" /> 
        <title>comment Document</title>
        <p>this is a web page explaining comments </p>
        
        
        <!--  this sentence represents an illustration of how comments work and are been placed in a HTML document -->
        
        
        
</head>
<body>
        
</body>
</html>

Multi-line HTML comment

Making a multi line comment is similar to making a multi line comment in HTML. For multi line comments in HTML, we can easily place the opening and closing comment tags in different lines then place the comment in between them as shown below

<!DOCTYPE html>
<html lang="en">
<head>
        
    
<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="This web page is about html meta tag learning" >
        <title>comment Document</title>
        <p>this is a web page explaining comments </p>
        
        <!--
                this sentence represents an illustration of how comments work and are been placed in a HTML document

                This is the second line showing a multi line comment in HTML

        -->
          
        
        
        
</head>
<body>
        
</body>
</html>

RESULT ON WEB BROWSER

html comments

Conditional comments

conditional comments are comments that come up when a condition is met. Conditional comments are understood by only internet explorer on windows and they are ignored by other browsers. This can be used to give conditional statements to internet explorers. Example of a conditional comment is shown below.

<!DOCTYPE html>
<html lang="en">
<head>
        
    
<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="This web page is about html meta tag learning" >
        <title>comment Document</title>
        <p>this is a web page explaining comments </p>

        
        <!--[if IE 6]>
                this sentence represents an illustration of how comments work and are been placed in a HTML document

                This is the second line showing a multi line comment in HTML

        <![endif]-->
          
        
        
        
</head>
<body>
        
</body>
</html>

Commenting Script codes

We have been talking about commenting words earlier ? have you ever wondered how we can comment script codes ? such as java script codes?

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
        
    
<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="This web page is about html meta tag learning" >
        <title>comment Document</title>
        <p>this is a web page explaining comments </p>
        <script>

        <!--

        document.write('alert hello mike')

        //-->
        
        </script>
        
        
          
        
        
        
</head>
<body>
        
</body>
</html>

The script tag added is used when introducing java script codes to HTML document. you will learn more about java scripting when you go through our course on java script.

Commenting Style Shit

when adding style sheet to your HTML document, you might need to comment them. Here is an example of such commenting style

<!DOCTYPE html>
<html lang="en">
<head>
        
    
<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="description" content="This web page is about html meta tag learning" >
        <title>comment Document</title>
        <p>this is a web page explaining comments </p>


        <style>
        .body {
                background-color: aqua;

        }
        
        </style>

        
        
        
        
          
        
        
        
</head>
<body>
        
</body>
</html>

The <style> & </style> tags are used to introduce css style sheet to an HTML document. You can go through our courses on CSS to learn more about style sheet.

Conclusion

Now you understand the basics of HTML comments and you are really doing great. Lets move on to the next tutorial on   HTML IMAGES

Leave a Reply

Your email address will not be published. Required fields are marked *