HTML Comments are used to add notes inside HTML code that are not displayed in the browser.
They help developers understand and manage code easily.
In this tutorial, you will learn how to write comments in HTML, their uses, and see examples with output.
Table of Contents:
What Are HTML Comments
HTML comments are invisible notes added in the code.
They are used to:
- Explain code
- Add reminders
- Hide content temporarily
Comments are not shown in the browser output.
HTML Comment Syntax
Example
<!-- This is a comment -->
Explanation
| Part | Description |
|---|---|
<!-- | Start of comment |
--> | End of comment |
HTML comments, HTML comment syntax, add comments in HTML, HTML notes, HTML basics
Simple Comment Example
Example Code
<!-- This is a heading -->
<h1>Hello HTML</h1>
Output
Hello HTML
(Comment is not visible)
Comment Inside Paragraph
Example Code
<p>This is a paragraph <!-- hidden text --> in HTML.</p>
Output
This is a paragraph in HTML.
Multi-Line Comment
HTML comments can span multiple lines.
Example Code
<!--
This is a multi-line comment
used to explain code
-->
<p>Learning HTML comments</p>
Output
Learning HTML comments
Using Comments to Hide Code
You can hide HTML code using comments.
Example Code
<!-- <p>This paragraph is hidden</p> -->
<p>This paragraph is visible</p>
Output
This paragraph is visible
Why Use HTML Comments
Benefits of Comments
| Benefit | Description |
|---|---|
| Code Explanation | Helps understand code |
| Debugging | Temporarily hide code |
| Team Work | Helps other developers |
| Organization | Keeps code clean |
HTML Comments Summary Table
| Feature | Description |
|---|---|
| Visible | No |
| Syntax | <!-- comment --> |
| Multi-line | Yes |
| Used for | Notes and explanations |
Best Practices for Comments
| Practice | Description |
|---|---|
| Keep comments clear | Write meaningful notes |
| Do not overuse | Avoid too many comments |
| Update comments | Keep them relevant |
| Use for sections | Divide code into parts |
Common Mistakes
| Mistake | Result |
|---|---|
Missing closing --> | Code error |
| Nested comments | Not supported |
| Overusing comments | Cluttered code |
| Writing important data | Not secure |
HTML Comments Example with Structure
Example Code
<!DOCTYPE html>
<html>
<head>
<!-- Page title -->
<title>HTML Comments</title>
</head>
<body> <!-- Main heading -->
<h1>Welcome</h1> <!-- Paragraph -->
<p>This is a simple example.</p></body>
</html>
Output
Welcome
This is a simple example.
You may like
Frequently Asked Questions (FAQ)
1. What are HTML comments?
They are notes in HTML code that are not visible in the browser.
2. How do you write a comment in HTML?
Using <!-- comment -->.
3. Can comments hide content?
Yes, they can temporarily hide code.
4. Are comments visible to users?
No, they are hidden.
5. Can comments span multiple lines?
Yes, multi-line comments are supported.