How to Comment Code Out in HTML

Did you know you can comment out one or multiple lines of code in your HTML document? Read on to find out how.

Published Categorized as HTML

Commenting HTML code out is a useful way to stop it from rendering in the web browser without deleting it from your document.

When you enclose one or more lines of HTML code in a comment, the browser stops treating them as such and treats them as plain text that’s not to be executed or displayed instead.

The commented-out code is still available for inspection in the browser’s developer tools—it just becomes inactivated until you decide to remove the comment tag.

We’ve explained how this works, with sample code, below.

How to Comment Out a Single Line of Code

Say you have the following HTML document:

<!doctype html>
<html lang="en">
  <head>
    <title>Example 1</title>
  </head>
  <body>
    <ul>
      <li>List item no. 1</li>
      <li>List item no. 2</li>
      <li>List item no. 3</li>
    </ul>
  </body>
</html>

You want to comment out the third list item.

To comment out a single line of code in an HTML document, open the comment (<!--) at the beginning of the line and close the comment (-->) at the line’s end.

<!doctype html>
<html lang="en">
  <head>
    <title>Example 1</title>
  </head>
  <body>
    <ul>
      <li>List item no. 1</li>
      <li>List item no. 2</li>
      <!-- <li>List item no. 3</li> -->
    </ul>
  </body>
</html>

How to Comment Out Multiple Lines of Code

Say you have the following HTML document:

<!doctype html>
<html lang="en">
  <head>
    <title>Example 2</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/screen.css">
    <link rel="stylesheet" href="/css/print.css">
  </head>
  <body>
  </body>
</html>

And, for one reason or another not relevant to this article, you want to comment out the links to the style sheets in lines 4, 5, and 6.

To comment out multiple lines in an HTML document, open the comment (<!--) in the line before the first and close it (-->) in the line after the last.

When you’re done, your web browser won’t parse and render the code in these lines, and the syntax highlighting in your code editor will gray them out:

<!doctype html>
<html lang="en">
  <head>
    <title>Example 2</title>
    <!--
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/screen.css">
    <link rel="stylesheet" href="/css/print.css">
    -->
  </head>
  <body>
  </body>
</html>

By Dim Nikov

Editor of Maker's Aid. Part programmer, part marketer. Making things on the web and helping others do the same since the 2000s. Yes, I had Friendster and Myspace.

Leave a comment

Your email address will not be published. Required fields are marked *