HTML comments are text that browsers ignore but other people reading your code can see
An HTML comment is a note you write inside your code that the browser will not display on the webpage. When someone opens your HTML file to read or edit it, they will see your comment. When a visitor loads that same page in their browser, the comment stays hidden. Comments are useful for explaining what a section of code does, reminding yourself why you made a choice, or leaving instructions for the next person who works on the file.
The syntax is always the same: you open with <!--, write your message, and close with -->. Everything between those markers is a comment. You can write comments on a single line or across multiple lines.
Key Takeaways
- HTML comments start with <!-- and end with -->, with your text in between.
- Single-line comments work best for short notes, and multi-line comments work for longer explanations.
- Comments are invisible to website visitors but visible to anyone who views the page source code.
- Never nest one comment inside another — the browser will close the first comment and treat the rest as regular code.
- Comments should explain the "why" of your code, not just repeat what the code obviously does.
Writing a single-line comment
A single-line comment is the quickest way to add a note. Type the opening marker, your message, and the closing marker all on one line. This works well for brief reminders or labels.
Here is an example:
<!-- This is the main navigation menu --> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav>
The comment tells the next person reading this code that the <nav> section is the main navigation. The browser ignores the entire comment line and renders only the navigation menu itself.
Writing a multi-line comment
When you need more space to explain something, use a multi-line comment. Open with <!--, press Enter, write your explanation across as many lines as you need, then close with --> on its own line.
Here is an example:
<!-- This section displays the user's profile information. It pulls data from the database and updates every time the page loads. Do not remove the data-refresh attribute. --> <div class="profile"> <h2>User Profile</h2> <p>Name: <span id="userName"></span></p> </div>
This comment explains what the code does, why it matters, and warns against removing something important. A developer reading this later will understand the context without having to trace through the entire file.
Commenting out code you want to hide temporarily
You can turn any piece of code into a comment by wrapping it with the comment markers. This is useful when you are testing changes and want to hide a section without deleting it.
For example, if you want to hide a button temporarily:
<!-- <button>Submit Form</button> -->
The button will not appear on the page, but the code is still there in your file. If you decide you need it back, you just remove the comment markers. This is faster than retyping the code from scratch.
Common mistakes to avoid
The most frequent error is trying to nest comments — putting one comment inside another. The browser closes the first comment at the first --> it finds, which breaks your code. If you have a comment and want to add another comment inside it, you cannot do that. Delete the inner comment or move it outside.
Another mistake is using dashes in the middle of a comment. While a single dash is usually fine, some browsers have trouble with -- (two dashes) appearing in the middle of your comment text. To be safe, avoid double dashes inside your comment. If you need to separate ideas, use a single dash or a different character.
Do not rely on comments to explain obvious code. A comment that says <!-- This is a paragraph --> above a <p> tag wastes space. Instead, use comments to explain why you made a choice, what might break if someone changes it, or what the code connects to elsewhere in the project.
Where to place comments in your HTML file
You can place comments anywhere in your HTML file — before a section, after a closing tag, or even between attributes (though that is less common). The best practice is to put comments directly above the code they describe, so a reader sees the explanation before they see what it applies to.
For large sections, put an opening comment at the top and optionally a closing comment at the bottom:
<!-- START: Footer Section --> <footer> <p>© 2024 My Website</p> </footer> <!-- END: Footer Section -->
This makes it easy to scan the file and find where major sections begin and end, especially in longer HTML documents.
Frequently Asked Questions
Can someone see my HTML comments if they visit my website?
No, the comments do not appear on the webpage itself. However, anyone can right-click the page, select "View Page Source" or "Inspect," and read your comments in the code. Do not put sensitive information like passwords or private notes in HTML comments.
What is the difference between an HTML comment and a CSS comment?
HTML comments use <!-- -->, while CSS comments use /* */. If you write an HTML comment inside a <style> tag, the browser will treat it as CSS and may not recognize it correctly. Always use the right comment style for the language you are writing in.
Can I use comments to hide code from the browser permanently?
Comments hide code from display, but they are still part of the file and add to the file size. If you have code you no longer need, delete it instead of commenting it out. Comments work best for temporary hiding or for explaining code that stays in the file.
Do comments slow down my website?
Comments add a tiny amount of file size, but the impact is negligible for most websites. If you are concerned about performance, you can use a minifier tool to strip comments out before you publish your site to a live server.
Can I put line breaks inside a comment?
Yes. You can press Enter as many times as you need inside a comment. The browser will ignore all the whitespace and line breaks until it finds the closing --> marker.