In HTML files, you can write a special text which the browser will ignore when opening the file. Such text is called a comment. Why write it if in the end it is simply and deliberately ignored? Actually, it makes a lot of sense to use comments during the development process, as they can greatly improve the readability of your code.
A comment in the HTML code can be generally defined as follows:
<!-- Any text -->Any text placed between <!-- and --> will be considered a comment. The text of the comment can be placed either in a single line or several lines.
Now let's take a closer look at some specific examples of how comments are used and what purpose they serve.
Single-line comments
Comments that occupy one line are called single-line comments. Take a careful look at the syntactic features of single-line comments:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single-line comments</title>
</head>
<body>
<!-- It's a single-line comment -->
<p>It's a paragraph of the text</p>
</body>
</html>The result in the browser will look as follows:
As you can see, the comment text is not displayed in the browser window. It is invisible for visitors of web pages but can be very useful for developers. With these notes you can easily remember later why some particular code fragment is needed. Comments can also serve as hints for other developers who will work with your code later on.
Multi-line comments
Comments that take up several lines are called multi-line comments. Take a look at their syntactic features:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multi-line comments</title>
</head>
<body>
<!--
It's
a multi-line comment
-->
<p>It's a paragraph of the text</p>
</body>
</html>In the browser it will look like this:
Such comments, as suggested by their name, occupy several lines. This may be useful for explaining some particularly complex sections or disabling large parts of the code.
Disabling code fragments
With comments you can make the browser hide specific parts of the code. Take a careful look at this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using comments to disable code fragments</title>
</head>
<body>
<p>The first paragraph of the text</p>
<!--
<p>The second paragraph of the text</p>
<p>The third paragraph of the text</p>
-->
<p>The fourth paragraph of the text</p>
</body>
</html>Here is how it would look in your browser:
Some tags aren't displayed in the browser window, but they can be made "visible" by deleting the characters <!-- and -->. This process is called uncommenting. Temporarily disabling the code is a good strategy when you need to find a bug. It's quite inconvenient to just remove the code because you may need to restore it, so comment/uncomment is a great solution.
Code editors often have special key combinations (shortcuts) to quickly comment and uncomment. You can find them in the documentation for the code editor that you're using, but usually it's CTRL + /.