← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 6 of 26

HTML Comments

Imagine building a complex LEGO set, but you have to stop halfway through. You would probably want to leave a sticky note on the table telling your family not to clean it up, or reminding yourself which brick to attach next. HTML comments are the sticky notes of the web development world. They are custom notes and guidelines you write directly inside your code that the browser completely ignores. They do not show up on the live webpage, but they are incredibly helpful for explaining your logic, leaving tasks for teammates, or temporarily hiding sections of your page while troubleshooting.

In this page:

  1. What is an HTML Comment?
  2. Hiding Code Temporarily
  3. Organizing Huge Web Layouts
  4. Collaborating with Others Using TODOs
  5. Why Public Comments Must Be Clean
  6. Commenting Conventions Across Teams

What is an HTML Comment?

Comments are notes in your code that the browser completely ignores. They do not show up on the live webpage, but they are incredibly useful for leaving instructions, explanations, or reminders for yourself and other developers.

Note: Use comments to explain why you structured your code in a specific way rather than what the code does.

Warning: Never put passwords, private API keys, or sensitive backend logic in HTML comments because anyone can read them using View Source.

Example: What is an HTML Comment?

markup 
<!-- This note is invisible on the live page -->
<p>Visible content</p>

Hiding Code Temporarily

When you are debugging or building a new feature, you might want to hide an element without deleting it permanently. Commenting out code lets you safely turn off elements and bring them back whenever you are ready.

Note: You can comment out multiple lines of code at once to test cleaner, simplified layouts.

Warning: Avoid leaving massive chunks of dead, commented-out code in your final production files because it bloats file sizes.

Example: Hiding Code Temporarily

markup 
<!-- <p>This paragraph is temporarily hidden</p> -->
<p>This paragraph is visible</p>

Organizing Huge Web Layouts

As your HTML files grow into hundreds of lines, finding where a specific section ends becomes a headache. Comments serve as visual headers and dividing lines to help you keep your codebase organized and easy to navigate.

Note: Create a consistent divider template for your major layout sections to make them pop out.

Warning: Make sure you always close your comments properly or the browser might accidentally hide your entire page content.

Example: Organizing Huge Web Layouts

markup 
<!-- ===== Header Section ===== -->
<header></header>
<!-- ===== Footer Section ===== -->
<footer></footer>

Collaborating with Others Using TODOs

When you are working in a team or planning future edits, you can write tasks directly in your markup. Adding a TODO tag inside a comment is a standard industry practice for keeping track of outstanding tasks.

Note: Many code editors can automatically scan and list all your TODO comments in a handy checklist panel.

Warning: Do not rely on TODO comments as a permanent task manager because they can easily accumulate and clog your codebase.

Example: Collaborating with Others Using TODOs

markup 
<!-- TODO: add pagination controls here -->
<div></div>

Why Public Comments Must Be Clean

HTML is a client-side language. This means every line of code you write, including your comments, is sent directly to the user's browser. Anyone who right-clicks your page and selects 'View Source' can read your developer notes.

Note: Always strip out private comments, backend logic explanations, and jokes before publishing your site.

Warning: Never leave legacy code paths, test databases, or internal server directory paths inside public comments.

Example: Why Public Comments Must Be Clean

markup 
<!-- Do not leave internal notes here; anyone can View Source -->
<p>Public page content</p>

Commenting Conventions Across Teams

Different teams often adopt their own comment conventions, like prefixing important warnings with 'NOTE:' or marking sections meant to be removed later with 'TEMP:'. Agreeing on a shared convention across a team makes comments far more useful when multiple people work on the same codebase.

Note: Document your team's comment conventions in a short style guide so new developers immediately understand what NOTE, TEMP, or FIXME markers mean.

Warning: Comments that assume only the original author will ever read them tend to become confusing or outdated once other developers join the project.

Example: Commenting Conventions Across Teams

markup 
<!-- NOTE: this section relies on the global nav script -->
<!-- TEMP: remove this banner after the sale ends -->
<div></div>
Common Mistakes
  1. Using invalid comment tags such as missing dashes or using standard slash characters.
  2. Leaving sensitive information like private keys or personal developer rants in public markup.
  3. Forgetting to close a comment tag, which causes the browser to hide the entire rest of your webpage.
Chapter Summary
  • HTML comments use the special opening tag and closing tag formats to write hidden notes.
  • Comments are completely invisible to web visitors but visible to anyone using View Source.
  • Use comments to organize sections, leave TODO notes, and temporarily disable lines of code during debugging.
Browser Support

HTML comments are natively ignored by all browsers and screen readers on every platform.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Block & Inline Next Lesson → HTML Colors

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.