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 page. When someone opens your HTML file in a text editor or views the source code, they see your comment. When they load the page in a browser, they do not. Comments are how you explain what a section of code does, leave reminders for yourself, or tell other developers why you made a particular choice.

The syntax is simple: start with <!--, write your text, and end with -->. Everything between those markers is ignored by the browser. You can write a comment on one line or spread it 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; multi-line comments work for longer explanations or temporarily hiding code.
  • Never nest comments inside each other — the first closing --> ends the comment, even if you meant to continue.
  • Comments are visible to anyone who views your page source, so do not put passwords, API keys, or sensitive information in them.
  • Use comments to explain the "why" behind your code, not the "what" — the code itself already shows what it does.

Single-line comments for quick notes

A single-line comment fits on one line and is useful for labeling a section or explaining a specific line of code. Write it like this:

<!-- This is a comment -->

You can place it on its own line or at the end of a line of code. For example:

<img src="logo.png" alt="Company logo"> <!-- Logo appears in header -->

Single-line comments are clearest when they are short — a sentence or two at most. If you need to write more, use a multi-line comment instead.

Multi-line comments for longer explanations

When you need more space to explain something, break your comment across multiple lines. Start with <!-- on one line, write your explanation on the lines below, and close with -->:

<!-- This section contains the main navigation menu. It uses a flexbox layout to center items horizontally. Do not change the display property without testing on mobile. -->

Multi-line comments are also useful when you want to temporarily hide a block of HTML while you test something else. Wrap the code you want to hide in comment markers, and the browser will skip over it without deleting it.

Why the nesting rule matters

You cannot put a comment inside another comment. The browser stops reading the comment at the first --> it finds, even if you meant to continue. This code looks like it should work but does not:

<!-- This is a comment. <!-- This is NOT a nested comment --> This line will break your page. -->

When the browser reads this, it sees the first <!--, then the first --> (which closes the outer comment), then it tries to read "This line will break your page." as actual HTML. If you need to comment out code that already contains comments, delete or modify the inner comments first.

What to put in comments and what not to

Good comments explain decisions that are not obvious from reading the code. Write comments that answer "why did you do this?" rather than "what does this do?" — the code itself already shows what it does. For example, instead of:

<!-- Set the width to 80% --> width: 80%;

Write:

<!-- Width set to 80% to match the design mockup from the client --> width: 80%;

Never put passwords, API keys, database credentials, or other sensitive information in comments. Anyone who views your page source can read them. If you need to leave a note about where credentials are stored, write it somewhere private — not in your code.

Comments as temporary markers while building

Comments are useful for marking sections you plan to come back to. Many developers use a comment like <!-- TODO: --> to flag incomplete work:

<!-- TODO: Add form validation before submission --> <form id="contact-form">

Some text editors and development tools highlight TODO comments in a special color or list them in a sidebar, making it easy to find unfinished tasks. This is much more reliable than trying to remember what you meant to fix later.

Frequently Asked Questions

Can I use comments to hide code from the browser?

Yes. Wrapping HTML in comment markers hides it from the browser and from anyone viewing the page normally. However, anyone who views your page source code will still see it. Comments are not a security tool — use them only to hide code temporarily while you work, not to hide sensitive information.

What happens if I forget to close a comment?

If you write <!-- but forget -->, the browser treats everything after that point as a comment until it finds a closing marker. This usually breaks your page. Always check that every opening <!-- has a matching -->.

Can I use special characters or emoji in comments?

Yes. Comments can contain any text, including emoji and special characters. The browser ignores all of it, so there are no restrictions on what you write inside the comment markers.

Do comments make my HTML file larger?

Yes, slightly. Comments add to the file size, though usually by a small amount. If file size matters for your project, you can remove comments before uploading your site to a server — a process called minification. Most developers keep comments in the working version and remove them only if performance becomes an issue.