Code Guide by @solislab

Syntax

Tab Indent

Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.
Nested elements should be indented once (two spaces).

Markup

Always use double quotes, never single quotes, on attributes.
Don't include a trailing slash (/) in self-closing elements like input, img because it's optional.

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <!--<img> don't need to close with `/`-->
    <img src="images/company-logo.png" alt="Company">
    <!--Good: use two double quotes-->
    <h1 class="hello-world">Hello, world!</h1>
    <!-- Use two spaces for each level -->
    <ul class="list">
      <!--Remember to use `</li>` to close this element-->
      <li class="item">This is an item in list</li>
    </ul>
  </body>
</html>

Attribute order

HTML attributes should come in this particular order for easier reading of code.

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*

Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.

<a class="..." id="..." data-toggle="modal" href="#">
  Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

Boolean attributes

A boolean attribute is one that needs no declared value. XHTML required you to declare a value, but HTML5 has no such requirement.

For further reading, consult the WhatWG section on boolean attributes:

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If you must include the attribute's value, and you don't need to, follow this WhatWG guideline:

If the attribute is present, its value must either be the empty string or [...] the attribute's canonical name, with no leading or trailing whitespace.

In short, don't add a value.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

BEM markup

To avoid nesting classes, the mixin between global class and BEM (Block Element Modifier) is highly recommend.

<section class="hero">
  <!--It lets us know we have a global .container class-->
  <div class="container hero__container">
    <h2 class="hero__headline">This is a Headline</h2>
    <ul class="hero__list">
      <!--DO NOT create .hero__list-item-->
      <li class="hero__item">This is a single item</li>
    </ul>
    <div class="hero__block">
      <!--DO NOT create .hero__block-button-->
      <!--It defines a first button via class .hero__button first, extend color, background or something from .hero__button-->
      <a href="#" class="button hero__button hero__button--first">Learn More</a>
      <!--It has a global button style using  .button, but also extend fom .hero__button-->
      <a href="#" class="button hero__button hero__button--second">View order</a>
    </div>
  </div>
</section>

Using button in form

Avoid using input type="submit" and replace it with button tag inside form.

<form class="form">
    <input type="text" placeholder="Enter your name">
    <!-- Avoid using `input type="submit"` -->
    <button class="button form__button">Enter Now</button>
</form>