When writing an HTML document, you often need to add notes or explanations that should not appear in the browser.
That’s where HTML Comments come in.
Comments are pieces of text written inside HTML code to describe, organize, or temporarily disable parts of the page.They help developers and designers understand the structure of the code when they revisit it later.
Comments are ignored by the browser and are visible only in the source code (via View Page Source).
The syntax for writing a comment in HTML is very simple:
<!-- This is a comment -->A comment always starts with <!– and ends with –>.
Any text written between these symbols will not be displayed on the webpage.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Comments Example</title>
</head>
<body>
<!-- This is a comment in HTML -->
<h1>Welcome to HTML Comments Tutorial</h1>
<p>This text is visible on the webpage.</p>
<!-- Comments help developers understand their code better -->
</body>
</html>Only the heading and paragraph will appear on the page.
The comment lines remain hidden in the browser but can be seen in the HTML source code.
Why Use HTML Comments?
HTML comments are useful for both beginners and professional web developers. They make your code easy to read, explain complex logic, and help while editing large HTML documents.
Common Uses of Comments
- Adding notes or instructions inside HTML code.
- Hiding a specific section of code temporarily.
- Dividing large web pages into sections.
- Adding To-Do reminders for future updates.
- Explaining functionality to other developers in a team.
Using Comments to Describe Sections – Example 1
<!-- Header Section Start -->
<h1>My HTML Tutorial Page</h1>
<!-- Header Section End -->
<!-- Main Content Start -->
<p>HTML comments are used to explain code.</p>
<p>They are ignored by browsers.</p>
<!-- Main Content End -->This approach is useful when you’re building long web pages and need to mark different parts for clarity.
Commenting Out Code – Example 2
You can also use comments to temporarily disable parts of code without deleting them. This is helpful when you want to test or debug your webpage.
<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden using a comment.</p> -->The second paragraph won’t appear on the page but will remain in your HTML code for later use.
Multi-line Comments – Example 3
If you need to write a long comment or explanation, you can use a multi-line comment by continuing your text within the same comment block.
<!--
This is a multi-line comment.
You can write detailed explanations here.
Browsers will completely ignore this text.
-->Multi-line comments are great for documentation and team collaboration.
Organizing HTML with Comments
<!DOCTYPE html>
<html>
<head>
<title>HTML Comments Example</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>HTML Comments Tutorial</h1>
</header>
<!-- Main Section -->
<main>
<p>Comments are not displayed in the browser.</p>
<p>They are used to explain and organize code.</p>
</main>
<!-- Footer Section -->
<footer>
<p>Created by John Doe</p>
</footer>
</body>
</html>