← Back to Chapters

HTML Comments

? HTML Comments

⚡ Quick Overview

HTML comments are notes that you add in your code but do not show up on the webpage. They are useful for explaining sections, leaving reminders, or temporarily disabling code while testing. Comments help you and other developers understand the structure and purpose of different parts of a page.

? Key Concepts

  • Comments start with <!-- and end with -->.
  • Browsers completely ignore anything written between these markers.
  • Comments can be placed inside <head>, <body>, or nested inside elements like <div>.
  • They are helpful for labeling sections, testing parts of the layout, or hiding code without deleting it.
  • Comments improve collaboration and make long HTML files easier to maintain.

? Syntax and Usage

The basic syntax for an HTML comment looks like this: <!-- this is a comment -->. Anything between the opening <!-- and closing --> will not appear on the page.

You can use comments to:

  • Mark sections such as header, navigation, main content, and footer.
  • Temporarily hide elements (comment them out) during debugging.
  • Leave <!-- TODO: ... --> reminders for future improvements.

? Code Example

Here is an example of using comments in HTML:

? View Comment Example 
<!-- This is a single-line comment -->
<p>This is a visible paragraph.</p>
<!-- The paragraph below is commented out and won’t be shown -->
<!-- <p>This paragraph is hidden from view.</p> -->
<p>Another visible paragraph.</p>

? Live Output and Explanation

? What the User Sees

This is a visible paragraph.

Another visible paragraph.

The commented paragraph does not appear in the output. It still exists in the source code but is ignored by the browser, which makes comments perfect for testing or hiding content temporarily.

? Tips and Best Practices

  • Use comments to label major sections, like <!-- Header --> or <!-- Footer -->.
  • Keep comments short and meaningful instead of describing obvious things.
  • Use <!-- TODO: ... --> to track future tasks or improvements in your HTML.
  • Comment out code instead of deleting it when you are experimenting or debugging.
  • Avoid putting passwords or sensitive information in comments—they are visible in the page source.

? Try It Yourself

  • Create a paragraph and comment it out. Refresh the page and confirm that it no longer appears.
  • Add section labels like <!-- Navigation -->, <!-- Main Content -->, and <!-- Footer --> to your existing HTML page.
  • Temporarily disable an image or a link by wrapping it inside a comment.
  • Write at least one <!-- TODO: ... --> reminder in your HTML project for a feature you plan to add later.

? Summary

HTML comments are invisible notes that live inside your code but not on the page. They help you organize, document, and safely experiment with your HTML. By using the <!-- ... --> syntax wisely, you make your projects easier to understand and maintain— both for yourself and for anyone else reading your code.