Here’s a complete, detailed guide on multiline comment in HTML, including syntax, usage, and best practices.
In this article:
1. What is a Multiline Comment in HTML?
- A multiline comment is a comment that spans multiple lines in your HTML code.
- Browsers ignore everything inside the comment, so it won’t display on the page.
- Useful for:
- Documenting sections of code
- Temporarily disabling blocks of HTML
- Leaving notes for other developers
2. Syntax of a Multiline Comment
<!--
This is a multiline comment.
It can span several lines.
All content here is ignored by the browser.
-->
- Starts with
<!-- - Ends with
--> - Can contain any number of lines
- Can include HTML code, text, or notes
3. Example: Multiline Comment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiline Comment Example</title>
</head>
<body>
<h1>Visible Header</h1>
<!--
This entire section is commented out.
<p>This paragraph will not be displayed.</p>
<p>Another paragraph inside the comment.</p>
-->
<p>This paragraph is visible.</p>
</body>
</html>
Explanation:
- The
<h1>and last<p>are displayed. - Everything inside
<!-- ... -->is ignored by the browser.
4. Commenting Out Sections of HTML Code
- Multiline comments are ideal for temporarily disabling multiple elements:
<!--
<div>
<h2>Under Construction</h2>
<p>This section is hidden from view.</p>
</div>
-->
- You can re-enable the code later by removing the comment markers.
5. Notes and Best Practices
Cannot nest comments:
<!--
<p>Outer comment</p>
<!-- <p>Inner comment</p> --> <!-- ❌ Invalid -->
-->
- Nested comments can break your HTML.
Keep comments meaningful:
- Explain why the code is commented out, not just what it does.
Do not leave sensitive information in comments:
- Users can view the source code and see comments.
Use comments for organization:
- Mark sections like
<!-- Header -->,<!-- Footer -->, etc.
6. Combining Single-Line and Multiline Comments
- You can use single-line comments inside a multiline comment:
<!--
This is a multiline comment
<!-- This line is a single-line style comment -->
End of multiline comment
-->
Be careful with nesting. Technically, inner
<!-- ... -->may cause unexpected behavior; better to avoid nesting entirely.
7. Summary
| Feature | Details |
|---|---|
| Syntax | <!-- ... --> |
| Multiline | Span multiple lines inside <!-- and --> |
| Purpose | Document code, disable sections temporarily, organize HTML |
| Cannot Nest | Avoid nested comments to prevent errors |
| Visibility | Ignored by browser, visible in source code |
✅ Key Point: Multiline comments are perfect for documenting and temporarily hiding large sections of HTML code, but they cannot be nested and should not contain sensitive data.
Watch : Multiline comments on youtube.
Other Courses:
