HTML Comments

Learn how to write comments in HTML and understand how comments help developers organize, explain, and maintain their code.

What are HTML Comments?

HTML comments are notes written inside the HTML source code. They are not displayed as normal visible content on the rendered web page.

Comments are mainly used by developers to explain sections of code, leave reminders, or temporarily hide specific HTML code from rendering.

Basic Syntax:

<!-- This is an HTML comment -->

Simple HTML Comment

<!-- Welcome to CIIT Institute -->

The browser does not display the text inside the comment as visible page content.

The comment is not visible here.

Comment with HTML Code

<!--
    <h1>Welcome to CIIT Institute</h1>
-->

The heading inside the comment will not be rendered as normal page content.

Important: HTML comments are ignored for normal visual rendering, but the comment text remains part of the page source.

Using Comments for Documentation

Comments can explain what a particular part of the HTML document is responsible for.

<!-- Main Page Heading -->

<h1>
    CIIT Institute
</h1>


<!-- Course Description -->

<p>
    Learn HTML step-by-step.
</p>

Benefit: Documentation comments make the source code easier for developers to understand and maintain.

Using Comments to Mark Sections

Large HTML documents can be divided into logical sections by using comments.

<!-- HEADER SECTION -->

<header>

    <h1>CIIT Institute</h1>

</header>


<!-- MAIN CONTENT SECTION -->

<main>

    <p>
        Welcome to the HTML course.
    </p>

</main>


<!-- FOOTER SECTION -->

<footer>

    <p>
        Copyright CIIT Institute
    </p>

</footer>

Multi-Line Comments

HTML comments can contain multiple lines.

<!--

    This is a multi-line comment.

    It can contain
    multiple lines of text.

-->

Everything between the opening comment marker  is part of the comment.

Temporarily Disable HTML Code

Comments are sometimes used to temporarily prevent a block of HTML from being rendered.

<!--

<div>

    <h2>Temporary Section</h2>

    <p>
        This content is currently disabled.
    </p>

</div>

-->

Note: This technique is useful during development, but unnecessary commented-out code should generally be removed before production when it is no longer needed.

How Browsers Handle Comments

A browser reads the HTML document and recognizes comment sections as comments rather than visible page elements.

HTML Source

The comment exists inside the HTML source.

Browser

The browser recognizes the comment syntax.

Web Page

The comment is not displayed as normal page content.

Complete Example with Comments

<!DOCTYPE html>

<html>

<head>

    <title>
        HTML Comments Example
    </title>

</head>

<body>

    <!-- Main Heading -->

    <h1>
        CIIT Institute
    </h1>


    <!-- Course Description -->

    <p>
        Learn HTML step-by-step.
    </p>


    <!-- Course Link -->

    <a href="#">
        Learn More
    </a>

</body>

</html>

Comment Syntax Breakdown

Part	Syntax	Purpose
Opening Marker	`<!--`	Starts the comment.
Comment Content	`Comment Text`	Contains the developer's note.
Closing Marker	`-->`	Ends the comment.

Good Uses of HTML Comments

Explain Code

Explain what a specific section of HTML does.

Mark Sections

Clearly identify header, main content, sidebar, and footer sections.

Development Notes

Leave useful notes for yourself or other developers.

Temporary Code Removal

Temporarily disable a section during development.

Important Security Note

HTML comments are not a secure way to hide sensitive information.

Never store sensitive information in comments. Do not place passwords, secret keys, private credentials, API secrets, or confidential information inside HTML comments.

Common Mistakes

Forgetting the closing --> marker.
Accidentally placing visible HTML content outside the comment.
Writing sensitive information inside comments.
Leaving unnecessary commented-out code in finished production pages.

Practice Exercise

Create a heading and add a comment above it.
Create a paragraph and explain it using a comment.
Add comments before the header, main, and footer sections.
Temporarily comment out one HTML element.
Open the page in a browser and observe which content is visible.

Summary

HTML comments are written using . They are used to document code, mark sections, leave development notes, and temporarily disable HTML content. Comments are not displayed as normal visible content, and sensitive information should never be stored inside them.

← Previous: Paragraphs Next: Line Breaks →