How to comment in html

Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code and increases code readability.

HTML comments are placed in between tags. So, any content placed with-in tags will be treated as comment and will be completely ignored by the browser.

Example

This will produce the following result without displaying the content given as a part of comments −

Valid vs Invalid Comments

Example

Here, the given comment is a valid comment and will be wiped off by the browser.

This will produce the following result −

But, following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark.

This will produce the following result −

Multiline Comments

So far we have seen single line comments, but HTML supports multi-line comments as well.

You can comment multiple lines by the special beginning tag placed before the first line and end of the last line as shown in the given example below.

Example

This will produce the following result −

Conditional Comments

Conditional comments only work in Internet Explorer (IE) on Windows but they are ignored by other browsers. They are supported from Explorer 5 onwards, and you can use them to give conditional instructions to different versions of IE.

Example

You will come across a situation where you will need to apply a different style sheet based on different versions of Internet Explorer, in such situation conditional comments will be helpful.

Using Comment Tag

There are few browsers that support tag to comment a part of HTML code.

Note − The tag deprecated in HTML5. Do not use this element.

Example

If you are using IE, then it will produce following result −

But if you are not using IE, then it will produce following result −

Commenting Script Code

Though you will learn JavaScript with HTML, in a separate tutorial, but here you must make a note that if you are using Java Script or VB Script in your HTML code then it is recommended to put that script code inside proper HTML comments so that old browsers can work properly.

Example

This will produce the following result −

Commenting Style Sheets

Though you will learn using style sheets with HTML in a separate tutorial, but here you must make a note that if you are using Cascading Style Sheet (CSS) in your HTML code then it is recommended to put that style sheet code inside proper HTML comments so that old browsers can work properly.

HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.

Note: Comments are not displayed by the browser, but they can help document your HTML source code.

Add Comments

With comments you can place notifications and reminders in your HTML code:

Example

This is a paragraph.

Hide Content

Comments can be used to hide content.

Which can be helpful if you hide content temporarily:

Example

This is a paragraph.

This is a paragraph too.

Example

Hide a section of HTML code:

This is a paragraph.

This is a paragraph too.

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

Example

Hide a part of a paragaph:

This is a paragraph.

HTML Exercises

We just launched
W3Schools videos

COLOR PICKER

Get certified
by completing
a course today!

CODE GAME

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Web Courses

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

How to comment/uncomment in HTML code

Often while coding view templates in html, my habit of adding some helpful comments causes lots of time-consuming effort while testing.

Consider this code.

Now, if I have to hide out some portion of the view template, in case of php I would just select the desired code and put single-line comments (using a shortcut key most of the times).

Then when I’m done testing I have to go through the agony of putting back those closing tags.

Is there a better and time saving way of block commenting in HTML?

11 Answers 11

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Yes, to comment structural metadata out,

Comment out large sections of HTML (Comment Out Block)

my personal way in a .html file is opening:

Is a workaround to the problem since is not HTML.

Is worth nothing that is not HTML but a common developer practice is to comment out parts of metadata so that it will not be rendered and/or executed in the browser. In HTML, commenting out multiple lines can be time-consuming. It is useful to exclude pieces of template structural metadata containing comments, CSS or code and systematically commenting out to find the source of an error. It is considered a bad practice to comment blocks out and it is recommended to use a version control system. The attribute «type» is required in HTML4 and optional in HTML5.

HTML Comment – How to Comment Out a Line or Tag in HTML

In this article, you’ll learn how to add single and multi-line comments to your HTML documents.

You’ll also see why comments are considered a good practice when writing HTML code.

Let’s get started!

The HTML Comment Tag

The general syntax for an HTML comment looks like this:

Don’t forget the exclamation mark at the start of the tag! But you don’t need to add it at the end.

The tag surrounds any text or other HTML tag you want to comment out.

When to Use HTML Comments

HTML comments don’t get displayed in the browser. This means that any comments you add to your HTML source code will not be shown when the document gets rendered in a web browser.

So your comments will be visible for others to see if you make the HTML document public and they choose to look at the source code.

Writing comments is helpful and it’s a good practice to follow when writing source code. Comments help you document and communicate about your code and thought process to yourself (and others). It also reminds you what you were thinking/doing when you come back to a project after months of not working on it.

Comments also help you communicate with other developers who are working on the project with you. Your comments can clearly explain to them why you added certain lines of code.

How to Write Single-Line Comments in HTML

