Adding comments in HTML can help you write and organize the backend of your webpage. They’re so useful that it’s considered a best practice to use them.
You can add comments to explain your code, which will make it easier to edit in the future or to work with other developers. You can also use comments to simplify your debugging efforts by “commenting out” lines of code without deleting them.
In this post, we’ll look more closely at what a comment is in HTML, as well as
![Download Now: 50 Code Templates [Free Snippets]](https://no-cache.hubspot.com/cta/default/53/cace6948-d859-40c5-ad73-a401be3aa84e.png)
What is a comment in HTML?
In HTML, a comment is a section of text that is not processed by the web browser. Comments are enclosed in <!-- --> tags. These tags tell the browser that the text inside them is a comment and should not be rendered on the front end.
With the comments tag, you can leave notes to remind yourself where you left off in the build process. You could explain the intended functionality of a section of code for another developer or your future self. Or, you might assign someone a task or point out an error for them with a comment.
In short, commenting in HTML helps you work smarter when building or debugging a website. Here's a video that goes into this in more detail:
Now, let's look at an example.
How to Write a Comment In HTML
To leave a comment in HTML, place a <!-- tag before the code and a --> tag after the code that you want to hide. These tags tell browsers to ignore anything between them.
For example, say you’re building a website with a team of developers. You want to leave a note reminding them that all buttons should use the same color.
Here’s what your HTML might look like, as well as the result on the front end:
See the Pen comment example by HubSpot (@hubspot) on CodePen.
As you can see, the comment is not rendered on the front end.
You can also quickly comment a line of code with the keyboard shortcut Ctrl + / on PC or Command + / on Mac. This method is much faster than typing the tags manually.
How to Write a Multi-line Comment in HTML
To create a comment in HTML over multiple lines, you can use the same method — just enclose your target text inside <!-- --> tags.
See the Pen comment example - multi-line by HubSpot (@hubspot) on CodePen.
How to Write an Inline Comment in HTML
It’s also possible to leave inline comments between active sections of HTML code:
See the Pen comment example - inline comment by HubSpot (@hubspot) on CodePen.
Commenting Out in HTML
Aside from leaving notes to developers (or your future self), HTML comments also come in handy for “commenting out” sections of code. Commenting out is when you temporarily “deactivate” a piece of working code with a comment.
Commenting out has two main purposes. The first is debugging: Upon discovering an error, you can “deactivate” different parts of your code with comments, check if the error is still occurring, and repeat the process until the buggy code is found.
Here’s what “commenting out” a button from the last example would look like:
See the Pen comment example: commenting out by HubSpot (@hubspot) on CodePen.
The second purpose is saving old versions of your code. Since commenting out means the code will remain visible in the back end, it can be a way of keeping old sections of code for developers who are just joining or have inherited the web project.
Say I run some A/B tests and discover that the button isn’t getting any clicks and I want to remove it. In that case, I could comment it out, leaving a note that a CTA button at the bottom page didn’t convert. Then, the next person who comes along and tries to optimize the conversion rate on the page will know to start with another button placement.
Leaving Comments in HTML
Comments are another way you can “talk” to people in your code. You can add explanatory notes for other collaborators on a web project, or you can leave yourself notes reminding you to come back to a section or prioritize it during your next redesign.
The best part? Comments will not appear on the front end of your site and they’re simple to master, even if you’re just getting started learning HTML.
Editor's note: This post was originally published in April 2021 and has been updated for comprehensiveness.
HTML Comments: How to Use Them
Published:
Adding comments in HTML can help you write and organize the backend of your webpage. They’re so useful that it’s considered a best practice to use them.
You can add comments to explain your code, which will make it easier to edit in the future or to work with other developers. You can also use comments to simplify your debugging efforts by “commenting out” lines of code without deleting them.
In this post, we’ll look more closely at what a comment is in HTML, as well as
What is a comment in HTML?
In HTML, a comment is a section of text that is not processed by the web browser. Comments are enclosed in <!-- --> tags. These tags tell the browser that the text inside them is a comment and should not be rendered on the front end.
With the comments tag, you can leave notes to remind yourself where you left off in the build process. You could explain the intended functionality of a section of code for another developer or your future self. Or, you might assign someone a task or point out an error for them with a comment.
In short, commenting in HTML helps you work smarter when building or debugging a website. Here's a video that goes into this in more detail:
Now, let's look at an example.
How to Write a Comment In HTML
To leave a comment in HTML, place a <!-- tag before the code and a --> tag after the code that you want to hide. These tags tell browsers to ignore anything between them.
For example, say you’re building a website with a team of developers. You want to leave a note reminding them that all buttons should use the same color.
Here’s what your HTML might look like, as well as the result on the front end:
See the Pen comment example by HubSpot (@hubspot) on CodePen.
As you can see, the comment is not rendered on the front end.
You can also quickly comment a line of code with the keyboard shortcut Ctrl + / on PC or Command + / on Mac. This method is much faster than typing the tags manually.
50 Free Coding Templates
Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.
You're all set!
Click this link to access this resource at any time.
Access nowHow to Write a Multi-line Comment in HTML
To create a comment in HTML over multiple lines, you can use the same method — just enclose your target text inside <!-- --> tags.
See the Pen comment example - multi-line by HubSpot (@hubspot) on CodePen.
How to Write an Inline Comment in HTML
It’s also possible to leave inline comments between active sections of HTML code:
See the Pen comment example - inline comment by HubSpot (@hubspot) on CodePen.
Commenting Out in HTML
Aside from leaving notes to developers (or your future self), HTML comments also come in handy for “commenting out” sections of code. Commenting out is when you temporarily “deactivate” a piece of working code with a comment.
Commenting out has two main purposes. The first is debugging: Upon discovering an error, you can “deactivate” different parts of your code with comments, check if the error is still occurring, and repeat the process until the buggy code is found.
Here’s what “commenting out” a button from the last example would look like:
See the Pen comment example: commenting out by HubSpot (@hubspot) on CodePen.
The second purpose is saving old versions of your code. Since commenting out means the code will remain visible in the back end, it can be a way of keeping old sections of code for developers who are just joining or have inherited the web project.
Say I run some A/B tests and discover that the button isn’t getting any clicks and I want to remove it. In that case, I could comment it out, leaving a note that a CTA button at the bottom page didn’t convert. Then, the next person who comes along and tries to optimize the conversion rate on the page will know to start with another button placement.
Leaving Comments in HTML
Comments are another way you can “talk” to people in your code. You can add explanatory notes for other collaborators on a web project, or you can leave yourself notes reminding you to come back to a section or prioritize it during your next redesign.
The best part? Comments will not appear on the front end of your site and they’re simple to master, even if you’re just getting started learning HTML.
Editor's note: This post was originally published in April 2021 and has been updated for comprehensiveness.
Don't forget to share this post!
Related Articles
Onchange Event in HTML: How to Use It [+Examples]
HTML Dialog: How to Create a Dialog Box in HTML
How to Create a Landing Page in HTML & CSS [+ 15 Templates]
HTML Audio Tag: How to Add Audio to Your Website
How to Add an Image & Background Image in HTML
How to Call a JavaScript Function in HTML
How to Embed Google Map in HTML [Step-By-Step Guide]
How to Create a Range Slider in HTML + CSS
How to Create an HTML Tooltip [+ Code Templates]
How to Make an HTML Text Box [Examples]