Comment out HTML – Code Example

Adding comments in your code is a good practice, as it makes your code more readable and understandable.

Comments don’t run because they are ignored by compilers and interpreters.

In this article, I will show you how you can comment out your HTML code, so you can help yourself and team members understand what you're doing with it.

How to Comment Out HTML Code

Unlike other programming languages which have different symbols for making multi-line and single line comments, you make both multi-line and single line comments with the same symbols in HTML.

To comment out HTML code, use the less than symbol (<) followed by an exclamation mark (!), 2 hyphens (--), the comment, 2 hyphens again (--), and greater than symbol (>).

The syntax for commenting out HTML looks like this:

<!-- comments here -->

You can use this for single line comments:

    <!-- This is a single line comment -->
    <section class="about" id="about">
      <h3>Watch the Jabs</h3>
      <p>
        Our primary objective is to bring live boxing matches to fans all around
        the world
      </p>

      <h3>Its not About the Fights Alone!</h3>
      <p>
        We also air documentaries specially made for the greats, lifestyle of
        boxers, news, and more.
      </p>
    </section>

You can also use it for multi-line comments:

    <section class="about" id="about">
      <h3>Watch the Jabs</h3>
      <p>
        Our primary objective is to bring live boxing matches to fans all around
        the world
      </p>
      <!-- This is a 
        multi-line 
        comment -->
      <h3>Its not About the Fights Alone!</h3>
      <p>
        We also air documentaries specially made for the greats, lifestyle of
        boxers, news, and more.
      </p>
    </section>

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

    <section class="about" id="about">
      <h3>Watch the Jabs</h3>
      <p>
        Our primary objective is to bring live boxing matches to fans all around
        the world
      </p>
      <h3>Its not About the Fights Alone!</h3>
      <p>
        We also air
        <!-- This is a comment within some text -->
        documentaries specially made for the greats, lifestyle of boxers, news,
        and more.
      </p>
    </section>

And there you have it – now you can comment your HTML code correctly and safely.

Thank you for reading.