1. Always use double quote for html attributes

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

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

2. Kebab case format for values in attributes

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

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

3. Elements with more than 2 attributes should span multiple lines.

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

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

4. The img tag always must include the alt attribute

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

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

5. The a tag with target="_blank" always must include the rel="noopener" attribute.

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

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

6. The input tag always must be used together a label tag or the aria-label attribute for ocassions where the designer hate accessibility

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

<!-- STILL BAD -->
<label>I am a bad label</label>
<input type="text" placeholder="I am the placeholder with a bad label"/>

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

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