HTML comments are portions of text within the code that do not appear on the display. Their purpose is to assist developers, collaborators, or even the coder themselves in the future when reviewing the code. These comments explain the purpose and organization of code segments, document the decisions made by the code authors, and are beneficial during the debugging process.
Content enclosed within HTML comment tags (<!-- and -->) is ignored by the browser, ensuring that comments have no impact on the visual or functional aspects of the webpage for the end user.
Why Use HTML Comments?
- Readability - Complicated HTML pages are easy to get lost in quickly. Notes translate into readability.
- Collaboration - Multiple developers contribute to a project, and comments are an in-code channel of communication.
- Documentation - Documents can be available to clarify the reason behind certain sections, making upkeep a breeze.
- Debugging - The developers can disable code on the fly without removing it, which is particularly handy when debugging layout or functionality.
How to add a comment in HTML?
In HTML files, you have the option to include comments by using the <! -- ... --> tag. Any content placed between these comment tags will be considered as a comment and will not be interpreted by the browser.
Syntax
<!-- Write commented text here -->
There should not be any additional spaces present between the <! and -- , and the comment must be closed with -->.
Correct:
<!-- This is a comment -->
Incorrect:
<! -- Wrong comment -->
<!--- Also wrong --->
Note: The commented code will not be visible in a webpage , hence you can use the comment tag for documentation and debugging purposes as follows:
- <!-- <p>There is some text</p>
- <p>There is second text</p> -->
Example
<!DOCTYPE html>
<html>
<!-- This is the Header section -->
<head>
<!-- Internal CSS -->
<style>
body{
text-align: center;
background-color: #f0f8ff;
font-size: 30px;
color: red;
}
</style>
</head>
<!-- This is the body section, write code here which you want to display on the webpage -->
<body>
<!-- heading tag -->
<h2> First Webpage </h2>
<!-- Paragraph tag -->
<p> Write content here!! </p>
</body>
</html>
Multiline Comment
Within HTML code, it is possible to create multiline comments which allow for the inclusion of various descriptions related to the code or even multiple lines of code for debugging purposes.
Syntax
<!--
Your code is commented.
Write a description of the code.
It will not display on the webpage.
-->
Example
<h2>Cake Gallery</h2>
<!-- This is an image for a yummy cake
You can see it on your webpage
of your favorite browser -->
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="cake image" height="300px" width="300px">
Output:
Using Comments for Debugging
One of the primary uses of HTML comments is for debugging purposes. Developers often utilize commenting out debugging to test the webpage without executing a specific code snippet.
Example:
<!-- <img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Image not loading"> -->
<p>Testing layout without the image above.</p>
This feature allows developers to deactivate the code without deleting it permanently.
Best Practices for Writing Comments
1. Be Clear
Explanations in comments should provide insights into the rationale behind the code implementation, offering a deeper understanding of the reasons for the chosen approach, rather than just repeating what is already evident from the code itself.
<!-- Good: Explains intent -->
<!-- Centered content for better readability on large screens -->
<div class="content"></div>
<!-- Bad: Adds no value -->
<!-- This is a div -->
<div class="content"></div>
2. Use Comments for Structure
Divide lengthy documents into distinct sections to enhance navigational ease for readers.
<!-- ================= HEADER ================= -->
<!-- ================= MAIN CONTENT =========== -->
<!-- ================= FOOTER ================= -->
- Don't Overuse Comments
Excessive comments can complicate the readability of a file.
- Ensure that Comments are Kept Current
Obsolete comments have the potential to cause more confusion among developers compared to having no comments present.
Comments and SEO
Browsers do not display HTML comments, yet they remain viewable in the page's source code. Consequently:
- Search engines typically overlook comments, so they do not contribute to SEO efforts.
- It is crucial to avoid including confidential data like passwords, API keys, or internal memos in comments as they are accessible to anyone through the View Source option.
Example of what not to do:
<!-- Temporary fix: API key = 12345-ABCDE -->
Comments vs Other Languages
| Language | Commenting style |
|---|---|
CSS |
Use / ... / instead of <!-- ... -->. |
| JavaScript | Use // for single line or / ... / for multiline. |
HTML |
Always use <!-- ... -->. |
Example of combining HTML and CSS comments:
<!-- Navigation bar starts -->
<style>
/* Highlight navigation bar in blue colour */
nav {
background-color: blue;
}
</style>
Conclusion
HTML comments are commonly perceived as simple, yet they play a vital role in improving the readability, maintainability, and collaboration aspects of code development. They allow developers to communicate with others about their current tasks, emphasize specific sections of a document, or temporarily deactivate code segments without deleting them.
Comments play a crucial role in enhancing the efficiency of individual tasks and collaborative projects in various scenarios. While they do not impact the rendering of a page, they offer valuable context that can contribute to the longevity and maintainability of a project, particularly during revisits or debugging processes.