[TOC=2,3]
## 標簽
* 自閉合（self-closing）標簽，無需閉合 ( 例如： `img` `input` `brhr` 等 );
* 可選的閉合標簽（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元素嵌套](https://blog.csdn.net/lzm18064126848/article/details/53334627)