A single-line comment only spans one line. As mentioned earlier, that line will not get displayed in the browser.

Use a single-line comment when you want to explain and clarify the purpose behind the code that follows it or when you want to add reminders to yourself like so:

Single-line comments are also helpful when you want to make clear where a tag ends. This comes in handy in a long and complex HTML document where a lot is going on and you may get confused as to where a closing tag is situated.

How to Write Inline Comments in HTML

You can also add comments in the middle of a sentence or line of code.

Only the text inside the will be commented out, and the rest of the text inside the tag won’t be affected.

How to Write Multi-Line Comments in HTML

Comments can also span multiple lines, using the exact same syntax you’ve seen so far.

How to Comment Out a Tag in HTML

So what if you want to comment out a tag in HTML?

Commenting out tags helps with debugging.

When something isn’t working the way it’s supposed to or they way you intended it to, start commenting out individual tags one by one. This lets you test them and see which one is causing the issue.

Keyboard Shortcut for Adding HTML Comments

There are shortcuts you can use for adding comments – and you’ll probably end up using them a lot. The shortcut is Command / for Mac users or Control / for Windows and Linux users.

To add a single-line comment, just hold down the combo of keys shown above inside the code editor. Then the whole line you’re on will be commented out. Just keep in mind that since everything will be commented out on that line, this only works for single-line comments. You’ll need to add inline comments manually.

For adding multi-line comments, select and highlight all the text or tags you want to comment out and hold down the two keys shown previously. Each line you selected will now have a comment.

Conclusion

And there you have it – now you know how and why to use comments in HTML!

Learn more about HTML by watching the following videos on freeCodeCamp’s YouTube channel:

freeCodeCamp also offers a free, project-based certification on Responsive Web Design.

It is ideal for complete beginners and assumes no previous knowledge. You’ll start from the absolute necessary basics and build your skills as you progress. In the end, you’ll complete five projects.

How to Comment & Comment Out in HTML

Written by Anna Fitzgerald

Like comments in CSS, adding comments to your HTML can help you write and organize the backend of your webpage.

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.

Let’s look more closely at what a comment is in HTML and then define what “commenting out” means in HTML.

What’s a comment in HTML?

In HTML, a comment is text enclosed within tags. This syntax tells the browser that they are comments and should not be rendered on the front end.

Thanks to the comments tag, you can leave notes to remind yourself where you left off in the build process. You can explain the intended functionality of a section of code, whether for the sake of another developer or your future self.

You can also communicate with other developers working simultaneously on the same code. You might leave a warning for them to only run a certain function at night because it takes a long time to execute. Or you might assign them a task or point out an error for them with a comment.

In short, commenting in HTML can help you work smarter and better when building, debugging, or redesigning a website. Here’s a video that can do into this in more detail.

Now, let’s look at an example.

HTML Comment Example

Say you’re building a Bootstrap website with a team of developers. You want to leave a note reminding them that all Bootstrap buttons should use the primary modifier class so that they’re all the same color.

Here’s what your HTML might look like, as well as the result on the front end:

See the Pen xxgWwoa by Christina Perricone (@hubspot) on CodePen.

As you can see above, the comment is successfully hidden on the front end.

Now that we understand how to comment in HTML, let’s look at how to comment out.

How to Comment Out in HTML

To “comment out” in HTML, simply place the tags around the code you want to hide. These tags will tell browsers not to render this code on the front end.

Commenting out has two main purposes. One is debugging your code. Upon discovering an error, you might comment out your first few lines of code, check if the error is still occurring, and keep repeating the process until the buggy code is isolated.

The second purpose has to do with version history. Since commenting out means the code will remain visible in the back end, it can be a way of showing different iterations of the code base for new developers who are just joining or have inherited the web project.

Let’s look at an example. Say I’m building out a page in Bootstrap: I have a navbar, heading, paragraph, and button.

Here’s the HTML and how the page looks on the front end:

Maybe I preview my work and discover there’s a bug. In that case, I can comment out each element to isolate which section of the code contains the error.

Or maybe 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.

Commented Out Code

To “comment out” a button — or any HTML element— simply wrap the element in the tags. Everything between those tags will not be shown on the front end.

The rest of the code will remain the same. Everything on the front end will also look the same, except for the button. You can see for yourself below.

See the Pen yLgKeYz by Christina Perricone (@hubspot) on CodePen.

Leaving Comments in Your 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 and CSS.

Originally published Apr 12, 2021 7:00:00 AM, updated June 17 2022