HTML Comments and HTML Practices
What Are HTML Comments?
HTML comments are notes in the code that are not displayed in the browser. They are meant for developers to explain, organize, or remind themselves of something in the code.
Syntax:
<!-- This is a comment -->
Example 1: Basic HTML Comment
Code:
<p>This is visible text.</p>
<!-- This paragraph explains something important -->
Output:
This is visible text.
Example 2: Commenting Out a Line of Code
Code:
<!-- <h1>This heading is temporarily disabled</h1> -->
<p>This paragraph is active.</p>
Output:
This paragraph is active.
Best Practices for HTML Comments
Here are some HTML coding best practices when using comments:
1. Use Comments to Explain Sections
Add comments to separate sections of your HTML document.
<!-- ======= HEADER SECTION ======= -->
<header>
<h1>My Website</h1>
</header>
2. Avoid Overusing Comments
Too many comments can clutter your code. Use them only where necessary.
3. Don’t Put Sensitive Info in Comments
Never write passwords, API keys, or private data in comments — they can still be seen in the browser's source code.
4. Use Clear and Concise Language
Good example:
<!-- Navigation links to main pages -->
Bad example:
<!-- links links links links navbar maybe who knows -->
5. Temporarily Disable Code for Testing
Use comments to disable a block of code temporarily:
<!--
<div>
<p>This block is disabled during testing</p>
</div>
-->
6. Keep Comments Updated
Don’t leave outdated or misleading comments — they confuse everyone later!
Summary Table
Feature | HTML Comments |
---|---|
Syntax | <!-- Comment here --> |
Visibility | Not visible to users |
Use | Add notes, explanations |
Best For | Teams, testing, clean code |
Affects SEO | Not directly |
Tools Benefit | Helps during debugging |