HTML <!-- --> Tag
The <!-- --> tag in HTML is used to insert comments in the source code. These comments are not displayed in the browser when the page is rendered. They are primarily used to provide explanations, notes, or reminders for developers who read the code. Comments help in understanding the purpose of code blocks, make debugging easier, and improve the overall maintainability of the HTML document.
Syntax
Attributes
The HTML comment tag does not have any specific attributes. It solely consists of the opening <!-- and closing --> delimiters.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Comments Example</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
More Examples
-
Multi-line Comments:
HTML comments can span multiple lines. This is useful for providing detailed explanations.
<p>Some content here</p>
-
Commenting out Code:
You can use comments to temporarily disable parts of your HTML code without deleting it. This is helpful for debugging or testing different implementations.
<p>This paragraph is visible.</p>
-
Conditional Comments (For IE, though not recommended now):
While not standard HTML comments, you might encounter these older conditional comments used to target specific versions of Internet Explorer. Note that they are deprecated and should not be used in modern web development.
<p>This will show in other browsers</p>
-
Adding TODOs and Reminders: Comments can be used to insert reminders or TODOs which helps track progress of the code and its maintainence.
<p>Placeholder text here.</p>
<div class="responsive-container"></div>
Browser Support
The HTML comment tag (<!-- -->) is supported by all major browsers, including:
- Chrome
- Firefox
- Safari
- Edge
- Opera
Notes and Tips
- Comments are not displayed in the browser's output, but they are visible in the HTML source code.
- Avoid including sensitive information in your comments, as they can be viewed by anyone inspecting the page's source.
- Use comments to explain complex logic, not to state the obvious.
- Good comments should explain why the code is written a particular way, not just what it does.
- Keep your comments concise and clear. Overly verbose comments can be as bad as no comments at all.
- Use comments consistently throughout your project to maintain code consistency.
- Ensure that you close comments properly with
-->, an unclosed comment can break the page layout or functionality.
- Use comments to document your code as you write it, rather than waiting until the end. This ensures that your documentation is accurate and up-to-date.
- While conditional comments were used for Internet Explorer, modern approaches (feature detection, CSS hacks only where absolutely necessary) are recommended.
Table of Contents
HTML
<!-- -->TagThe
<!-- -->tag in HTML is used to insert comments in the source code. These comments are not displayed in the browser when the page is rendered. They are primarily used to provide explanations, notes, or reminders for developers who read the code. Comments help in understanding the purpose of code blocks, make debugging easier, and improve the overall maintainability of the HTML document.Syntax
<!-- This is a comment -->Attributes
The HTML comment tag does not have any specific attributes. It solely consists of the opening
<!--and closing-->delimiters.Example
<!DOCTYPE html> <html> <head> <title>HTML Comments Example</title> </head> <body> <!-- This is a heading --> <h1>Hello World</h1> <!-- This is a paragraph with some text --> <p>This is a paragraph of text.</p> <!-- Let's add a list --> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </body> </html>More Examples
Multi-line Comments:
HTML comments can span multiple lines. This is useful for providing detailed explanations.
<!-- This is a multi-line comment. It can contain several lines of text. Use it to describe complex parts of your HTML. --> <p>Some content here</p>Commenting out Code:
You can use comments to temporarily disable parts of your HTML code without deleting it. This is helpful for debugging or testing different implementations.
<!-- <h1>This heading is temporarily disabled</h1> <p>This paragraph will not be displayed</p> --> <p>This paragraph is visible.</p>Conditional Comments (For IE, though not recommended now):
While not standard HTML comments, you might encounter these older conditional comments used to target specific versions of Internet Explorer. Note that they are deprecated and should not be used in modern web development.
<!--[if IE]> <p>This will only show in IE</p> <![endif]--> <p>This will show in other browsers</p>Adding TODOs and Reminders: Comments can be used to insert reminders or TODOs which helps track progress of the code and its maintainence.
<!-- TODO: Replace this text with the actual content --> <p>Placeholder text here.</p> <!-- FIXME: Check responsive behavior of this element --> <div class="responsive-container"></div>Browser Support
The HTML comment tag (
<!-- -->) is supported by all major browsers, including:Notes and Tips
-->, an unclosed comment can break the page layout or functionality.Related Posts
HTML Comments: Your Guide to Documenting and Organizing Code
Introduction Ever looked at a piece of code you wrote a few weeks ago and thought, "What was I even...
HTML Code: Displaying Computer Code with the <code> Tag
HTML <code> Tag The <code> tag in HTML is used to define a fragment of computer code. It's an inline...
HTML Paragraphs: The Essential Guide to the <p> Tag
HTML <p> Tag The <p> tag in HTML defines a paragraph. It's a fundamental element for structuring text content on...
HTML Computercode: Displaying Code with kbd, samp, pre, code, and var Tags
Introduction Ever tried displaying code snippets on your website and found that they didn't look quite right? Or worse, the...
HTML Small Text: The `<small>` Tag Explained
HTML <small> Tag The <small> tag in HTML is used to represent side comments, disclaimers, legal fine print, or other...
CSS Comments: Complete Guide to Single Line and Multi-Line Comment Syntax
CSS comments are essential for creating maintainable and well-documented stylesheets. Whether you're working on a personal project or collaborating with...
HTML Document createComment() Method: Creating Comment Nodes
HTML Document createComment() Method: Creating Comment Nodes The createComment() method of the HTML Document interface is used to create a...
HTML <!DOCTYPE> Declaration: Defining Document Type and HTML Versions
HTML <!DOCTYPE> Tag The <!DOCTYPE> declaration is a crucial instruction at the very beginning of an HTML document. It's not...
HTML Main Content: The <main> Tag Explained
HTML <main> Tag The <main> tag specifies the main content of an HTML document. It's designed to contain the dominant...
HTML Plaintext: Displaying Preformatted Text (Deprecated)
HTML <plaintext> Tag The <plaintext> tag was an early HTML element designed to display all content following it as raw,...
HTML Inserted Text: The ins Tag
HTML <ins> Tag The HTML <ins> tag is used to denote text that has been inserted into a document. It's...
HTML Pre Tag: Displaying Preformatted Text
HTML <pre> Tag The <pre> tag in HTML defines preformatted text. Text within a <pre> element is displayed in a...
Continue Reading
What is & Used For – HTML Programming Tutorial
How can I build/concatenate strings in JavaScript? – Complete Tutorial
What’s the Difference Between
and as Line Breaks – HTML vs JavaScript Explained
What’s the Difference Between and Space in HTML Programming
Vite: Application Works on localhost:5173 but Not on 127.0.0.1:5173 – React.js Troubleshooting Guide
Alternative for