HTML Comments

HTML comments are used to annotate code or provide information to other developers. Comments are not displayed in the browser.

Comment Syntax

<!-- This is a comment -->

Multi-Line Comments

<!--
    This is a comment
    that consists of
    several lines
-->

Comments in Different Places

In the Head

<head>
    <!-- Meta tags for SEO -->
    <meta name="description" content="Page description">
    <meta name="keywords" content="HTML, CSS, JavaScript">
</head>

In the Body

<body>
    <!-- Header Section -->
    <header>
        <h1>Title</h1>
    </header>

    <!-- Main Content -->
    <main>
        <p>Main content</p>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>Footer</p>
    </footer>
</body>

In CSS

<style>
    /* This is a CSS comment */
    .container {
        max-width: 1200px; /* Maximum width */
        margin: 0 auto; /* Centered */
    }
</style>

In JavaScript

<script>
    // This is a single-line JavaScript comment
    /* This is a multi-line
       JavaScript comment */

    function hello() {
        console.log("Hello!");
    }
</script>

Case Study: Organized Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus Portal</title>
    <style>
        /* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Header Styles */
        .header {
            background: #333;
            color: white;
            padding: 1rem;
        }

        /* Navigation Styles */
        .nav {
            display: flex;
            gap: 1rem;
        }

        /* Main Content Styles */
        .main {
            padding: 2rem;
        }

        /* Footer Styles */
        .footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 1rem;
        }
    </style>
</head>
<body>
    <!-- Header Section -->
    <header class="header">
        <h1>Campus Portal</h1>

        <!-- Navigation Menu -->
        <nav class="nav">
            <a href="home.html">Home</a>
            <a href="academic.html">Academic</a>
            <a href="contact.html">Contact</a>
        </nav>
    </header>

    <!-- Main Content Area -->
    <main class="main">
        <!-- Welcome Section -->
        <section>
            <h2>Welcome</h2>
            <p>Welcome to the campus portal.</p>
        </section>

        <!-- News Section -->
        <section>
            <h2>Latest News</h2>
            <article>
                <h3>New Student Registration</h3>
                <p>Registration opens on January 1.</p>
            </article>
        </section>
    </main>

    <!-- Footer Section -->
    <footer class="footer">
        <p>&copy; 2024 Technology University</p>
    </footer>
</body>
</html>

Everyday Case Study

Case: A developer needs to write code documentation.

<!-- 
    ============================================
    Lecturer Profile Page Template
    ============================================

    Usage:
    - Replace [NAME] with the lecturer's name
    - Replace [NIDN] with the lecturer's national lecturer ID
    - Replace [PHOTO] with the photo path

    Last updated: January 15, 2024
    ============================================
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lecturer Profile - [NAME]</title>
</head>
<body>
    <h1>[NAME]</h1>
    <img src="[PHOTO]" alt="Photo of [NAME]">
    <p>NIDN: [NIDN]</p>
    <!-- Add other content here -->
</body>
</html>

HTML Comments vs CSS/JS Comments

<!-- HTML Comment -->

<style>
    /* CSS Comment */
</style>

<script>
    // JavaScript single-line comment
    /* JavaScript multi-line comment */
</script>

Best Practices

1. Use comments: For code documentation
2. Don't overdo it: Too many comments
3. Update comments: When the code changes
4. Remove old comments: Those that are no longer relevant
5. Use comments: For section breaks

Summary

HTML comments help developers understand the code. Use comments for documentation and code explanations.