Here’s a complete, detailed guide on how to make comments in HTML, including syntax, uses, best practices, and examples.
In this article:
1. What is a Comment in HTML?
- An HTML comment is a piece of text ignored by the browser.
- Comments do not display on the webpage, but are visible in the HTML source code.
- Useful for:
- Explaining code
- Temporarily disabling sections of code
- Leaving notes for other developers or yourself
2. HTML Comment Syntax
<!-- This is a comment -->
- Starts with
<!-- - Ends with
--> - Can be placed anywhere in HTML (inside
<head>or<body>).
Example:
<!-- This is the main header -->
<h1>Welcome to My Website</h1>
3. Multi-line Comments
- HTML comments can span multiple lines:
<!--
This is a multi-line comment.
It can include explanations for sections of code.
Use it to document your HTML.
-->
Also Read: HTML Multiline comment-Everything you need to know
4. Commenting Out Code
- Comments can temporarily disable HTML code without deleting it:
<!-- <p>This paragraph is commented out and will not display.</p> -->
- Useful for testing or debugging sections of a page.
5. Placing Comments
5.1 Inside <head> section
<head>
<!-- Linking to external CSS -->
<link rel="stylesheet" href="style.css">
</head>
5.2 Inside <body> section
<body>
<!-- Main content starts here -->
<h1>My Website</h1>
</body>
5.3 Between elements
<p>Paragraph 1</p>
<!-- This comment separates paragraphs -->
<p>Paragraph 2</p>
6. Best Practices for HTML Comments
- Keep comments meaningful: Explain why not what if obvious.
- Avoid leaving sensitive information: Do not put passwords or secret data in comments.
- Do not nest comments: HTML does not allow nested comments.
<!-- This is <!-- invalid nested --> comment -->
- Nested comments can break your HTML.
- Use comments to organize code: Separate sections, mark TODOs, or indicate deprecated code.
7. Example: HTML Page with Comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Comment Example</title>
<!-- Link to CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Main header section -->
<h1>Welcome to My Website</h1>
<!-- Navigation menu -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!--
This section is temporarily disabled
<p>This paragraph will not be shown.</p>
-->
</body>
</html>
Features in this example:
- Comments for sections and explanation
- A commented-out paragraph to temporarily hide content
8. Summary
| Feature | Details |
|---|---|
| Syntax | <!-- Comment text --> |
| Placement | Anywhere in <head> or <body> |
| Multi-line | Supported; just span across lines inside <!-- ... --> |
| Use Cases | Explain code, organize sections, temporarily disable code |
| Caution | Do not leave sensitive info; avoid nested comments |
✅ Best Practice: Use comments to document, organize, and debug HTML, but keep them meaningful, concise, and safe.
Other Courses:
