Code Style & Conventions

HTML is forgiving about formatting, which means style consistency is entirely up to you and your team. A consistent style makes diffs smaller, code reviews faster, and onboarding new teammates easier. This page collects the conventions most style guides (and this site) follow.

Lowercase Tags and Attributes

HTML tag and attribute names are case-insensitive, but the near- universal convention is lowercase. It's more readable, matches XHTML's stricter requirements, and is what every major style guide recommends.

lowercase.html

HTML

<!-- Avoid -->
<DIV CLASS="Card">
  <P>Some text</P>
</DIV>

<!-- Prefer -->
<div class="card">
  <p>Some text</p>
</div>

Consistent Indentation

Pick one indentation style—2 spaces is the most common in web projects—and apply it uniformly. Nested elements indent one level further than their parent.

indentation.html

HTML

<ul class="menu">
  <li><a href="/">Home</a></li>
  <li>
    <a href="/products">Products</a>
    <ul class="submenu">
      <li><a href="/products/new">New</a></li>
      <li><a href="/products/sale">Sale</a></li>
    </ul>
  </li>
</ul>

Always Quote Attribute Values

HTML technically allows unquoted attribute values in simple cases, but always quoting them avoids ambiguity (especially with values containing spaces) and keeps every attribute visually consistent. Prefer double quotes, matching JSON and most CSS/JS conventions.

quoting.html

HTML

<!-- Avoid: unquoted, and inconsistent quote styles -->
<input type=text class='search-input' placeholder=Search...>

<!-- Prefer: always quoted, double quotes throughout -->
<input type="text" class="search-input" placeholder="Search..." />

One Attribute Per Line for Long Tags

A tag with many attributes becomes hard to scan on one line. Once a tag exceeds roughly 80–100 characters or has more than three or four attributes, break it onto multiple lines, one attribute each.

one-attribute-per-line.html

HTML

<!-- Hard to scan -->
<input type="email" id="signup-email" name="email" required aria-describedby="email-hint" autocomplete="email" />

<!-- Easier to review and diff -->
<input
  type="email"
  id="signup-email"
  name="email"
  required
  aria-describedby="email-hint"
  autocomplete="email"
/>

Attribute order convention

A common ordering: id, class, name/type, other attributes alphabetically, then event handlers or data attributes last. Consistency across a codebase matters more than the exact order chosen.

Self-Documenting Class Names

Name classes after what an element is or does, not what it looks like. .card, .nav-item, and .error-message stay accurate even if the visual design changes; .red-box or .big-text become misleading the moment the design changes color or size.

class-naming.html

HTML

<!-- Avoid: describes appearance, breaks when design changes -->
<div class="red-box bold-text">Item out of stock</div>

<!-- Prefer: describes purpose, survives redesigns -->
<div class="alert alert-warning">Item out of stock</div>

File Organization

Keep one <!DOCTYPE html> declaration and a single <html> root per document.
Group related pages into folders (e.g. /products, /account) rather than flat naming (product-list.html, product-detail.html).
Use lowercase, hyphen-separated file names (about-us.html, not AboutUs.html) for cross-platform consistency.
Keep external stylesheets and scripts in dedicated /css and /js directories rather than scattered alongside markup.
Favor a small number of shared partials/includes over duplicating the same header/footer markup on every page.

A Fully Styled Example

styled-example.html

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Product Catalog</title>
    <link rel="stylesheet" href="/css/main.css" />
  </head>
  <body>
    <header class="site-header">
      <nav class="primary-nav" aria-label="Primary">
        <a href="/" class="logo">Storefront</a>
      </nav>
    </header>

    <main class="catalog">
      <h1>Our Products</h1>
      <ul class="product-list">
        <li class="product-card">
          <img
            src="/images/lamp.jpg"
            alt="Ceramic table lamp"
            width="300"
            height="300"
          />
          <p class="product-name">Ceramic Table Lamp</p>
        </li>
      </ul>
    </main>

    <script src="/js/app.js" defer></script>
  </body>
</html>

Quick Reference

Convention	Example
Lowercase tags/attributes	<div class="card">, not <DIV CLASS="card">
2-space indentation	Each nested level indents two spaces
Always-quoted attributes	class="card", not class=card
One attribute per line (long tags)	Tags with 4+ attributes split across lines
Purpose-based class names	.alert-warning, not .red-box
Hyphenated, lowercase file names	about-us.html, not AboutUs.html

Automate it with a formatter

Tools like Prettier can enforce most of these conventions automatically on save, so the team never has to argue about indentation or quote style in code review.