HTML Comments

An HTML comment is a note added inside the code that is completely ignored by the browser. Comments are not displayed on the web page. They exist only in the source code and are used to explain the code, leave notes for team members, or temporarily disable parts of the page during development.

Comment Syntax

An HTML comment starts with . Everything between these two markers is treated as a comment.

<!-- This is a single-line comment -->

<!--
  This is a
  multi-line comment
-->

Single-Line Comment

<!-- Navigation bar starts here -->
<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
</nav>
<!-- Navigation bar ends here -->

Multi-Line Comment

<!--
  Author: John Smith
  Page: About Us
  Last Updated: January 10, 2025
  Description: This page contains company history and team info.
-->

<h2>About Our Company</h2>

Commenting Out Code (Temporarily Disabling)

During development, a section of HTML can be commented out to prevent it from displaying without deleting the code. This is useful for testing or debugging.

<h2>Special Offers</h2>

<!--
  <div class="promo-banner">
    <p>50% OFF today only!</p>
  </div>
-->

<p>Check back for upcoming deals.</p>

Inline Comment

Comments can also be placed on the same line as code, although the comment itself is not visible.

<h1>Welcome</h1> <!-- Main page heading -->
<p>Introduction paragraph.</p> <!-- Keep this short -->
<img src="banner.jpg" alt="Banner"> <!-- Update image before launch -->

Practical Use of Comments in a Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <!-- Stylesheet linked below -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- === HEADER SECTION === -->
  <header>
    <h1>My Website</h1>
  </header>

  <!-- === MAIN CONTENT === -->
  <main>
    <h2>Hello World</h2>
    <p>Welcome to my website.</p>

    <!-- TODO: Add feature cards here later -->

  </main>

  <!-- === FOOTER === -->
  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>

</body>
</html>

Comments Are Visible in Page Source

Although comments are not displayed on screen, they are visible to anyone who views the page source code (right-click → "View Page Source" in a browser). Therefore, never include passwords, private notes, or sensitive information in HTML comments.

When to Use Comments

Use Case	Example
Labeling page sections	`<!-- Navigation -->`
Explaining code purpose	`<!-- This form collects sign-up data -->`
Leaving reminders	`<!-- TODO: Replace placeholder image -->`
Temporarily disabling code	Wrap the code in `<!-- ... -->`
Team collaboration notes	`<!-- Update: Changed layout by Alex on Jan 10 -->`

Key Points to Remember

HTML comments use  to end
Comments are completely ignored by the browser and not shown on screen
Comments are visible in the page source code — do not include sensitive information
Use comments to explain complex sections or label major parts of a page
Comments can wrap around multiple lines of code to disable them temporarily
Good comments improve code readability and make teamwork easier

Previous lessons

Back to courses

Next lessons