EN

HTML・Polishing your text

Leave notes with comments

It won't show on screen, but you can leave notes to yourself or your teammates right in the code. That's a comment — and it's really easy to write.

As you write code, you’ll sometimes look back at your own work and think, “wait, what was this for again?” For moments like that, HTML has a way to write notes that don’t show on screen. Those are comments.

Let’s write one

<!-- Start of the self-introduction area -->
<p>Hi, I'm Shima, and I love drawing.</p>
<!-- End -->

Open this page in the browser and the only thing you see is “Hi, I’m Shima, and I love drawing.” The parts wrapped in <!-- --> don’t appear on screen. But open the code and they’re still there — that’s a comment.

When do you use them?

Here are some times comments come in handy.

UseWhen
Leave a noteA word to your future self, like “swap this out for an image later”
Mark off sectionsA landmark in long code, like “header starts here”
Remove temporarilyWrap a tag you don’t want to delete but don’t want to show right now, to put it “to sleep”

The third one, putting things “to sleep,” is handy.

<!-- <p>Work-in-progress message</p> -->

Wrap a whole tag in <!-- --> and you can hide it without deleting it. Remove the wrapper later and it shows again. Disabling something by wrapping it in a comment like this is called commenting out in the programming world. “I want to try removing this, but I’d be scared if I couldn’t get it back” — for times like that, commenting out instead of deleting means you can always restore it, so you can relax.

One shortcut does it

You don’t have to type <!-- and --> by hand every time. In VSCode, just select the line you want to comment and press Ctrl + / (command + / on a Mac), and the whole line gets wrapped in <!-- -->. Press it again and the wrapper comes off, back to normal. You can toggle “put to sleep ↔ bring back” in an instant, so it’s well worth remembering.

TipsVSCode shortcuts worth learningBesides toggling comments, we’ve rounded up VSCode shortcuts worth learning

Summary of this lesson

  1. Wrap comments in <!-- and -->
  2. They’re notes inside the code that the browser doesn’t display
  3. You can use them as landmarks, or to put a tag to sleep temporarily

A comment is a letter to your future self. Leave them carefully, and the person they help most later is you.

Try it

We won’t use this on Shima’s page (comments are notes just inside the code, and they don’t show on screen). In a practice file, write two paragraphs and wrap just one of them in <!-- and --> to put it “to sleep.” Only the one you didn’t wrap shows in the browser. Remove the wrapper and it comes back — try this toggle once and you’ll be ready to use it the moment you need it.

FAQ

What does 'commenting out' mean?
It means wrapping code in comment marks to temporarily disable it without deleting it. In HTML, anything you wrap between <!-- and --> stops showing on the screen.
If I write too many comments, will the page get heavy?
There's almost no effect on how it displays, but comments are part of the file too, so the file grows by however much you write. For a normal amount of note-taking, there's no need to worry.
Is there a shortcut for writing comments quickly?
Yes. In VSCode, select a line and press Ctrl+/ (command+/ on a Mac) to toggle wrapping it in a comment on and off in one go.