HTML Comments

A baker might write a note in pencil next to a recipe, such as "use less sugar in summer". Anyone who reads the recipe card sees the note, but the note is not part of the bread. HTML has the same kind of note. It is written inside the file, the browser skips it when it draws the page, and it is called a comment.

Writing a Comment

A comment starts with <!-- and ends with -->. Everything between those two markers is ignored when the browser draws the page:

<!-- Opening hours change in December -->

A comment can also run over several lines. The browser keeps skipping text until it reaches -->:

<!--
  The weekend hours below were agreed with Maya.
  Check them again before the holidays.
-->

Comments in the Bakery Page

Here is the bakery page from the previous lesson with three comments added:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Maya's Bakery</title>
  </head>
  <body>
    <!-- Main heading: keep the shop name exactly as on the sign -->
    <h1>Maya's Bakery</h1>

    <!-- Opening hours change in December -->
    <p>Fresh bread every morning, from 7 a.m.</p>

    <!-- <p>Closed on Sundays.</p> -->
  </body>
</html>

The browser shows exactly the same page as before:

Maya's Bakery
Fresh bread every morning, from 7 a.m.

The first two comments are notes for whoever edits the file next. The third one is different, because it contains a whole paragraph. The paragraph "Closed on Sundays." is still in the file, but it is inside a comment, so the browser does not show it. This is called commenting out a piece of markup. If the bakery starts closing on Sundays again, you delete the <!-- and the -->, and the paragraph appears.

Commenting out is useful while you test a page. If something looks wrong, you can hide one part at a time to find the cause, without deleting any markup. When you have finished testing, delete the markup you no longer need instead of leaving it in comments, because old commented-out markup makes the file harder to read.

Write Comments That Explain Why

The markup already says what each element is, so a comment such as <!-- paragraph --> above a <p> adds nothing. A useful comment says something the markup cannot show: why a choice was made, what must not be changed, or what still has to be done. "Keep the shop name exactly as on the sign" is useful, because nothing in the <h1> explains that rule.

Comments Are Not Private

The browser hides comments on the page, but it still downloads them as part of the file. Anyone can read them with the View Source command from the lesson on your first HTML file: right-click the page and choose "View page source", or press Ctrl+U in Chrome, Edge and Firefox on Windows.

For this reason, never put a password, a private address, an internal note about customers or any other secret in an HTML comment. Assume that every comment will be read by the public.

Comments Cannot Be Nested

A comment ends at the first --> the browser finds, even if you meant it to end later. So you cannot put one comment inside another:

<p>A <!-- outer <!-- inner --> still here --> B</p>

You might expect the browser to show only "A B". Instead, the first comment ends at the --> after "inner", and the rest becomes ordinary text. Chrome shows this paragraph:

A still here --> B

The HTML validator also reports the mistake with the message "Saw <!-- within a comment". To comment out a part of the page that already contains comments, remove or shorten the inner comments first.

Old Conditional Comments

In older websites you may see comments that start with <!--[if IE]>. They were special instructions for Internet Explorer, a browser that is no longer supported. Current browsers treat them as ordinary comments and ignore their contents, so there is no reason to write them in new pages.