HOME HTML CSS Javascript PHP Laravel

HTML Comments

In this tutorial, you will learn how to add single and multiline comments to your HTML documents. It is a good coding practise to make the code understandable for both the developer and the reader. It's beneficial to be able to decipher complicated coding. When troubleshooting tag code, comments are very handy.

To "comment out" in HTML, place <! ╌ ╌> tags around the code you want to hide. These tags tell the browser not to render this code on the front end.

There are three types of html comments

  1. inline comment
  2. multiline comment
  3. Using <comment> tag

1. Inline comment:

Syntax for an html inline comment:

<!-- ======================== -->

Example of html inline comment

Edit it yourself 
<!DOCTYPE html>
<html>
<head>
  <title>html inline comment</title>
</head>
<body>
    
    <!-- This is a heading -->
    <h4>Exmlain html inline comment</h4>
    <!-- This is a description -->
    <p>you will learn how to add single comments to your HTML documents</p>
    <!-- To do list -->
    <ul>
        <li>PHP</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>

</body>
</html>

Output of html inline comment

Edit it yourself

Exmlain html inline comment

you will learn how to add single and multiline comments to your HTML documents

  • PHP
  • HTML
  • CSS
  • JS

Here you can see the single-line comment. Single line comment will not be displayed in the output.

2. multiline comment:

Syntax for an HTML multiline comment :

<!--
====================
====================
-->

Example of html multiline comment

Edit it yourself 
<!DOCTYPE html>
<html>
<head>
  <title>html multiline comment</title>
</head>
<body>
    
    <h4>Exmlain html multiline comment</h4>
    <p>you will learn how to add multiline comments to your HTML documents</p>
    <!-- To do list 
    <ul>
        <li>PHP</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul> -->

</body>
</html>

Output of HTML multiline comment

Edit it yourself

Exmlain html inline comment

you will learn how to add single and multiline comments to your HTML documents

Here we can see that we have used multiple lines in the comment section but it is not display yet.

3. Using <comment> tag:

The syntax for HTML <comment> Using <comment> tag :

<comment>
====================
====================
</comment>

Example of HTML <comment> Using <comment> tag

Edit it yourself 
<!DOCTYPE html>
<html>
<head>
  <title>Exmlain html comment tag</title>
</head>
<body>
    
    <h4>Exmlain html comment tag</h4>
    <p>you will learn how to work comment tag to your HTML documents</p>
    <comment>
      <ul>
          <li>PHP</li>
          <li>HTML</li>
          <li>CSS</li>
          <li>JS</li>
      </ul>
    </comment>
    
</body>
</html>

Output of HTML comment Using <comment> tag

Edit it yourself

Exmlain html inline comment

you will learn how to add single and multiline comments to your HTML documents

  • PHP
  • HTML
  • CSS
  • JS

There was an HTML <comment> tag, but it is not supported by any modern browser.

How it work html comment

  • It is a simple piece of code that is cleared (ignored) by web browsers, that is, not displayed by the browser.
  • It helps the coder and the reader to understand part of the code used especially for complex source code.

Purposes of html comment

There are two main purposes of commenting

  1. Debugging your code is one of them. When you find an error, you may comment out the first few lines of code, see if the error persists, and continue the procedure until the defective code is isolated.
  2. The second goal is to keep track of version history. Because commenting out ensures that the code remains visible in the back end, it can be a useful approach to demonstrate different revisions of the code base to new developers who have recently joined or inherited the web project.