HTML Formatting Standards · HTML-01

Independent of the styling of an element (as CSS allows elements to assume a different role per display property), put every block, list, or table element on a new line.

Also, indent them if they are child elements of a block, list, or table element.

(If you run into issues around whitespace between list items it’s acceptable to put all li elements in one line. A linter is encouraged to throw a warning instead of an error.)

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

<ul>
  <li>Moe</li>
  <li>Larry</li>
  <li>Curly</li>
</ul>

<table>
  <thead>
    <tr>
      <th scope="col">Income</th>
      <th scope="col">Taxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$ 5.00</td>
      <td>$ 4.50</td>
    </tr>
  </tbody>
</table>

While there is no column limit recommendation for HTML, you may consider wrapping long lines if it significantly improves readability.

When line-wrapping, each continuation line should be indented at least 4 additional spaces from the original line to distinguish wrapped attributes from child elements.

<button mat-icon-button color="primary" class="menu-button" (click)="openMenu()">
  <mat-icon>menu</mat-icon>
</button>

<button mat-icon-button color="primary" class="menu-button" (click)="openMenu()">
  <mat-icon>menu</mat-icon>
</button>

<button mat-icon-button color="primary" class="menu-button" (click)="openMenu()">
  <mat-icon>menu</mat-icon>
</button>

Use double ("") rather than single quotation marks (”) around attribute values.

<!-- Not recommended -->
<a class="maia-button maia-button-secondary">Sign in</a>

<!-- Recommended -->
<a class="maia-button maia-button-secondary">Sign in</a>

Make sure your editor uses UTF-8 as character encoding, without a byte order mark.

Specify the encoding in HTML templates and documents via . Do not specify the encoding of style sheets as these assume UTF-8.

(More on encodings and when and how to specify them can be found in Handling character encodings in HTML and CSS.)

Use comments to explain code: What does it cover, what purpose does it serve, why is respective solution used or preferred?

(This item is optional as it is not deemed a realistic expectation to always demand fully documented code. Mileage may vary heavily for HTML and CSS code and depends on the project’s complexity.)