1. Siempre usar comillas dobles para atributos

<!-- MAL -->
<img src='http://url.com'/>

<!-- BIEN -->
<img src="http://url.com"/>

2. Usar Kebab case para los valores de los atributos

<!-- MAL -->
<input id='myAwesomeId' name="myAwesomeName"/>

<!-- BIEN -->
<input id='my-awesome-id' name="my-awesome-name"/>

3. Elementos con más de dos atributos deben ocupar una sola línea

<!-- MAL -->
<input id='myAwesomeId' name="myAwesomeName" type="text" placeholder="An useless placeholder"/>

<!-- BIEN -->
<input
  id="my-awesome-id"
  name="my-awesome-name"
  type="text"
  placeholder="An useless placeholder but in one line"
/>

4. La etiqueta img siempre debe incluir un atributo alt

<!-- MAL -->
<img src="http://url.com"/>

<!-- BIEN -->
<img
	src="http://apprunn.io/pedrito.png"
	alt="The human debugger"
/>

5. La etiqueta a si es usada con target="_blank" siempre debe incluir el atributo rel="noopener".

<!-- MAL -->
<a href="http://url.com" target="_blank"/>

<!-- BIEN -->
<a
  href="http://url.com"
  target="_blank"
  rel="noopener"
/>

6. La etiqueta input siempre debe ser usada junto a una etiqueta label. Usar el atributo aria-label en caso no exista una etiqueta label.

<!-- MAL -->
<input type="text" placeholder="I am the label because designer hate people"/>

<!-- AUN MAL -->
<label>I am a MAL label</label>
<input type="text" placeholder="I am the placeholder with a MAL label"/>

<!-- BIEN -->
<label for="kind-input">The real label</label>
<input
  id="kind-input"
  type="text"
  placeholder="I am just a kind placeholder"
/>

<!-- BIEN -->
<input
  id="kind-input"
  type="text"
  placeholder="I am - still - just a kind placeholder"
  aria-label="The real label"
/>