HTML comments let you add notes, explanations, or instructions inside your code without changing the overall outlook of the webpage. These comments don't appear on the web page itself, but they remain in the source code, which helps developers work together, fix issues, and keep the code organized. All in all, HTML comments are an important aspect of web development, which helps developers understand, organize, and debug their code.
In this article, we'll discuss what HTML comments are and how to use them.
What are Comments in HTML?
In HTML, comments are notes/remarks in your code that visitors to your website cannot view. These comments help developers remember things, explain the code to others, or mark spots for unfinished work. Web browsers ignore HTML comments, so they don't change how your webpage looks or works. Here are some common use cases of HTML comments:
You can use comments to describe complicated sections of the code.
Comments can also be used to hide code while debugging or testing.
Comments make the code more readable, especially when collaborating with a team.
How to Comment in HTML?
You can write/add comments in HTML by enclosing the text in a specific format, as shown in the syntax:
In simple terms, any text or code placed between <!-- and --> symbols will be treated as a comment by the browser.
Types of Comments in HTML
In HTML, there is essentially one type of comment, but it can be utilized in various ways based on your requirements and structure.
1. Single-line Comment
This is the most common form of HTML comment, used for a brief note or explanation:
2. Multi-line Comment
You can use multi-line comments for longer explanations or to comment out a section of code. These are created by using the same <!-- and --> symbols but span multiple lines:
Shortcut Keys to Add Comments
Apart from <!-- and --> symbols, we can comment text or code in code editors using different shortcut keys. The following table illustrates some common text editors and respective shortcut keys to add HTML comments:
You can use these keyboard shortcut keys to add or remove comments in the respective code editor.
Understanding HTML Comments with Examples
Let’s go through the practical examples below to see how comments can be used in real-world HTML code:
Example 1: Defining a Specific Code Section
In this example, we add comments at the start and end of the header section. You can use such types of comments to describe a section to make it easier for future developers to understand the code structure:
The output shows that the comments were completely ignored, and the rest of the code ran successfully and produced the expected result:
Example 2: Hiding a Line of Code Temporarily
Comments can also be used to temporarily hide a certain part of our code without removing it:
In this code, the first <p> tag is wrapped in a comment, so it didn’t appear on the webpage:
Example 3: Adding Explanatory Notes for Collaboration
In the example below, we insert an explanatory note/message using an HTML comment. These types of comments help any developer who is reviewing or updating the code:
As expected, the comments are entirely disregarded, and the rest of the code runs successfully:
Example 4: Commenting Out HTML for Testing Purposes
Similarly, we can disable a specific section of code using multi-line comments:
This code disables a navigation menu using multi-line comments:
This practice helps developers to test or debug code. After testing the code, developers can easily re-enable the commented code.
Conclusion
HTML comments help web developers and notes, explanations, or reminders in their code without changing how the webpage looks or works. Comments make it easier for developers to organize, debug, and work together on code, especially in complex projects. Whether you're explaining a part of the code, temporarily hiding it for testing, or leaving notes for others, HTML comments are important for keeping the code clean and easy to understand.
