HTML comments

Intro

Let’s go over a new concept called comments. Comments are notes that you can write in your code. You can use them to remind you what a line or section of code does or to label the different parts of your code.

The text you write inside a comment won’t show up on your web page because the browser is designed to ignore comments. Comments are just notes for you or for other developers to read.

Comments are actually a feature of many coding languages, not just HTML.

Steps

Create comment

To get started, put your cursor at the end of the opening body tag and press Enter.

To quickly create a comment on a blank line, type Control + / on Windows or Command + / on macOS.

<!--  -->

This will create the opening and closing parts of the comment and put your cursor in the middle. Next, write This is a comment.

<!-- This is a comment -->

Notice that the comment doesn’t show up at all in the preview. That’s what we want, since it’s just a note for us to read.

Disable code

You can also use comments to temporarily disable one or more lines of code. If you put your cursor on a line of code and then use the same CTRL+/ or CMD+/ shortcut, the entire line will turn into a comment.

Try that now. Put your cursor on the same line as the first paragraph element and use the shortcut.

<!-- <p>This is a paragraph.</p> -->

Notice that the paragraph element disappears from the web page.

Uncomment code

You can use the same shortcut to uncomment and restore the line.

<p>This is a paragraph.</p>

Notice that the paragraph element reappears on the web page.

Multiple lines

If you want to turn multiple lines into a comment, you can highlight multiple lines and then use the same shortcut to turn the lines into a comment.

Comments at the end

We saw how to add a comment on a blank line, but there’s another shortcut I can use to add a comment to a line that already has code on it, without disabling the code.

To add this kind of comment, I’ll move my cursor to the end of line 11, after the closing paragraph tag, and type a space and then the letter c.

<p>This is a paragraph.</p> c

Then press Tab.

<p>This is a paragraph.</p> <!--  -->

This will generate the opening and closing parts of the comment. Write This is also a comment.

<p>This is a paragraph.</p> <!-- This is also a comment -->

Again, notice that this text doesn’t show up anywhere on the web page.

This is because the browser ignores all comments.

Writing comments manually

Technically, you don’t have to use these shortcuts. You can always write the opening and closing parts of a comment manually, but I recommend using these shortcuts to save time.

So that’s how you write comments in HTML.

Final code

If you’ve followed all of the steps so far, this is the code that should be in between the body tags.

<!-- This is a comment -->
<p>This is a paragraph.</p> <!-- This is also a comment -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et aliquid veritatis voluptates exercitationem fugit. Distinctio dolores impedit magni corporis blanditiis dignissimos quas iusto vero, facere vitae voluptatibus nemo dolor earum?</p>