An HTML comment adds explanatory notes to your markup or prevents the browser from interpreting specific parts of the document. Comments start with <!-- and end with -->. They are not rendered as page content.
Label sections for teammates, leave TODOs, or temporarily disable a block while debugging—without deleting the code. The browser skips the comment; View Source still shows it.
As content between tags (in <head>, <body>, inside most elements). You cannot put a comment inside a start tag (for example before an attribute). Avoid HTML comments as the content of raw-text elements like <script>, <style>, <title>, and <textarea>—use JS or CSS comment syntax there instead.
Document non-obvious structure, mark regions in large templates, or comment out experimental markup. Keep notes short; never store secrets in comments.
A comment is a special construct in the HTML syntax—not a tag you open and close like <p>.
The first --> ends the comment. Nested <!-- breaks parsing and can spill markup onto the page.
Anyone can open View Source or DevTools and read your comments. Treat them as public notes.
The basic form:
<!-- Comment text --><!-- A one-line comment -->
<!--
A comment
that stretches
over several
lines
-->
<!-- Disables the HTML contained within -->
<!--
<p>This content will not be rendered.</p>
-->Empty comments are allowed: <!--> or <!---->. Comment text must not start with > or ->, must not contain --> or --!>, and must not end with <!-.
Rules that keep comments valid and useful:
| Concept | Meaning |
|---|---|
<!-- … --> | Opens and closes an HTML comment |
| Not rendered | Browser skips comment content when painting the page |
| Document / disable | Notes for developers, or wrap markup to turn it off |
| Content only | Between tags—not inside a tag’s attribute list |
| No nesting | First --> closes the comment |
| Raw-text elements | Prefer JS/CSS comments in script / style (and avoid HTML comments in title / textarea) |
| View Source | Comments remain in the delivered HTML file |
| HTML comment | HTML element (e.g. <p>) | |
|---|---|---|
| Visible on page? | No | Usually yes |
| In DOM as a node? | Comment node (tools can see it) | Element node |
| Attributes? | No | Yes |
Practical habits for clean markup.
<!-- note --> next to the markup it explains.<!-- Site header -->) in large templates.| Goal | Pattern |
|---|---|
| One-line note | <!-- Primary stylesheet --> |
| Multi-line note | <!-- … several lines … --> |
| Disable markup | <!-- <p>…</p> --> |
| Script notes | // or /* */ inside <script> |
| CSS notes | /* … */ inside <style> or a stylesheet |
Toggle whether a paragraph is commented out and see what the browser renders.
Six patterns: basic syntax, commenting out markup, multi-line notes, inline TODOs, head notes, and a full page.
<h1>Comments demo</h1>
<!-- This note is for developers only -->
<p>This paragraph is visible on the page.</p><p>This paragraph appears.</p>
<!--
<p>This paragraph is commented out.</p>
-->--> inside.<!--
Site header region
Updated: Nov 2026
-->
<header>
<h1>My Blog</h1>
</header><p>
This is a paragraph.
<!-- TODO: add link here -->
This text is still visible.
</p><head>
<title>My Page</title>
<!-- Primary stylesheet — do not remove -->
<link rel="stylesheet" href="styles.css">
</head><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Comments Example</title>
<!-- Head: metadata and assets -->
</head>
<body>
<h1>Welcome to My Website</h1>
<!-- Main content starts here -->
<p>This is a paragraph on the website.</p>
<!-- <p>This paragraph is commented out.</p> -->
<footer>
<!-- Footer information -->
<p>© 2026 My Website</p>
</footer>
</body>
</html>Broken pages often come from nested comments or forbidden strings inside the comment body.
The first --> closes the comment. Leftover text can become live HTML.
Invalid. Place comments between elements, not among attributes.
Legacy practice for ancient browsers. Do not rely on it—use proper JS comments.
View Source exposes them. Use environment config, not HTML comments.
Avoid starting with > / ->, containing --> / --!>, or ending with <!-.
They increase download size slightly and clutter source. Prefer short, useful notes.
HTML comments () are part of the HTML language and work in all browsers.
Every browser that parses HTML understands comments and skips them when rendering.
Bottom line: Use freely for developer notes—just remember they ship with your HTML source.
One line: Write <!-- notes or disabled HTML --> between tags so the browser skips it while teammates can still read the source.
Open a Try It demo and comment markup in and out.
8 people found this page helpful