Do you think IIT Guwahati certified course can help you in your career?
Introduction
Comments in HTML are an essential tool for developers to make their code more organized, readable, and maintainable. Comments help explain sections of the code without affecting the functionality of the webpage. They are ignored by the browser and are not displayed on the webpage.
In this article, we will discuss HTML comments, their syntax and how to create multiline comments.
HTML Comment
Comments in HTML begin with <!-- and end with -->. Any text or code between these markers is treated as a comment.
Syntax
<!-- This is a single-line comment -->
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Comments Example</title>
</head>
<body>
<!-- This is a comment. It will not be displayed on the webpage. -->
<p>This is visible content.</p>
</body>
</html>
Output:
The comment will not appear on the page.
HTML Comment Tag
In HTML, comments are used to add notes or explanations within the code. These comments are not displayed in the browser but are visible in the source code. They are extremely useful for developers to understand the purpose of specific code sections or to temporarily disable parts of the code without deleting them.
For example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Comment Example</title>
</head>
<body>
<!-- This is a single-line comment -->
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html>
In the above example, the text `<!-- This is a single-line comment -->` is a comment. It won’t appear on the webpage, but you can see it if you view the page’s source code.
Comments Using `<comment>` Tag
You might have heard about the `<comment>` tag in HTML, but it’s important to clarify that this tag is not valid in modern HTML. In older versions of HTML, some browsers supported the `<comment>` tag to add comments, but it is now deprecated & should not be used. Instead, the standard `<!-- -->` syntax is the correct way to add comments in HTML.
Let’s take an example of how the `<comment>` tag was used in the past (but don’t use this in your code):
<!DOCTYPE html>
<html>
<head>
<title>Deprecated Comment Tag Example</title>
</head>
<body>
<comment>This is an old-style comment</comment>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output
In modern browsers, the `<comment>` tag will not work as intended. Instead, the text inside the `<comment>` tag will be treated as regular HTML & may be displayed on the webpage, which is not what you want.
Why Avoid `<comment>` Tag?
1. Deprecated: The `<comment>` tag is no longer part of the HTML standard. Using it can lead to unexpected behavior in modern browsers.
2. Cross-Browser Issues: Older browsers might have supported it, but modern browsers ignore it, making your code unreliable.
3. Standard Practice: The `<!-- -->` syntax is universally supported & is the recommended way to add comments in HTML.
Correct Way to Add Multiline Comments
For multiline comments, you can use the `<!-- -->` syntax. For example:
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comment Example</title>
</head>
<body>
<!--
This is a multiline comment.
It spans multiple lines & is ignored by the browser.
Use this to explain complex sections of your code.
-->
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output
In this example, the multiline comment is ignored by the browser, but it remains visible in the source code for developers to read.
Different Ways to Add Comments in HTML
1. Single-Line Comment
Single-line comments are enclosed within <!-- and -->.
Example:
<!-- This is a single-line comment -->
<p>This content is visible.</p>
2. Multiline Comment
Multiline comments allow developers to comment on multiple lines of text or code.
Example:
<!--
This is a multiline comment.
It can span multiple lines.
It is useful for documenting complex sections of the code.
-->
<p>This content is visible.</p>
Note: In both cases, the comments do not affect the visible output of the webpage.
Hide Content
Sometimes, developers use comments to temporarily hide sections of code during debugging or testing.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Hide Content Example</title>
</head>
<body>
<!-- <p>This paragraph is hidden and will not appear on the page.</p> -->
<p>This content is visible.</p>
</body>
</html>
Output:
Only the visible content will be displayed:
This content is visible.
Hide Inline Content
You can also use comments to hide inline sections of code.
Example:
<p>This is a <!-- hidden --> visible paragraph.</p>
Output: The browser displays:
This is a visible paragraph.
Examples of HTML Comments
Example 1: Documenting Code
<!DOCTYPE html>
<html>
<head>
<title>Documenting Code</title>
</head>
<body>
<!-- Header Section -->
<h1>Welcome to My Website</h1>
<!-- Main Content Section -->
<p>This website is under construction.</p>
</body>
</html>
Output:
Comments help document each section of the code for better understanding.
Example 2: Explaining Complex Logic
<!DOCTYPE html>
<html>
<head>
<title>Explaining Logic</title>
</head>
<body>
<!-- The following list is dynamically generated -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Output
Why Use Comments?
Documentation:
Helps explain sections of the code for future reference or for other developers.
Debugging:
Temporarily hide sections of code to test features or debug issues.
Code Management:
Keep track of complex code blocks by adding notes or explanations.
Team Collaboration:
Improves team collaboration by making the code easier to understand for everyone.
5. Readability:
Comments make the code easier to understand, especially for complex projects.
Best Practices for Writing Useful and Clear Comments
Be Concise:
Write short and meaningful comments.
Avoid adding redundant or overly detailed comments.
Use Proper Grammar:
Ensure your comments are easy to read and grammatically correct.
Update Comments Regularly:
If the code changes, update the comments to match the new functionality.
Avoid Commenting Outdated Code:
Do not leave old, commented-out code in the project unless necessary for reference.
Use Multiline Comments for Detailed Explanations:
For complex sections, use multiline comments to document the logic clearly.
Frequently Asked Questions
What is the purpose of using comments in HTML?
Comments in HTML help explain the code, making it easier to read and maintain. They are ignored by the browser and do not appear on the webpage.
Can HTML comments be nested?
No, HTML comments cannot be nested. If you try to nest comments, it may cause unexpected results.
How can comments improve collaboration in a team project?
Comments make the code more understandable for team members, ensuring everyone can work effectively on the project. Clear comments document the purpose and functionality of each section.
Conclusion
In this article, we covered the basics of HTML comments, including their syntax, uses, and best practices. Comments are essential for making your code organized, readable, and maintainable. By using comments effectively, you can document your code, improve collaboration, and make debugging easier.
518+ registered 
