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>