How to add comments in HTML?

In this step-by-step guide, you will learn what HTML comments are, how to use them correctly, and best practices for implementing them.

If you are taking your first steps in web development, it is essential to know HTML comments. They allow you to better organize the code and make it more understandable both for yourself and for other people who may work on the same project.

What is an HTML comment?

An HTML comment is a notation within the code that is ignored by the browser. Its purpose is to provide additional information or explanations without affecting the display of the web page.

The syntax of an HTML comment is:

<!-- This is an HTML comment -->

Any text that is between <!-- and --> will be ignored by the browser and will not be displayed on the web page.

What are HTML comments for?

HTML comments are especially useful for:

• Explaining code: They help to understand the function of certain sections of the code.
• Disable parts of the code temporarily: If you are testing changes, you can comment out some lines instead of deleting them.
• Facilitate collaboration: When multiple people work on the same project, comments help to better understand the code.
• Organize the code: They can be used to divide and label different sections.

How to add comments in HTML step-by-step

• Open your code editor: You can use any text editor or tools like VS Code, Sublime Text, or even Notepad.

• Identify the part of the code where you want to add the comment.

• Write the comment using the correct syntax:

<!-- This is a comment -->

• Save changes and test in the browser: Open the HTML file in a browser and verify that the comment does not appear on the page.

If you need to comment multiple lines, you can do so as follows:

<!--
This is a comment
that spans multiple lines.
-->

Best practices for using comments in HTML

• Use descriptive comments: Instead of <!-- This is a div -->, use <!-- Main container for contact section -->.
• Don't overuse comments: If your code is well-structured, you don't need too many comments.
• Avoid including sensitive information: Comments can be visible in the page's source code.
• Keep comments up to date: If you make changes to the code, check that the comments are still relevant.
• Use comments to break up code into sections: When working on large projects, adding comments like <!-- Start of navigation section --> can improve code comprehension and organization.
• Don't use comments to hide bad code: It's better to refactor or improve code than simply comment it out.

Cases when you should NOT use comments in HTML

While comments are useful, there are situations where they can be counterproductive:

• Don't use comments to hide passwords or sensitive data. Even though they are not visible on the page, anyone can inspect the source code.
• Avoid overloading your code with unnecessary comments. Clean, well-structured code is self-explanatory in most cases.
• Don't overuse comments as a temporary solution. While it is useful to comment code for testing, it is advisable to remove unnecessary lines once the code is stable.

HTML comments are an essential tool for writing clean, organized, and maintainable code. Using them correctly can facilitate teamwork, improve code documentation, and make projects more manageable in the long run.

Now that you know the importance of HTML comments and how to use them correctly, we recommend practicing on your own projects. Don't hesitate to experiment and improve your web development skills!

We recommend you on video