HTML TUTORIAL

How To Structure HTML Comments On A Web Page

HTML COMMENTS
Written by ikenna

In this tutorial, we will be discussing about HTML COMMENTS and how we can easily use them when building web documents. In our previous tutorial, we looked at HTML META TAGS and we discussed their importance and usage. If you havent gone through this tutorial, you can do so using the link below

PREVIOUS TUTORIAL: Introduction to HTML Meta Tags and How To Implement Them

Introduction to Comments in HTML

HTML comments are used to describe the function of some specific lines of code or for the purpose of referencing. Lets assume there are some descriptive write ups you intend adding to your web document to help you identify some key important areas in your HTML code. Such situation can be easily tackled using the HTML comment structures. The typical syntax or structure for adding HTML comment is using the <!-- --> tags. Any word placed in between this tags are seen as comments by the web browser.

Example shown below

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8">     
<!-- this sentence represents an illustration of how comments work and are been placed in a HTML document --> 
</head>
<body>
        
</body>
</html>

VALID COMMENTS AND INVALID COMMENTS

Another important thing you really have to know is how to structure a valid comment in HTML. Well! valid comments are just comments that are well placed as shown below

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8">     
<!-- this sentence represents an illustration of how comments work and are been placed in a HTML document --> 
</head>
<body>
        
</body>
</html>

INVALID COMMENTS are comments that aren’t well placed. A typical example of invalid comment is having a space between the <! and the “–” or having a space between the “–“when placing comments. Example shown below

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8">     
<! -  - this sentence represents an illustration of how comments work and are been placed in a HTML document -  -> 
</head>
<body>
        
</body>
</html>

MULTI LINE COMMENTS

Multi line comments structures are used to comment text that run across multiple lines. If we have a large amount of text running up to 4-5 lines of words, we can simply use the multiple line comment to comment them on our web page. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
        
    
<meta charset="UTF-8">
        
        <title>comment Document</title>
        
        
        <!--
                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>

COMMENTING SCRIPT CODES

Another important thing you need to know is how you can comment script codes in your web document. Maybe you have few lines of javascript codes on your web document and you intend commenting them out. You can simple follow the procedure shown below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
        
        <title>comment Document</title>
        <p>this is a web page explaining comments </p>
        <script>

        <!--

        document.write('alert hello samuel')

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

Conclusion

The above tutorial clearly explains how you can easily structure Comments on your HTML web document. If you have questions, simple contact us using the comment section below.

NEXT TUTORIAL: INSERTING IMAGES IN HTML

About the author

ikenna

Leave a Comment