liveBook · Manning

Comment

As explained in Web Design Playground, Second Edition

Source markup that records explanatory or organizational text without displaying it as page content.

An HTML comment is text stored in an HTML file that the web browser skips, so it does not appear in the rendered page. Comments act like sticky notes attached to your code. section 16.6

Use comments to:

  • Leave notes for yourself, such as where the logo will go. section 16.6
  • Explain the purpose or boundaries of a page section. section 16.6
  • Temporarily skip problematic text, tags, or unfinished links. section 16.6
  • Add copyright notices or other information for people viewing the HTML source. section 16.6

Comment syntax

Place the comment text between <!-- and -->. For example: <!--This text is a comment-->. The browser hides it from the rendered page, but anyone viewing the page source can read it, so never put sensitive information inside a comment. section 16.6

<!--This text is a comment-->

Inspect the compact form of an HTML comment. section 16.6

Marking page structure

Comments can label larger regions without changing the page: <!--START OF HEADER--> marks the beginning of a header, while <!--END OF HEADER--> marks its end. Uppercase lettering makes these labels stand out, but it is optional. section 5.5

How Web Design Playground, Second Edition covers it

How deep it goes
Defines comments, gives their delimiters, demonstrates section markers, and warns that source viewers can still read them.
Examples
Uses personal notes, explanatory labels, disabled markup, copyright information, and START OF HEADER or END OF HEADER markers.
What you can do after
Apply HTML comment syntax to document, organize, or temporarily hide source markup without displaying it in the browser.
How it connects
Connects HTML comments with web browsers, rendered pages, page source, HTML tags, and page structure.

Also explained in

Compare how 10 books explain comment →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground, Second Edition. The section links point to the parts of the book it draws on.