Comments and Style

Comments

Comments are notes for people reading the source. Browsers don't display them:

<!-- Main navigation: keep in sync with the footer menu -->
<nav aria-label="Main">
  <a href="/">Home</a>
  <!-- <a href="/shop">Shop</a>  hidden until the shop launches -->
</nav>

• A comment starts with <!-- and ends with -->. It can span many lines.
• Comments can't be nested, and shouldn't contain --.
• Comments are public — anyone can read them with View Source. Never put passwords, internal notes, or personal data in them.
• "Commenting out" markup is fine while experimenting; delete it before publishing.

A consistent style

Browsers accept many styles, so teams agree on one. Common conventions, all used in this course:

• Lowercase element and attribute names.
• Double quotes around every attribute value.
• Two-space indentation for nested elements; don't indent the contents of html or body more than you need.
• One element per line for blocks; inline elements stay inside their text.
• Write optional end tags like </p> and </li>.
• Void elements without a trailing slash: <br>, <img ...> (or always with one — just be consistent).
• Lowercase, hyphenated file names and id/class values: opening-hours, main-nav.
• Order attributes predictably, for example: id, class, name, type, src/href, alt, then the rest.

A formatter such as Prettier applies a style automatically; the validator catches real errors. Use both.

Putting it together

Before calling a page finished, check:

• [ ] It validates with no errors.
• [ ] lang, charset, viewport, and a specific title are set.
• [ ] One h1, and headings in order.
• [ ] Landmarks: header, nav, main, footer.
• [ ] Every image has suitable alt text and width/height.
• [ ] Every form control has a label.
• [ ] It works with the keyboard alone.
• [ ] Links have meaningful text.

What's next

You now know the core of HTML. Try the Beginner Projects, then continue to Level 2 — Intermediate, which starts with form validation.