Lesson 16 — HTML Comments <!-- -->

Learning Goals

• Understand what HTML comments are.
• Learn how to write comments properly.
• Use comments for documentation and debugging.

Part 1 — What are Comments?

HTML comments let you leave notes in your code that browsers ignore. They are useful for explaining code, marking sections, or temporarily disabling elements.

They will not appear on the webpage, but anyone can see them by viewing the source code.

Part 2 — Example

<!-- This is a comment -->

<p>Visible paragraph.</p>

<!-- <p>This paragraph won’t display</p> -->

Result: The first comment and the second commented-out paragraph are ignored by the browser.

Part 3 — Best Practices

• Keep comments short and relevant.
• Use them to mark sections (e.g., <!-- Navigation -->).
• Don’t store sensitive information in comments — users can view source.

Part 4 — Common Mistakes

• ❌ Forgetting to close a comment → breaks the rest of the page.
• ❌ Using comments for secret data → anyone can read source.
• ❌ Over-commenting obvious code → clutters files.

Quick Quiz

1. What is the syntax for an HTML comment?
2. Do comments show up on the webpage?
3. Why should you avoid putting passwords in comments?

Mini Project — Code Annotation

Create a small HTML page with a header, paragraph, and footer. Add comments above each section describing what it does. Then try “commenting out” one element to hide it.

Lesson 16 Dictionary

Terms introduced in this lesson.

C

<!-- --> (Comment)

Used to add notes in code that browsers ignore.