Skip to main content
Avora Learn

Visual guide · Knowledge graph

HTML Comments

HTML comments are notes in your source code wrapped in <!-- -->. Browsers ignore them in the rendered page, so you can leave reminders for yourself or teammates.

Reading ·
12 min
Practice ·
10 min
Level ·
Beginner

Completion goal: Write valid <!-- --> comments and know they are visible in source.

  • comments
  • source notes
  • debugging
  • teamwork

Learning path

HTML Beginner Path

  1. HTML
  2. Editor setup
  3. First page
  4. Document structure
  5. Headings
  6. Paragraphs
  7. Comments

Skills you'll learn

  • Source Notes
  • Team Collaboration
  • Debugging Habits

Quick answers

What is this?

HTML comments are notes in your source code wrapped in <!-- -->. Browsers ignore them in the rendered page, so you can leave reminders for yourself or teammates.

Why use it?

Comments leave notes for future you and teammates without changing the rendered page.

When should you use it?

Label sections while learning, or temporarily disable markup while testing.

Advantages

  • Non-visible in normal view
  • Helpful for learning

Watch-outs

  • Public in View Source — never store secrets
  • Huge comment blocks add download weight

Learning objectives

  • Write a valid HTML comment
  • Use comments to label sections while learning
  • Know that comments are not a security feature
  • Avoid leaving sensitive data in comments

Visual diagram

<!-- opens a comment; --> closes it. Everything between is hidden from the page view.

Visual memory trick

Users see the wall (page). Builders see sticky notes (comments) on the plans.

Animation preview

Visual concept: comments live in the source, not in the painted page.

Interactive animation lives in the classroom — Start Interactive Lesson.

Where you'll use this

  • Admin panels

    Internal tools still need document structure and comments for teams.

  • Dashboards

    Admin views still start as HTML landmarks before charts load.

  • Portfolio

    Personal sites showcase sections with headings and short paragraphs.

Real-world use cases

  • Labeling practice sections

    Beginners mark <!-- navigation --> or <!-- hero --> while learning layout.

  • Temporarily disabling markup

    Comment out a block to test without deleting code you might need again.

  • Team handoffs

    Short notes explain why a workaround exists — useful in group student projects.

Code example & output

comments.html
<!-- Page intro for learners -->
<h1>HTML Comments</h1>
<p>You see this text in the browser.</p>
<!-- TODO: add a second paragraph tomorrow -->

Output preview

Only the heading and paragraph appear. Comment lines are invisible on the page.

View Page Source (or your editor) to see comments. Users looking at the normal page do not see them — but anyone can open source, so never put secrets in comments.

Try it in the interactive lesson →

Common mistakes

  • Unclosed comments

    Avoid: <!-- forgot the end

    Do: Always close with --> or the rest of the page may disappear from rendering.

  • Nested comments

    Avoid: <!-- outer <!-- inner --> still open

    Do: HTML comments do not nest cleanly. Use one comment block at a time.

  • Secrets in comments

    Avoid: <!-- password admin123 -->

    Do: Comments are public in source. Never store credentials or private keys there.

Common interview questions

Can users see HTML comments?

Not in the normal page view, but yes via View Source or DevTools.

Are HTML comments the same as JavaScript comments?

No. HTML uses <!-- -->. JavaScript uses // and /* */.

Mini quiz

Check your understanding — no account needed.

  • 1. HTML comments start with…

FAQ

Do comments slow down my page?

A few learning comments are fine. Huge commented blocks in production add download weight — clean them up when shipping.

Can users see my comments?

Not in the normal view, but yes via View Source or DevTools. Treat comments as public.

Are HTML comments the same as JavaScript comments?

No. JavaScript uses // and /* */. In an HTML file, use <!-- --> for markup notes.

Where this skill is used

  • Frontend Developer

    Temporary comments help during refactors — clean before ship.

  • Full Stack Developer

    Cross-stack teams leave markup notes carefully.

Projects using this concept

  • Commented layout map

    Mark <!-- header -->, <!-- main -->, <!-- footer --> while learning.

    beginner · HTML

Related content

← HTML Paragraphs

Parent: HTML Document Structure

Related guides

Glossary

Course: HTML Fundamentals · Full glossary · Career path

Start Interactive Lesson

Continue in Avora's visual classroom with synced narration, checks, and playgrounds. Module 1 is free.

Start Interactive LessonView course