# HTML

## Doctype

Using HTML5, `<!DOCTYPE html>`

Do not close HTML void elements, ex. use `<br>`, not `<br />`. The HTML void elements are:

`area`, `base`, `br`, `col`, `command`, `embed`, `hr`, `img`, `input`, `keygen`, `link`, `meta`, `param`, `source`, `track`and `wbr`

## Semantics

Use HTML elements for what they were created for. For example, use `<p>` for paragraphs, `<a>` for anchors, etc.

## type Attributes

Do not use `type` attributes for style sheets \(unless not using CSS\) and scripts \(unless not using JavaScript\).

```markup
<!-- Do -->
<link rel="stylesheet" href="css/style.css">

<script src="js/jquery.min.js"></script>
```

```markup
<!-- Don't -->
<link rel="stylesheet" href="css/style.css" type="text/css">

<script src="js/jquery.min.js" type="text/javascript"></script>
```

## General Formatting

Use a new line for every block, list, or table element, and indent every such child element.

It is recommended to put a blank line separator between parents and siblings, as well as adjacent siblings, to make the HTML for readable. This is not neccessarily required for list items within lists or table rows within tables.

Example:

```markup
<!-- Recommended -->
<div class="parent">

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

  <div class="child">

    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>

    <ul>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>

  </div><!-- /.child -->

</div><!-- /.parent -->
```

```markup
<!-- Not recommended -->
<div>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <div class="child">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
    <ul>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
    </ul>
  </div>
</div>
```

## HTML Quotation Marks

Use double \(`""`\) rather than single quotation marks \(`''`\) around attribute values.

```markup
<!-- Do -->
<div id="section-contact" class="content-wrap">
  ...
</div><!-- /.content-wrap -->
```

```markup
<!-- Don't -->
<div id='section-contact' class='content-wrap'>
  ...
</div>
```

## HTML Comments

When working with large blocks of HTML, it is encouraged to use HTML comments to help navigate blocks of HTML and help avoid the risk of missing closing tags.

Example:

```markup
<!-- Encouraged -->
<div class="three-men">

  <div class="butcher">
    ...
  </div><!-- /.butcher -->

  <div class="baker">
    ...
  </div><!-- /.baker -->

  <div class="candlestick-maker">
    ...
  </div><!-- /.candlestick-maker -->

</div><!-- /.three-men -->
```

