Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create hidden comments in HTML?
HTML comments are used to add notes and documentation to your code that are not displayed in the browser. They help developers understand the code structure and temporarily hide content without deleting it.
HTML comments allow you to document your code, hide content temporarily, and leave notes for other developers. The browser completely ignores commented content, making it invisible to website visitors but visible in the page source.
Syntax
Following is the syntax to create comments in HTML −
<!-- Your comment text goes here -->
Comments start with <!-- and end with -->. Everything between these markers is hidden from the browser display.
Basic HTML Comments
Example − Single Line Comment
Following example shows how to create a basic single-line comment −
<!DOCTYPE html> <html> <head> <title>HTML Comments Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <!-- This is a comment and won't appear on the webpage --> <h1>Welcome to TutorialsPoint</h1> <p>This content is visible to users.</p> </body> </html>
The output shows only the visible content −
Welcome to TutorialsPoint This content is visible to users.
Multi-line Comments
HTML comments can span multiple lines, making them useful for commenting out entire blocks of content or adding detailed documentation.
Example − Multi-line Comment
Following example demonstrates multi-line comments −
<!DOCTYPE html>
<html>
<head>
<title>Multi-line Comments</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<!--
This is a multi-line comment
It can span several lines
and is useful for detailed explanations
-->
<h2>Course List</h2>
<!--
<ul>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>JavaScript Tutorial</li>
</ul>
-->
<p>Course list is temporarily hidden.</p>
</body>
</html>
The output shows only the visible content, with the entire list hidden −
Course List Course list is temporarily hidden.
Inline Comments
Comments can be placed inline within HTML elements to hide specific parts of content while keeping the rest visible.
Example − Inline Comments
Following example shows how to use inline comments within elements −
<!DOCTYPE html> <html> <head> <title>Inline Comments Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>About TutorialsPoint</h2> <p>TutorialsPoint is a leading online learning platform<!-- founded in 2006 by Mohtashim --> that offers tutorials on various programming languages.</p> <p>Available courses include:<!-- over 100 topics --> HTML, CSS, JavaScript, Python, and Java.</p> </body> </html>
The inline comments hide specific text portions while keeping the sentences readable −
About TutorialsPoint TutorialsPoint is a leading online learning platform that offers tutorials on various programming languages. Available courses include: HTML, CSS, JavaScript, Python, and Java.
Practical Uses of HTML Comments
HTML comments serve several practical purposes in web development −
-
Code Documentation − Explain complex sections of HTML code for future reference.
-
Temporary Content Removal − Hide content without permanently deleting it during development or testing.
-
Team Collaboration − Leave notes for other developers working on the same project.
-
Debugging − Isolate problematic sections by commenting them out.
Example − Documentation and Debugging
<!DOCTYPE html>
<html>
<head>
<title>Documentation Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<!-- Header Section - Updated on 2024-01-15 -->
<header>
<h1>Website Header</h1>
</header>
<!-- Main Content Area -->
<main>
<h2>Welcome Message</h2>
<!-- TODO: Add user personalization here -->
<p>Welcome to our website!</p>
<!-- Temporarily disabled promotional banner
<div class="promo-banner">
<h3>Special Offer!</h3>
<p>Get 50% off on all courses.</p>
</div>
-->
</main>
</body>
</html>
This example shows various comment types for documentation and temporary content removal.
Important Notes
When working with HTML comments, keep in mind these important points −
-
Visible in Source − Comments are hidden from the webpage but remain visible in the page source code.
-
No Nesting − You cannot nest comments inside other comments in HTML.
-
Avoid Sensitive Information − Never put passwords or sensitive data in comments since they are visible in the source.
-
Browser Compatibility − HTML comments work in all browsers and HTML versions.
Conclusion
HTML comments use the <!-- --> syntax to hide content from browser display while keeping it visible in the source code. They are essential tools for code documentation, temporary content removal, and team collaboration in web development projects.
16K+ Views
