HTML Comments

❮ Prev Next ❯

HTML comment are not displayed in the browser, but they can help document your HTML source code.

HTML Comment Tag

The HTML comment Tag is used to add comments in HTML code that are not visible on the webpage. Comments can be used to leave notes for other developers, to temporarily disable a part of the code, or to remind oneself of a particular section's purpose.

HTML Comment Tag is written as . The <!-- comment --> opening <!-- and closing --> tags must enclose the comment text, like the below example: 

<!--this is a comment -->

Here are some examples of basic HTML Comment Tags:

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p><!-- This is a basic comment --></p>
        <p>The above line of code is just a basic comment that will not show in the browser</p>
      </body>
  </html>

The above is a simple example of an HTML Comment Tag. The comment is not visible on the webpage.

Comment to Disable Code 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
      <p>This is the only text that will display in browser</p>
      <!--<p>This paragraph is temporarily disabled.</p>-->
      </body>
  </html>

In the above example, the paragraph tag is commented out, which means it will not be visible on the webpage. This technique can be used to temporarily disable code.

Comment to Leave a Note 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
      <!--TODO: Add more content here-->
      <p>Comment to Leave a Note</p>
      </body>
  </html>

In the above types of comment is used to leave a note for other developers to add more content to the section later.

Comment to Troubleshoot Code 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
      <!--<p>This paragraph is causing an issue in the layout.</p>-->
      <p>the above code is commented because is causing error</p>
      </body>
  </html>

In this example, the comment is used to troubleshoot an issue in the layout. By commenting out parts of the code, developers can identify and fix issues more easily.

Comment to Remove Code 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
      <!--<p>This paragraph will be removed in the final version.</p>-->
      <p>the paragraph is being removed</p>
      </body>
  </html>

In this example, the paragraph tag is commented out because it will be removed in the final version of the webpage.

The HTML Comment Tag is easy to use and can help make code more organized and readable.

Now that you understand the use of comment, lets learn something about Colors in the next chapter.

❮ Prev Next ❯