« Previous Next »

All Types of HTML Comments

HTML comments help organize your code and are ignored by the browser when rendering the page.

Single-Line Comment

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

Multi-Line Comment

<!--
  This is a multi-line comment.
  It can span over multiple lines.
  Useful for writing long explanations.
-->

Developer Notes (Labelled Comments)

<!-- TODO: Add navigation menu here later -->
<!-- NOTE: This section will be visible to admin only -->
<!-- FIXME: This needs to be fixed for small screens -->

Conditional Comments (for Internet Explorer only — obsolete now)

<!--[if IE]>
  <p>This is Internet Explorer specific content</p>
<![endif]-->

Wrapping a Section with Comment

<!-- Start: Sidebar -->
  <div class="sidebar">
    <p>Sidebar content</p>
  </div>
<!-- End: Sidebar -->

Important Notes

  • HTML doesn't support nested comments. Never do this: 
    <!-- <!-- Invalid --> -->
  • Comments are visible in browser “Inspect Element” but not on the page.

VS Code Shortcut

  • Windows/Linux: Ctrl + /
  • Mac: Cmd + /

Add Comments

Output :

Hide Content

Output :

Example

Output :

Practice Exercises

Task 1: How to add hidden developer notes?

Goal: Practice adding notes in code without displaying them on the browser.
💡 Hint: Wrap developer notes inside <!-- --> tags.
💡 Show Solution 
<html>
  <body>
    <!-- Welcome message for AIT website -->
    <p>Welcome to the Academy of Information Technology (AIT).</p>
    
    <!-- Course details section -->
    <p>We offer web development, programming, and IT certifications.</p>
  </body>
</html>
Output :

Welcome to the Academy of Information Technology (AIT).

We offer web development, programming, and IT certifications.

Explanation: Comments inside <!-- --> are completely ignored by browsers and only visible inside source code for reference.
Task 2: How to temporarily hide HTML code?

Goal: Learn to disable specific sections or multi-line content from rendering.
💡 Hint: Place multi-line HTML tags inside <!-- and --> to hide them.
💡 Show Solution 
<html>
  <body>
    <p>Welcome to the Academy of Information Technology (AIT).</p>

    <!--
    <p>Here is a photo of our campus:</p>
    <img src="ait_campus.jpg" alt="AIT Campus">
    -->

    <p>Explore our courses and join the next batch.</p>
  </body>
</html>
Output :

Welcome to the Academy of Information Technology (AIT).

Explore our courses and join the next batch.

Explanation: Any content wrapped inside a comment block will not be processed or displayed on the webpage output.
« Previous Next »