How to Comment in HTML Code
Knowing how to comment in HTML is absolutely a worthwhile thing. Because comments are time savers. And in this tutorial, we will see how to add comments in HTML code.
Tip: If you don’t know anything about the term “HTML comments” then check this helpful tutorial about what are comments.
Comments are used in almost all programming languages, the only difference is the way of using them. Meaning their syntax is different. But all have the same purpose.
So, let’s see the process to use them in HTML.
How to Comment out in HTML Code
Commenting in HTML code is just a one-step process. All you need to remember is the syntax.
HTML Comment Syntax:
<!-- This is a Comment. -->
Explanation:
In HTML, a comment begins with <!-- and ends with --> symbols. We call this the comment tag in HTML. And inside it, you can write whatever you want, it will be treated as a comment.
Note: Be precise! any mistake in the comments syntax will cause the comments not working error.
To insert comments in your HTML code, you will follow the above syntax. To understand it better, let’s see an image example of how I use comments in HTML code.
If you see the output of this code in your browser, the comments part will not display in your browser.
As we have seen in our previous tutorial: what are HTML comments? We already know that comments are not rendered by browsers. They do not appear on the front end side. But they are visible in the source code.
Furthermore, it doesn’t matter what you write inside a comment tag. How you write comments in HTML is totally up to you. A good rule of thumb is that make your comments descriptive so that anybody can understand your code easily.
Here’s how to make HTML comments more descriptive.
To make a perfect comment, describe what you did and the reason why you did it. Also, it will make the process of debugging much easier for you.
There are two types of HTML comments.
- single-line comments
- multi-line comments
Let’s see how to add single-line and multiline comments in HTML.
Using Single Line Comment in HTML
Single-line comments are always displayed on one line. The HTML comments we used in the previous examples are single-line comments.
In this another example below, you can see what single-line comments look like.
Using Multi-line Comments in HTML
You can comment out multiple lines of HTML code with the help of multi-line comments. It’s up to you if you make the comment multi-line or single-line.
The only difference between multi-line and single comments is that multi-line comments allow us to provide more information about what’s going on in the code. While single-line comments are short, less descriptive, and to the point.
In the below example, I used the same code as above to demonstrate the multi-line comment.
You can also comment out HTML code with the help of multi-line comments. Just put <!-- it at the start and --> at the end as shown below.
<!-- <link rel="stylesheet" href="css/style1.css"> <link rel="stylesheet" href="css/style2.css"> <link rel="stylesheet" href="css/styles3.css"> -->
Now, the stylesheets in the above code will not render because they are treated as a comment.
By doing this, you can hide your code. This way the HTML code will be treated as a comment and will neither execute nor display by the browser.
I use vs code editor for web development if you do too then here’s a tip.
Visual Studio Code Shortcut to Comment in HTML
In visual studio code, just highlight the code that you want to comment out then press Ctrl + / from your keyboard and this will automatically comment out the highlighted text.
This is how you can comment in HTML code. Adding comments to the code is a crucial practice for team-based and larger projects. However, it’s not necessary if you’re alone or doing a small project.
That’s all. If you have any questions, just leave a comment below.
Topic: HTML
