⬅ Previous Next ➡

21. HTML Comments

HTML Comments
  • HTML Comments: Comments are used to leave notes for yourself or other developers within the code. They are not displayed by the browser and do not affect the visual layout of the page.
  • Syntax:
    • All comments start with <!-- and end with -->.
    • Anything placed inside these tags becomes invisible to the website visitor.
  • Common Use Cases:
    • Organizing Code: Labeling the start and end of large sections (like Header, Sidebar, or Footer).
    • Debugging: "Commenting out" a line of code to see how the page looks without it, without actually deleting it.
    • Teamwork: Explaining why a specific piece of code was written a certain way.
  • Important Rules:
    • Comments cannot be nested (you cannot put a comment inside another comment).
    • Do not put sensitive information (like passwords) in comments, as anyone can see them by using "View Page Source" in their browser.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Comments (Full Examples)</title>
</head>

<body>

<h2>HTML Comments (&lt;!--  --&gt;)</h2>

<!-- Example 1: Labeling a section -->
<header>
  <h1>Welcome to SSWebTechIO</h1>
</header>

<!-- Example 2: Explaining a complex part of code -->
<p>This is a paragraph of text.</p>
<!-- The link below opens the official website -->
<a href="https://sswebtechio.com">Visit SSWebTechIO</a>

<!-- Example 3: Commenting out code for testing (Hidden paragraph) -->
<!--
<p>This paragraph is hidden. The browser will ignore it completely.</p>
-->

<!-- Example 4: Multiple lines of comments (Notes / Details) -->
<!--
Author: SSWebTechIO & MeherInfoTech
Date: 2026-01-20
Purpose: To demonstrate how HTML comments work
Website: https://quitexams.com
-->

<!-- Example 5: Closing tag reminders -->
<div class="content">
  <p>Inside the div...</p>
</div>
<!-- End of content div -->

<!-- Example 6: Comment inside a list -->
<h3>Menu</h3>
<ul>
  <li><a href="#">Home</a></li>
  <!-- This item is temporarily removed -->
  <!-- <li><a href="#">Blog</a></li> -->
  <li><a href="https://quitexams.com">QuiteXams</a></li>
</ul>

<!-- Example 7: Comment for debugging layout -->
<div>
  <h3>Section Title</h3>
  <p>This section is visible.</p>
</div>
<!-- If layout breaks, check div closing tags above -->

</body>
</html>
⬅ Previous Next ➡