HTML Style

Standards for consistent HTML style.

Follow Code Style Rules

All HTML must follow language-agnostic standards: 2-space indentation, 80-character line limit.

Boolean Attributes

Presence-based (just the name)

<input type="checkbox" checked disabled />
<video autoplay controls muted></video>
<form novalidate>
  <input required readonly autofocus />
</form>

ARIA (explicit values required)

<button
  aria-pressed="false"
  aria-expanded="true"
>
  Toggle
</button>
<div aria-hidden="true"></div>

Check for boolean attributes with unnecessary values:

node checks/boolean-attrs.js file.html

Wrap Lines at 80 Characters

❌ DON'T

<img src="very-long-image-filename-that-exceeds-the-line-limit.jpg" alt="Description" class="responsive-image" loading="lazy">

✅ DO

<img
  src="very-long-image-filename-that-exceeds-the-line-limit.jpg"
  alt="Description"
  class="responsive-image"
  loading="lazy"
/>

Self-Close Void Elements

<br />
<hr />
<img src="photo.jpg" alt="Photo" />
<input type="text" />
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />

Check for non-self-closing void elements:

node checks/void-elements.js file.html

Attribute Order (recommended)

1. id
2. class
3. data-*
4. aria-*
5. Other attributes
6. src, href
7. Boolean attributes last