3.2.2 HTML Comments

This topic explains what HTML comments are, why they are used, and how to write them in HTML code.

Definition

HTML Comments: In programming, a good practice is to use comments within the code. This way, not only for the programmer but also for others, it becomes easy to understand what the code or program is about. Comments are only visible in the code and are not part of the output, as output is dependent only on the code itself.

Core Concept

HTML comments are like sticky notes you leave for yourself or others in your code. They don't appear on the webpage—they're only visible when you look at the HTML source code. Just as a chef might write notes in a recipe book ("add extra salt next time"), a programmer uses comments to explain what the code does, why certain choices were made, or to temporarily disable parts of the code. They make code easier to understand, maintain, and debug.

Detailed Explanation

What are HTML Comments?

In programming, a good practice is to use comments within the code. This way, not only for the programmer but also for others, it becomes easy to understand what the code or program is about. Comments are only visible in the code and are not part of the output, as output is dependent only on the code itself.

• Comments are notes for the programmer.
• Not visible to website visitors.
• Only visible in the HTML source code.
• Ignored by the browser when rendering the page.

Syntax of HTML Comments

Anything between `<!--` and `-->` is treated as comments and is ignored by the browser.

Syntax: ```html <!-- This is a comment --> ```

Example: ```html <!-- This is a comment in HTML. It will not appear on the webpage. --> <p>This paragraph will be visible on the webpage.</p> ```

Output on Webpage: This paragraph will be visible on the webpage.

Note: The comment line is not displayed; only the paragraph is shown.

Why Use Comments?

1. Documentation: Explain what the code does, making it easier for others (and yourself) to understand later.

2. Debugging: Temporarily disable parts of the code to find errors.

3. Organization: Divide code into sections with clear labels.

4. Collaboration: Help team members understand your code when working together.

5. Reminders: Leave notes for future changes or improvements.

Examples of Comments in Use

Example 1: Explaining a Section ```html <!-- Header Section Starts Here --> <h1>Welcome to My Website</h1> <!-- Header Section Ends Here --> ```

Example 2: Temporarily Disabling Code ```html <!-- <p>This paragraph is temporarily disabled.</p> --> <p>This paragraph is visible.</p> ```

Example 3: Noting a To-Do ```html <!-- TODO: Add contact form here --> ```

Intermediate Level

HTML comments are used to document code, making it easier to understand and maintain. They are written between `<!--` and `-->` and are ignored by the browser. Comments can explain sections of code, temporarily disable code during debugging, or leave notes for collaborators. They are not visible on the rendered webpage but can be seen in the HTML source. Good commenting practice improves code readability and teamwork.

Important Points

• - Comments: notes in code, not visible on webpage.
• - Syntax: `<!-- comment -->`.
• - Ignored by browser.
• - Used for documentation, debugging, organization, collaboration, reminders.
• - Visible only in HTML source code.
• - Improve code readability and maintainability.

Remember

• - Comments: `<!-- -->`.
• - Not visible on webpage.
• - Visible in source code.
• - Used for: Documentation, Debugging, Organization.
• - Ignored by browser.

Common Mistakes

• - Forgetting the closing `-->`: The comment won't end, and the rest of the code may be ignored.
• - Using comments for sensitive information: Comments are visible in source code; don't put passwords or secrets.
• - Over-commenting: Too many comments clutter code.
• - Outdated comments: Comments that no longer match the code confuse readers.
• - Confusing HTML comments with CSS/JS comments: HTML uses `<!-- -->`; CSS uses `/* */`; JS uses `//` or `/* */`.

Quick Revision

HTML comments are notes written between `<!--` and `-->` that are ignored by the browser and not displayed on the webpage. They are used for documentation, debugging, organization, collaboration, and reminders. Comments are visible only in the HTML source code and help make code easier to understand and maintain.

60-Second Revision

• HTML Comments: `<!-- comment -->`.
• Not visible on webpage; visible in source.
• Used for: Documentation, Debugging, Organization.
• Ignored by browser.
• Key Point: Comments are notes for programmers; they don't affect how the page looks.