HTML Comments
Answer:
HTML comments is a text which uses <!-- and ends with --!> tags to comment on code. It tells the browser the code is commented and should not be rendered on the page.
The comments tag is very useful when you need to leave some backup code on the page and do not want to render it. It is also useful to make some notes to remind yourself during your build process. You can also put some comments about the functionality to explain your code to other developers which will make it easier to edit in the future.
Comments always remain in the backend and never render onto the page. It is a good practice to have proper comments in code regardless of programing languages.
HTML Comment Example
Let's suppose you and your team are building a website and you want everyone to use <h1> tag for the heading across all pages on the website. You can write notes in comments, another developer in your team can follow your notes.
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Always use h1 tag for the header -->
<h1>This is a new heading</h1>
<p>This is a new paragraph.</p>
</body>
</html>
As you can see in the above example the comment "Always use h1 tag for the header" is placed and will be hidden on the front end. Code inside < !╌ ╌> tag tells the browser that the text will be hidden.
Comments also help developers to debug the code. Sometimes if we are not able to find out the cause of the error, you can run code by commenting few lines of the code, check if the error is still occurring, and keep repeating the process until the bug is fixed. Secondly, a developer can also maintain a version history by commenting out the code. It could be a way of showing different iterations of the source code.
Now we understand what is a comment, let's discuss the type of comments. We can comment out code in two ways.
1. Single Line Comment2. MultiLine Comments
Single Line Comments Example
If you want to comment out a single line of code, you can put your code in between the opening and closing comment tag. As you can see in the below example.
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Document Content Starts -->
<h1>This is a new heading</h1>
<p>This is a new paragraph.</p>
<!-- Document Content Ends -->
</body>
</html>
MultiLine Comments Example
As you have seen in the above example, you can comment out a single line code. Let's suppose you want to comment out multiple lines of code and if you do it using single line comments, it would be tedious and time-consuming.
You can comment out multiple lines by using the comment beginning tag <!-- placed before the first line and ending tag --> end of the last line.
In the below example you can see that "This is a multiline comment" code is hidden and will not appear on the page.
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- This is a multiline
comment . -->
<h1>This is a new heading</h1>
<p>This is a new paragraph.</p>
</body>
</html>
Summary
The main purpose of the comment tag is to hide some instructions and notes on the front page. Adding explanatory notes on a web project for yourself or your team members will remind the prioritize of the task. Multiline comments are very useful when you are working on any enterprise projects having very huge code base. Comment tag also help to debug the code.