HTML comments are text you write in your code that the browser never displays on the page

When you write an HTML comment, you are adding a note to yourself or other people who read your code. The browser ignores it completely — visitors to your website will never see it. Comments are useful for explaining what a section of code does, reminding yourself why you made a choice, or temporarily hiding code while you test something else.

The syntax is always the same: you start with <!-- and end with -->. Everything between those markers is a comment. You can put a comment on a single line or spread it across multiple lines.

Key Takeaways

  • HTML comments start with <!-- and end with -->, and the browser never displays them on the page.
  • Single-line comments work best for short notes: <!-- This is a comment -->
  • Multi-line comments let you write longer explanations across several lines without closing and reopening the comment tag.
  • Comments are visible to anyone who views your page source, so do not put passwords, API keys, or sensitive information in them.
  • You can use comments to temporarily hide code while you test, but remember to remove or clean them up before publishing.

Writing a single-line comment

A single-line comment is the simplest form. Type <!--, then your note, then --> on the same line. Here is an example:

<!-- This is the main navigation menu -->

You can place this comment anywhere in your HTML file — before a section of code, after it, or on its own line. The browser will skip over it and move on to the next actual HTML element. Single-line comments work well for quick reminders about what comes next or why you structured something a certain way.

Writing a multi-line comment

When you need to write a longer explanation, you can spread your comment across multiple lines. Start with <!-- on one line, write your explanation on the lines below, and close with --> on its own line or at the end of your last line of text.

Here is an example of a multi-line comment:

<!-- The header section contains the site logo, navigation menu, and search bar. We use flexbox to align these items horizontally on desktop and stack them vertically on mobile devices. -->

Multi-line comments are useful when you are explaining a complex section, documenting why you chose a particular approach, or leaving instructions for someone else who will work on the code later.

Commenting out code to test changes

One of the most practical uses for comments is temporarily hiding code while you test. If you wrap an HTML element or section in comment tags, the browser will not render it, but you can easily turn it back on by removing the comment markers.

For example, if you want to hide a button while you work on something else, you can write:

<!-- <button>Click me</button> -->

The button will not appear on the page. When you are ready to show it again, delete the <!-- at the start and the --> at the end. This is faster than deleting the code and retyping it later, and it is a common way to test different layouts or features without losing your work.

What not to put in comments

Remember that anyone who visits your website can view the HTML source code by right-clicking on the page and selecting "View Page Source" (or a similar option in their browser). This means your comments are visible to the public.

Never put passwords, API keys, secret tokens, or any sensitive information in an HTML comment. Even if you think nobody will look, it is a security risk. If you need to store sensitive data, it should live in a backend file that the browser never downloads, not in your HTML.

Before you publish a website, scan your comments and remove any that contain debugging notes, to-do items, or personal reminders that you would not want a visitor or a future developer to see.

Common mistakes when writing comments

The most common error is forgetting the closing -->. If you leave it out, the browser will treat everything after your opening <!-- as a comment, including actual HTML code, and nothing will display correctly. Always double-check that you have both the opening and closing markers.

Another mistake is putting two hyphens (--) inside your comment text. Technically, this can confuse some browsers because -- is part of the comment syntax. To be safe, avoid using -- within the comment itself. If you need to use hyphens, use a single hyphen or a different character.

A third issue is nesting comments — trying to put one comment inside another. HTML does not support nested comments, so if you try this, the first closing --> will end the entire comment, and the rest of your code will break. Write each comment separately instead.

Frequently Asked Questions

Can I use comments to hide CSS or JavaScript?

No. HTML comments only work in HTML files. If you want to hide CSS, you use CSS comments, which look like /* comment here */. For JavaScript, you use // comment here for single lines or /* comment here */ for multiple lines. Each language has its own comment syntax.

Will comments slow down my website?

Comments add a tiny amount of file size, but the difference is negligible for most websites. If you are concerned about performance on a very large site, you can use a build tool to strip comments out before publishing. For most projects, leaving comments in is fine.

What is the best way to organize comments in a large HTML file?

Use comments to mark major sections like <!-- Header -->, <!-- Main Content -->, and <!-- Footer -->. For complex components, explain what they do and why. Keep comments brief and update them if you change the code — outdated comments are worse than no comments.

Can I use special characters or emojis in comments?

Yes. HTML comments support any character, including emojis and special symbols. You can write <!-- ⚠️ This section needs testing --> without any problems. Just avoid the -- sequence, which can break the comment syntax.