HTML - Comments

In HTML, comments are annotations written in the source code that are completely ignored and never displayed by the web browser. They help developers document HTML source code, clarify complex layouts, leave reminders for team members, and temporarily disable code blocks during testing and debugging without permanently deleting them.

Comment Syntax

An HTML comment starts with <!-- and concludes with -->. Anything placed in between is treated as a comment:

<!-- This is a standard HTML comment -->
							

Single-Line & Multi-Line Comments Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Comments Example - Veewom</title>
</head>
<body>
    <!-- ================= HEADER SECTION START ================= -->
    <header>
        <h1>Veewom Computer Education</h1>
    </header>
    <!-- ================= HEADER SECTION END ================= -->

    <!-- Single-line comment explaining the paragraph below -->
    <p>This is a sample paragraph rendered on the screen.</p>

    <!--
        Multi-line comment:
        Author: Amit Sharma (BCA Batch 2026)
        Topic: HTML5 Semantic Document Architecture
        Last Updated: September 2026
    -->
    <p>Veewom is the largest educational tutorials platform for BCA students and bloggers.</p>
</body>
</html>
							

Commenting Out Code for Debugging

Web developers frequently use comments to temporarily disable elements or scripts during debugging to see how the page behaves without them:

<p>This active paragraph is visible to visitors.</p>

<!--
<div class="promo-banner">
    <h3>Special Holiday Offer!</h3>
    <p>This block is temporarily commented out during maintenance.</p>
</div>
-->

<p>This paragraph continues normal page content.</p>
							

Historical Context: Conditional Comments in Internet Explorer

Historically, Microsoft Internet Explorer (IE 5 through IE 9) supported proprietary Conditional Comments to load dedicated CSS fixes or scripts specifically for older IE versions:

<!--[if IE 9]>
    <link rel="stylesheet" href="ie9-fix.css">
<![endif]-->
							

Crucial Security Warning for Web Developers

• NEVER store administrative passwords, database connection strings, or secret API credentials inside HTML comments!
• NEVER leave confidential business notes or client personal data in public markup comments.
• For confidential notes, use server-side comments (e.g., PHP /* comment */, Python/Django {# comment #}) which are stripped out on the server before reaching the client browser.

Hands-on Practice Session for Students

Problem Statement: Create an HTML document with professional developer section comments dividing the document into a Header, Main Navigation, Article Body, and Footer. Also include one commented-out discount coupon code to simulate debugging.

Solution Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document Architecture - Comments Practice</title>
</head>
<body>
    <!-- SECTION 1: MAIN NAVIGATION BAR -->
    <nav>
        <a href="index.htm">Home</a> | 
        <a href="setup.htm">Setup</a> | 
        <a href="comments.htm">Comments</a>
    </nav>

    <!-- SECTION 2: MAIN EDITORIAL CONTENT -->
    <main>
        <article>
            <h1>Learning Web Development with Veewom</h1>
            <p>Comments make codebase collaboration seamless across student project teams.</p>

            <!-- TEMPORARILY DISABLED: Expired Festival Coupon
            <div class="coupon-box">
                <p>Use code <strong>VEESAVE20</strong> for 20% discount.</p>
            </div>
            -->
        </article>
    </main>

    <!-- SECTION 3: COPYRIGHT & LEGAL FOOTER -->
    <footer>
        <p>&copy; 2026 Veewom.com. All rights reserved.</p>
    </footer>
</body>
</html>
							

Viva & University Exam Questions (BCA Exam Preparation)

Frequently Asked Questions (FAQ)