HTML from Scratch: Commenting in HTML. Lesson #24


Hello, friends!

As a web developer working with websites, scripts, and plugins, I often use comments in my code to make my future work easier. Commenting is an essential practice that should be considered whether you are writing the code alone or working in a team.

So, why should you add comments in HTML?

  • It’s a way to mark important sections of code.

  • It’s an opportunity to leave notes and tips.

  • It’s an instruction you can refer to during further work.

  • And, of course, it’s a convenient way to temporarily disable parts of the code (we’ll talk about that a little later).





The main purpose of comments is to help you or your colleague understand what a particular part of the code does. By the way, these comments do not appear in the browser, they can only be seen in the page’s source code.

To insert a comment in HTML, you use the following syntax:

<!-- This is a comment -->

Everything placed between these tags will be ignored by the browser but will provide useful information to the developer. For example:

<html>
<head>
<title>How to Add Comments in HTML</title>
</head>
<body>
<!-- This is the header of the website -->
<img src="heder.png">
 
<!-- Content -->
<p>Comments in HTML on the website overcod.net</p>
</body>
</html>

A few months later, when you need to work with this code again, you won’t have to spend much time figuring things out because you left clear comments explaining what each part does.

Now, about what I promised earlier: how to temporarily disable part of the code using comments. This is another important reason to use comments in your practice.

Sometimes it’s useful if a block of code is not needed at the moment, but in the future, it might be required again. Instead of deleting it and then having to re-add it later, it’s easier to comment it out. Here’s an example:

<!-- Header of the site
<img src="heder.png">
-->
<!-- Content -->
<p>Comments in HTML on the website overcod.net</p>

This way, you don’t delete the code; you just temporarily disable it, and it’s easy to come back and enable it again when you need to.

So, here’s your main takeaway: always comment your code! Don’t forget, the brain is not a suitcase, and not everything can fit in it. It’s better to spend a few seconds writing a comment than to waste a lot of time later trying to remember what you did.