General

Validity

All HTML should be using the Markup Validation Service before creating a pull request or pushing to production. This will help avoid common mistakes such as closing tags, wrong attributes and many more.

By validating HTML it ensures that web pages are consistent across multiple devices and platforms and increases the chance of search engines to properly pass markup.

Indentation

Use tabs instead of spaces for markup. Do not mix tabs with spaces, ensure it is probably formatted.

Avoid

1<ul>
2	<li>List Item</li>
3</ul>

Prefer

1<ul>
2	<li>List Item</li>
3</ul>

Quotes

Always use double quotes around attribute values. Emitting quotes can avoid to bad readability, despite HTML allowing for attributes without quotes.

Avoid

1<button class="button button-grey">My Button</button>

Prefer

1<button class=button disabled>My Button</button>

Line breaking

Break long lines when it exceeds the amount of characters within the editor.

It is also recommended to ensure that the closing tag is one a new line. This helps to locate the closing tag and improves readability.

Avoid

1<p>I'm baby blue bottle tilde godard, blog ennui pour-over craft beer. Pabst chartreuse iceland, bespoke next level
2	migas hoodie lyft flannel. Kale chips literally chillwave, cred occupy tofu photo booth kitsch marxism before they
3	sold out unicorn bicycle rights roof party. </p>

Prefer

1<p>
2	I'm baby blue bottle tilde godard, blog ennui pour-over craft beer. Pabst chartreuse iceland, bespoke next level
3	migas hoodie lyft flannel. Kale chips literally chillwave, cred occupy tofu photo booth kitsch marxism before they
4	sold out unicorn bicycle rights roof party.
5</p>

Letter-casing

All attribute names, classes, IDs should be lower case and with a hyphen between two words (kebab case).

Avoid

1<h1 class="heading_Test"></h1>
2<P Class="LEAD"></P>

Prefer

1<h1 class="hero-heading"></h1>
2<p class="lead"></P>

Self closing

All self closing elements should contain / at the end of the tag. Please see this article for a definition of all HTML elements with self closing elements.

Avoid

1<img src="my-image.jpg">

Prefer

1<img src="my-image.jpg"/>