What are Comments in HTML?
In this tutorial, we’ll explore what are comments in HTML, how comments work, why and when we use them, what’s their purpose and what are the benefits of using comments.
Let’s begin with the definition.
What are Comments in HTML?
In HTML, a comment is a developer’s readable explanation or annotation in the source code. They are added with the purpose of making the source code easier for humans to understand, and are generally ignored by browsers.
Browsers do not display comments on the front-end side, they only remain in the source code. HTML comments make the code developer friendly.
Also, a web developer uses comments in his code to tell other web developers what tactics he is using to create the following layout. And what’s the reason behind each section of code that he is writing?
Usually, in the text editor comments are displayed in green color.
HTML Comments Example
Imagine you created a webpage and your HTML source code is over 5000 lines. It’s lengthy and complex and your fellow web developer needs to correct mistakes in your code. He found that the social media icons on your webpage are not displaying correctly.
Now, what he will do is first he will understand your code. He needs to find the code of a tiny social media icon that is located in the sidebar of your webpage.
So, after finding that code he will understand how you created the social icons and which framework or tactic you used. So, how much time he requires to find a solution to solve this problem? Don’t know! Sometimes, it’s overwhelming.
However, it’s not a bigger problem. But for larger websites it’s difficult.
So, the better way here is just to put the comment before the icons section of the code and tell the developer that you used the following frameworks and tactics to create those icons so he can find the solution to the problem easily. This way everyone on your team can read and understand your code easily and quickly.
A single comment can save a lot of time.
How do HTML Comments Work?
In real, HTML comments are very simple. In the source code, everything inside <!-- and --> will be treated as a comment. Everything between these symbols will not render by the browser.
<!-- This is a Comment -->Whether it’s a text, heading, paragraph, or any type of code inside the symbols <!-- and -->, it will be ignored by browsers, compilers, and interpreters.
Comments only display in your source code. This is how HTML comments work.
You can learn more about adding comments in HTML in the following guide: how to comment in HTML.
Why use Comments in HTML?
Use comments to make your code readable to others. What’s good in that if you write 10,000 lines of code and no one can read and understand your code except you?
So, It’s a good programming practice to comment out your HTML code on each step. Not just for yourself but for others.
When to use Comments?
For bigger and team-based web projects, must use comments. It’s a highly recommended thing. However, if you have a small project just for your own sake then it’s not crucial to use comments but it’s a good practice. It makes your code elegant.
Benefits of Adding Comments in Source Code
There are a lot of benefits to using comments. A few are the following.
Comments:
- save your and other web developers time.
- make the debugging easy.
- make code human-readable and elegant.
- can be used to hide your HTML, CSS, and JavaScript code.
- helps your team to understand and edit your code easily.
That’s it. Now, you know what are comments in HTML. It’s time to learn how to add comments in HTML.
See the Next Tutorial: How to Comment in HTML Code.
Topic: HTML
