## 語法
* 縮進使用soft tab（4個空格）；
* 嵌套的節點應該縮進；
* 在屬性上，使用雙引號，不要使用單引號；
* 屬性名全小寫，用中劃線做分隔符；
* 不要在自動閉合標簽結尾處使用斜線（[HTML5 規范](http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag)?指出他們是可選的）；
* 不要忽略可選的關閉標簽，例：``?和?``。
~~~
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
~~~
## HTML5 doctype
在頁面開頭使用這個簡單地doctype來啟用標準模式，使其在每個瀏覽器中盡可能一致的展現；
雖然doctype不區分大小寫，但是按照慣例，doctype大寫 （[關于html屬性，大寫還是小寫](http://stackoverflow.com/questions/15594877/is-there-any-benefits-to-use-uppercase-or-lowercase-letters-with-html5-tagname)）。
~~~
<!DOCTYPE html>
<html>
...
</html>
~~~
## lang屬性
根據HTML5規范：
> 應在html標簽上加上lang屬性。這會給語音工具和翻譯工具幫助，告訴它們應當怎么去發音和翻譯。
更多關于?`lang`?屬性的說明[在這里](http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element)；
在sitepoint上可以查到[語言列表](http://reference.sitepoint.com/html/lang-codes)；
但sitepoint只是給出了語言的大類，例如中文只給出了zh，但是沒有區分香港，臺灣，大陸。而微軟給出了一份更加[詳細的語言列表](http://msdn.microsoft.com/en-us/library/ms533052(v=vs.85).aspx)，其中細分了zh-cn, zh-hk, zh-tw。
~~~
<!DOCTYPE html>
<html lang="en-us">
...
</html>
~~~
## 字符編碼
通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網頁內容的渲染方式，通常指定為'UTF-8'。
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
...
</html>
~~~
## IE兼容模式
用?``?標簽可以指定頁面應該用什么版本的IE來渲染；
如果你想要了解更多，請點擊[這里](http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e)；
不同doctype在不同瀏覽器下會觸發不同的渲染模式（[這篇文章](https://hsivonen.fi/doctype/)總結的很到位）。
~~~
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>
~~~
## 引入CSS, JS
根據HTML5規范, 通常在引入CSS和JS時不需要指明?`type`，因為?`text/css`和?`text/javascript`?分別是他們的默認值。
### HTML5 規范鏈接
* [使用link](http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element)
* [使用style](http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element)
* [使用script](http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element)
~~~
<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">
<!-- In-document CSS -->
<style>
...
</style>
<!-- External JS -->
<script src="code_guide.js"></script>
<!-- In-document JS -->
<script>
...
</script>
~~~
## 屬性順序
屬性應該按照特定的順序出現以保證易讀性；
* `class`
* `id`
* `name`
* `data-*`
* `src`,?`for`,?`type`,?`href`,?`value`?,?`max-length`,?`max`,?`min`,?`pattern`
* `placeholder`,?`title`,?`alt`
* `aria-*`,?`role`
* `required`,?`readonly`,?`disabled`
class是為高可復用組件設計的，所以應處在第一位；
id更加具體且應該盡量少使用，所以將它放在第二位。
~~~
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
~~~
## boolean屬性
boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5并不需要；
更多內容可以參考?[WhatWG section on boolean attributes](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes)：
> boolean屬性的存在表示取值為true，不存在則表示取值為false。
~~~
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
~~~
## JS生成標簽
在JS文件中生成標簽讓內容變得更難查找，更難編輯，性能更差。應該盡量避免這種情況的出現。
## 減少標簽數量
在編寫HTML代碼時，需要盡量避免多余的父節點；
很多時候，需要通過迭代和重構來使HTML變得更少。
~~~
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
~~~
## 實用高于完美
盡量遵循HTML標準和語義，但是不應該以浪費實用性作為代價；
任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題。
