HTML Comments
HTML comments are not shown in the browser, but they help you document your HTML source code with notes and reminders.
HTML Comment Tag
You add a comment with this syntax: <!-- Write your comments here -->. Notice the exclamation point (!) is in the start tag but not in the end tag.
Note: Comments are not displayed by the browser, but they help document your code.
Comment syntax
The shape of an HTML comment.
<!-- Write your comments here -->
Add Comments
You can place notes and reminders in your code with comments.
Example
Comments used as notes around a paragraph.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Comments</title>
</head>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
</body>
</html>
Hide Content
Comments can hide content, which is handy when you want to take something out temporarily. Everything between <!-- and --> is hidden from view, whether it is one line or many.
Comments are also great for debugging: you can comment out lines one at a time to find errors.
Hide one paragraph
A single paragraph commented out so it does not show.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Content</title>
</head>
<body>
<p>This is a paragraph.</p>
<!-- <p>This is another paragraph </p> -->
<p>This is a paragraph too.</p>
</body>
</html>
Hide a section
A whole block of HTML hidden inside a multi-line comment.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Section</title>
</head>
<body>
<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>
</body>
</html>
Hide Inline Content
Comments can also hide a part in the middle of a line of HTML.
Example
A comment hiding part of a paragraph's text.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Inline</title>
</head>
<body>
<p>This <!-- great text --> is a paragraph.</p>
</body>
</html>