HTML Multiline Comment

The Comment Tag in HTML

An HTML comment should generally be written like this:

I am a remark! <!-- .->
HTML comments begin with <!-- and finish with -->.

Remember to include the exclamation point at the beginning of the tag! However, you can omit adding it at the end.

The tag surrounds any text or HTML tag you wish to remark out.

When to Use Comments in HTML

The browser does not show HTML comments. This implies that when the page is produced in a web browser, any comments you make to your HTML source code will not be shown.
Remember that virtually any website put online may have its source code viewed by anybody by going to View -> Developer -> View Source; this even applies to comments! Therefore, their comments will be available if you want to publicize the HTML content and someone else decides to look at the source code.
Following best practices and writing comments is a good idea when developing source code. By using comments, you may better document and communicate to yourself (and others) about your code and thought process. Returning to a project after months of non-working reminds you of your thoughts and actions.

Moreover, comments facilitate communication between you and the other developers working on the project. They can easily understand why you inserted specific lines of code from your comments.

How to Write HTML Single-Line Comments

A single-line remark is limited to one line in length. As previously stated, the browser will not display that line.

When you wish to add self-reminders or elaborate on the reasoning for the code that comes after it, use a single-line remark like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doc</title>
</head>
<body>
    <!-- Add the navbar here -->
    <h2>About you</h2>
    <p>I am learning to code with JavaTpoint.</p>
    <p>I am going through every topic in JavaTpoint.</p>
    <p>I am heading to becoming a full-stack web developer! using jtp</p>
    <h3>Work Experience</h3>
</body>
</html>

You may also use single-line comments to indicate the end of a tag. This is helpful when you have lengthy, intricate HTML text with plenty of information and might not know where to put the ending tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doc</title>
</head>
<body>
    <section class="cont">
    </section> <!--closing tag of cont section is here-->
</body>
</html>

How to Write HTML Inline Comments

Comments can also be added during a statement or a line of code.

The remaining content within the tag will remain unaffected; just the text included in  will be commented out.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doc</title>
</head>
<body>
    <p>I am <!--going to be--> a content writer</p>
</body>
</html>

How to Write Multi-Line Comments in HTML

Using the same syntax as before, comments may also span many lines.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doc</title>
</head>
<body>
    <p>I am  a content writer</p>
    <!--This is going to be my portfolio.
    It will highlight the accomplishments of which I am most proud. Because I am Posting a multi-line remark here, I could go on and on about what I want to contribute.
</body>
</html>

How to In HTML Comment Out a Tag

What if you want to remove a tag from an HTML document?

You encircle the chosen tag in  as follows:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doc</title>
</head>
<body>
    <h2>My portfolio page</h2>
    <h3>my projects</h3>
    <!-- <section class="h">
    </section>  -->
    <h2>Me</h2>
</body>
</html>

Taking tags out of comments facilitates debugging.

Start commenting out specific tags one at a time if anything isn't functioning as it should or as you had expected. This enables you to test them and identify the problematic ones.

Shortcut on the Keyboard for Adding HTML Comments

You may make comments using shortcuts and likely find yourself utilizing them frequently. For Mac users, the shortcut is Command /; for Windows and Linux users, it is Control /.

HTML

<ul class="1">
  <li class="nt">A</li>
  <li>B</li>
  <li class="nt">C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li class="nt">G</li>
  <li>H</li>
  <li>I</li>
  <li class="nt">J</li>
</ul>
<ul class="2">
  <li class="nt">A</li>
  <li>B</li>
  <li class="nt">C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li class="nt">G</li>
  <li>H</li>
  <li>I</li>

CSS

ul.one > li:nth-child(-n + 3 of .noted) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

ul.two > li.noted:nth-child(-n + 3) {
  background-color: tomato;
  border-bottom-color: seagreen;
}

You can use this for single line comments:

    <!-- This is a single line comment -->
    <section class="a" id="a">
      <h3>cric</h3>
      <p>
        Our primary objective is to bring live cricket matches to fans all around
        the world
      </p>
      <h3> It's not About winning! Its about country</h3>
      <p>
We also air documentaries specially made for the greats, lifestyle of boxers, news, and more.
      </p>
    </sec>

You can also use it for multi-line comments:

    <section class="a" id="a">
      <h3>cric</h3>
      <p>
        Our primary objective is to bring live cricket matches to fans all around
        the world
      </p>
      <!-- This is a 
        multi-line 
        comment -->
      <h3> It's not About winning. It's about the country!</h3>
      <p>
        We also air documentaries specially made for the greats, the lifestyle of
        cricketers, news, and more.
      </p>
    </section>

You can also insert the comment anywhere you want if it is not within a tag:

    <section class="a" id="a">
      <h3>Watch the show</h3>
      <p>
        Our primary objective is to bring live shows to fans all around
        the world
      </p>
      <h3>Its not About the magical shows</h3>
      <p>
        We also air
        <!-- This is a comment within some text -->
        documentaries specially made for the greats, lifestyle of magicians, news,
        and more.
      </p>
    </section>
// And there you have it ? now you can comment your HTML code correctly and safely.

Next TopicMicrointeractions in Web Designing

← prev next →