FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Basics

Intermediate

HTML Comments

Learn HTML Comments as a practical HTML text lesson with syntax, examples, common mistakes, accessibility notes and a live code lab.

HTML text basics

HTML comments leave notes in the source without rendering visible content.

An HTML comment starts with <!-- and ends with -->. The browser reads it as a comment node, but it does not display it as visible page content.

Comments are useful for short developer notes, template boundaries and temporary explanations during development. They are not private.

Anything inside an HTML comment can still be visible in view source, browser DevTools, caches or deployed files. Never put passwords, tokens or secrets in comments.

Comment syntax

Starts with <!-- and ends with -->. Everything between them is treated as comment text.

Invisible to users

The comment is not rendered as visible content in the page.

Visible in source

Anyone can inspect frontend source code. Comments are not security.

Useful boundaries

Short section markers can help large templates stay readable.

Syntax and meaning

Comments are for maintainers, not for hidden secrets.

Use comments when they explain why something exists. Avoid comments that merely repeat obvious markup.

Useful comments

<!-- Pricing cards are generated from CMS data. Keep card order stable for tracking. -->
<section class="pricing-grid">
  <article>
    <h2>Starter</h2>
    <p>For small projects.</p>
  </article>
</section>

Dangerous or noisy comments

<!-- password: admin123 -->
<!-- This is a heading -->
<h1>HTML Comments</h1>
<!-- This is a paragraph -->
<p>Comments should add useful context.</p>

Practical rules

Use the element for meaning first, then polish it with CSS.

These rules are the part that saves time in real projects. If the HTML meaning is clean, CSS, JavaScript, accessibility checks and search optimization become easier to reason about.

Never store secrets

Frontend comments are visible to anyone who inspects the page source.

Explain why

Good comments explain intent, constraints or template behavior.

Remove dead code

Do not leave large commented-out blocks in production templates.

Keep comments short

Long explanations belong in documentation unless they must live next to the markup.

Do not break syntax

Avoid putting -- inside comments because it can create invalid or confusing markup.

Use build comments carefully

Some build tools preserve comments and some strip them. Know your pipeline.

Production thinking

Small text decisions affect accessibility, SEO and maintainability.

Why does this matter?

Text markup matters because browsers and assistive technology do not only see letters. They also read structure, emphasis, quotes, code and relationships between pieces of text.

Accessibility

Comments are not announced as content, so they cannot replace visible instructions, labels or help text.

Production note

Before deployment, scan comments for TODOs, internal URLs, test credentials and old debugging notes.

SEO note

Search engines generally do not treat comments as visible content. Do not hide keywords in comments.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Change one tag, attribute or text value in the example.
  • Run the preview and describe exactly what changed.
  • Reset the lab and repeat the same change without looking at the original.

Practice assignment

Do this before moving to the next lesson.

  1. Change one meaningful part of the HTML, not only the visible text.
  2. Run the preview and check whether the result still makes semantic sense.
  3. Explain why the element or attribute you changed belongs in this exact place.

Try it yourself

Use comments safely

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?