HTML Tutorial
HTML Comments
Comments stay in the source and never show on the page. Use them to leave notes for yourself.
What an HTML comment is
A comment is text you leave in the HTML file for humans. The browser still downloads it, but it does not paint it on the page. Use comments to explain a block, mark a temporary change, or remind a teammate why a tag is there.
Comments start with <!-- and end with -->. Everything between those marks is ignored by the renderer.
Example
<!-- This note is only in the source. -->
<h1>StudyGrid notes</h1>
<p>You see the heading and the paragraph. You do not see the comment.</p>The comment syntax
Put a space after <!-- and before --> so the marks stay easy to spot. A comment can sit on one line or wrap several lines.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Comments</title>
<!-- Page title is short on purpose. -->
</head>
<body>
<!-- Main article starts here. -->
<h1>Lab report</h1>
<p>Results for week 3.</p>
<!--
Draft: add a table of scores
after the lab confirms the numbers.
-->
</body>
</html>Click Try it in HTML under an example. The live preview at /html/try shows the page, not the comments. View the source in the editor to see the notes.
Comments cannot nest
HTML has no nested comments. The first --> ends the comment. Anything after that is treated as real markup again. If you wrap a block that already contains a comment, the inner closer cuts the outer comment short and leftover tags leak onto the page.
Example
<!-- Outer start
<p>Hidden?</p>
<!-- Inner comment -->
<p>This paragraph is live. The inner closer ended the comment too early.</p>
-->To hide a region that already has comments, delete or rewrite the inner comments first, or comment one section at a time.
Hide a block while you test
Wrapping markup in a comment is a quick way to try a layout without deleting work. The hidden block stays in the file until you unwrap it.
Example
<h1>Home</h1>
<p>Welcome back.</p>
<!-- Testing without the promo banner
<aside>
<h2>Summer sale</h2>
<p>20 percent off until Friday.</p>
</aside>
-->
<p>The banner is commented out, so only the heading and these two paragraphs show.</p>Commenting out is for local experiments. Do not ship long stretches of dead markup. Remove what you no longer need so the file stays easy to read.
Do not put secrets in comments
Comments are part of the file that the browser downloads. Anyone can open View Source or the Network tab and read them. API keys, passwords, private URLs, and internal notes about unpublished products do not belong there.
| Safe in a comment | Never in a comment |
|---|---|
| Why a heading uses a certain id | Passwords and API tokens |
| A reminder to add a caption | Private email addresses |
| A date you last checked a table | Staging URLs with secrets in the query |
If it must stay private, keep it on the server or in environment variables. HTML comments ship with the page.
Where comments help
- Label the start of a long section so you can find it later.
- Note a constraint: “Keep this list to three items for the print layout.”
- Mark a temporary workaround you intend to replace.
Short comments beat essays. If you need a full explanation, put it in your project notes, not in every page.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Physics
A note the browser will not show
Comments stay in the source. Visitors do not see them. Use them for units, assumptions, and “do not delete this region.”
They are not a security wall. Anyone can View Source. Never put passwords in comments.
F = m a
Example
<!-- F = m a. Mass in kg, acceleration in m/s^2. -->
<p>F = 7 N for 2 kg at 3.5 m/s²</p>
<!-- TODO: add air-resistance caveat before publishing -->Chemistry
Why 18 g/mol is in the file
Six months later, 18.0 is a mystery. A comment that says “approximate molar mass of water used in school labs” is the same habit as labelling a bottle.
Example
<!-- H2O. Approximate Mr used in school labs, not 18.02. -->
<p>Molar mass ≈ 18.0 g/mol</p>