HTML5 Comments

« Previous Lesson

Next Lesson »

HTML5 Comments

The comment is a code in our HTML file that our browsers ignore while compiling our code. It is a good programming practice to include comments in code as it allows other developers to read and identify flaws in your code easily. Apart from that, comment increases readability of the code.

Before we move on, I would like to discuss what we are going to teach in this tutorial?

HTML5 comments
valid HTML5 comments
Multiline comments
Commenting Javascript code
Commenting CSS

To add comments in out HTML5 file, all we need to do is to add <!-- -- > tag in our code. The browser will ignore content that lies between these tags.

Here is a code snippet to add comments to your code.

<!DOCTYPE html>
 <html lang="en">
  <head><!---Header starts here-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> HTML5 Comments</title>
  </head><!-- Header ends here-->>
  <body>
    <p> You content goes here</p>
  </body>
 </html>

Upon compiling this code, you’ll get the following output

html5 comments

Once you compile this code, you’ll notice that the content that lies within <!--- -- > is ignored, and your browser will only display a single paragraph.

Valid HTML5 Comments

You cannot nest one comment inside another comment. Moreover, double dash sequence “--” is not interpreted as a comment by the browser unless it is followed by the closing tag ---!>. Apart from that, you should not leave any space at the start of the comment tag.

Code Snippet

Here is a code for valid comments that will remain unnoticed by the browser

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Code for valid HTML5 comment </title>
</head>

<body>
    <!-- this is a not valid comment -->
    <p> This code is for valid comments </p>
</body>

</html>

The code example listed below is not a valid HTML5 comment because the programmer has accidentally left the space between the left angle bracket and an exclamation mark.

This is how the output will look like.

html5 comments 2

Here is the correct code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Code for valid comment </title>
</head>
<body>
    <!-- this is a valid comment -->
    <p> You content goes here</p>
</body>
</html>

The output of this code will be

HTML comments

Run both of these code examples and see the output.

Multiline HTML5 Comments

All the HTML tutorials focus on singly line comments, but they forget to mention that HTML supports multiline comments.

You can comment multiple lines by placing <!--- at the start of the comment line and -- > at the end.

Content enclosed between these tags will be ignored by the compiler which in this case is browser. Code example for it is depicted below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Comments in HTML5 </title>
</head>
<body>
    <!-- this is a valid comment this is a code snippet for multiline comments and it can go as many lines as you want -->
    <p> You content goes here</p>
</body>
</html>

Commenting Javascript Code Using HTML5 Comments

Even though we’ll teach you Javascript in an upcoming tutorial, but we strongly recommend you if you are writing JS code in your HTML file then make sure to enclose it within HTML comments. Otherwise, old browsers cannot compile your code.

Example

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Javascript Code </title>
    <javascript>
        <!--
document.write("my first javascript code")
-->
    </javascript>
</head>
<body>
    <p> Commenting javascript code</p>
</body>
</html>

Output of this code will be

HTML5 comments

Commenting CSS Stylesheet

If you are working with an old browser, we strongly recommend you to put your CSS code inside HTML comments.

Example

<!DOCTYPE html>
<html>
<head>
    <title>CommentingStyleSheets</title>
    <!--    <style>       .css {          border: 1px solid #4a7d49;       }    </style> -->
</head>
<body>
    <div class="css"> We'll start learning CSS soon </div>
</body>
</html>

Output of this code snippet will be

HTML5 comments

To learn more about different commenting styles, visit https://html.com

spin

Next Lesson » « Previous Lesson