[TOC]
## 標簽
* 自閉合(self-closing)標簽,無需閉合 ( 例如: imginputbrhr 等 );
* 可選的閉合標簽(closing tag),需閉合 ( 例如:</li> 或 </body> );
* 盡量減少標簽數量;
~~~
<img src="images/google.png" alt="Google">
<input type="text" name="title">
<ul>
<li>Style</li>
<li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
<img src="...">
</span>
<!-- Recommended -->
<img class="avatar" src="...">
~~~
## Class 與 ID
* class 應以功能或內容命名,不以表現形式命名;
* class 與 id 單詞字母小寫,多個單詞組成時,采用中劃線-分隔;
* 使用唯一的 id 作為 Javascript hook, 同時避免創建無樣式信息的 class;
~~~
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
~~~
## 屬性順序
HTML 屬性應該按照特定的順序出現以保證易讀性。
* id
* class
* name
* data-xxx
* src, for, type, href
* title, alt
* aria-xxx, role
~~~
<a id="..." class="..." data-modal="toggle" href="###"></a>
<input class="form-control" type="text">
<img src="..." alt="...">
~~~
## 引號
屬性的定義,統一使用雙引號。
~~~
<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
~~~
## 嵌套
a 不允許嵌套 div這種約束屬于語義嵌套約束,與之區別的約束還有嚴格嵌套約束,比如不允許嵌套。
嚴格嵌套約束在所有的瀏覽器下都不被允許;而語義嵌套約束,瀏覽器大多會容錯處理,生成的文檔樹可能相互不太一樣。
#### 語義嵌套約束
* `<li> 用于 <ul> 或 <ol> 下;`
* `<dd>, <dt> 用于 <dl> 下;`
* `<thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下;`
#### 嚴格嵌套約束
* inline-Level 元素,僅可以包含文本或其它 inline-Level 元素;
* `<a>里不可以嵌套交互式元素<a>、<button>、<select>等;`
* `<p>里不可以嵌套塊級元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。`
更多詳情,參考[WEB標準系列-HTML元素嵌套](http://www.smallni.com/element-nesting/)
## 布爾值屬性
HTML5 規范中 disabled、checked、selected 等屬性不用設置值。
~~~
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
~~~
## 格式化規則
在每一個塊狀元素,列表元素和表格元素后,加上一新空白行,并對其子孫元素進行縮進。內聯元素寫在一行內,塊狀元素還有列表和表格要另起一行。
~~~
<!-- Recommended -->
<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe</li>
<li>Larry</li>
<li>Curly</li>
</ul>
<table>
<thead>
<tr>
<th scope="col">Income</th>
<th scope="col">Taxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>$ 5.00</td>
<td>$ 4.50</td>
</tr>
</tbody>
</table>
~~~