HTML Comments: Notes Nobody Sees

Before we start with real content, let's learn one more small but very useful tool: comments. A comment is a piece of text in the code that the browser completely ignores - it never shows up anywhere on the website.

The syntax

An HTML comment looks like this:

<!-- This is a comment, nobody sees it on the website -->

Everything between  gets ignored. You can also write comments across multiple lines:

<!--
  This website belongs to Finn.
  Last edited: today
-->

What comments are used for

Comments are especially useful for two things:

Leaving notes for yourself: "Add a photo here later" or "Double-check this section again".
Temporarily disabling code: if you want to test what the page looks like without a certain line, you can simply wrap it in a comment instead of deleting it. That way you can easily bring it back later.

Try it - add a comment inside <body> in your index.html:

index.html

<body>

  <!-- TODO: add a description here later -->
  <h1>Welcome to my website!</h1>

</body>

Save and reload the page in your browser. The comment doesn't change anything you see - it's truly completely invisible to visitors of your website.

Tipp: In VS Code, you can turn a selected line into a comment automatically with the keyboard shortcut Ctrl+7 (Windows/Linux) or Cmd+7 (Mac) - and turn it back with the same shortcut. It saves typing.