HTML Style Guide

Write consistent, maintainable markup.

A style guide makes markup easier to review, search, change, and debug. Consistency does not affect HTML validity by itself, but it reduces cognitive load and exposes structural problems earlier. The best conventions are simple enough that the whole team can follow them.

Use a small set of source conventions

Write lowercase element and attribute names, quote attribute values, indent children consistently, and put one major structural element per line. Keep attributes readable and order them consistently—identity and class first, then element-specific data, then accessibility and behavior.

<article class="course-card" data-level="beginner">
  <header>
    <p class="eyebrow">Free course</p>
    <h2>HTML foundations</h2>
  </header>
  <p>Build meaningful, accessible documents.</p>
  <a href="/courses/html">Start the course</a>
</article>

• Use lowercase names.
• Quote attribute values.
• Indent nested content with one agreed width.
• Use blank lines to separate major regions, not every element.
• Prefer comments that explain decisions rather than restating tags.

Name classes and IDs by purpose

A durable name describes the component or role, not a temporary color or position. Avoid presentation names such as red-text or left-column. Keep IDs stable when links, labels, tests, or scripts depend on them.