HTML Comments: How to Write Them and Why I Think You Should Use Them

Download Now: Free HTML & CSS Coding Templates

Comments are one of my favorite features of HTML. Whether I'm debugging the front end of a website or leaving notes to make my code readable, they make my life a little easier, which is why I think anyone new to HTML should learn how they work.

In this post, we'll explore what a comment is in HTML, how to write an HTML comment, and why you should comment in your code.

Table of Contents

• What is a comment in HTML?
• How to Write a Comment In HTML
• Why use comments in HTML?

Comments allow you to leave notes in your code for yourself or another developer, or to temporarily deactivate sections of code for debugging. 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, and it's easy to do. Next, let's learn how.

How to Write a Comment In HTML

To comment in HTML, place a -- tag before the comment text and a --> tag after the comment text. These tags tell browsers to ignore anything between them.

For example, say you're building a website and want to remind yourself or another developer to place an image on a section of a web page. Here's what the HTML would look like with a comment, alongside how the page looks on the front end.

See the Pen comment example by HubSpot (@hubspot) on CodePen.

The comment on line 3 is not rendered on the front end.

As you can see, placing a comment is pretty simple: Paste in the start and end tags. However, I almost always use a keyboard shortcut to make comments, which is much faster than typing the tags manually.

To turn a line of text into a comment, place your cursor on the line of code you want to turn into a comment. Then, use the shortcut Ctrl + / on PC or Command + / on Mac, and the entire line of code will be commented out.

Comments are invisible on the front end, but note that they're still visible on your website if the user views the source code. So, don't put anything in your comments you wouldn't want the public to see (e.g., top-secret passwords).

How to Write a Multi-line Comment in HTML

Above, we saw how to leave a comment on a single line of code. But it's also possible to leave multi-line comments. To create a comment in HTML over multiple lines, use the same method - just enclose your target text in tags.

See the Pen comment example 2 by HubSpot (@hubspot) on CodePen.

You can use a keyboard shortcut to comment multiple lines of text by highlighting the text and hitting Ctrl + / on PC or Command + / on Mac. However, this will turn each individual line into its own comment. If you want the multiple lines to be within one comment, you'll have to manually write the opening and closing tags, as shown above.

How to Write an Inline Comment in HTML

It's also possible to leave inline comments between active sections of HTML code. Again, place the opening and closing tags around the sections you want to hide.

See the Pen comment example 3 by HubSpot (@hubspot) on CodePen.

With these three methods, you'll be commenting like a pro.

Why use comments in HTML?

Comments are a trick that anyone writing HTML should know. But how are they useful? Here are the most common uses for commenting in HTML (or any coding language):

Document and explain the code.

Imagine you spend some time working on a web page and then get distracted for, say, a few months. When you come back to the code after all that time, it helps to have comments that re-explain how your code works.

When writing HTML, it's considered good form to leave comments in your code when necessary to explain sections that may be unclear, and to annotate different sections to make them more readable.

This is immensely helpful for fellow developers working on the same code, or for your future self when you return to the code later and need a reminder of how it works. And the more code you have, the more comments you'll probably want to leave.

Trust me, I've come back to code where I skimped on comments, and it took me much longer to figure out how everything worked. Comments are a bit extra work in the short term that saves you (and your team) time in the long term.

Deactivate sections of code.

Aside from leaving notes for 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 is mainly used for debugging - upon discovering an error, you can "turn off" parts of your code with comments, check if the error is still occurring, and repeat the process until the buggy code is found.

In the code below, try commenting out the button element:

See the Pen comment example 4 (commenting out) by HubSpot (@hubspot) on CodePen.

You can also comment out elements on a page for other reasons. Say I run some A/B tests on a button and discover that it isn't getting any clicks, so I want to remove it. In that case, I could comment it out, leaving a note that a CTA button at the bottom of the 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.

Save old sections of code.

The final purpose of comments is to save 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.

While I recommend more structured version control methods for larger projects (e.g., GitHub), commenting out old code is a quick and dirty way to save previous versions of code in the same file.

Leaving Comments in HTML

Comments are another way to "talk" to people in your code. You can add explanatory notes for other collaborators on a web project, or you can leave notes for yourself 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 learning HTML.

Editor's note: This post was originally published in April 2021 and has been updated for comprehensiveness.

Topics:HTML

Don't forget to share this post!