[TOC]
任何網頁的首要組件就是基于標簽的HTML標記語言。超文本標記語言 (HTML) 曾有一段不堪回首的歷史,但最近幾年已經是**皇 上 回 宮**了。經過對它基于XML的XHTML變種的漫長試驗之后,整個行業終于接受了HTML代表web的未來這一事實。
標記定義了文檔的結構和綱要,并提供結構化的內容。除了最基本的概念(例如標題、段落和列表)之外,標記并不是用來定義頁面上內容的外觀和體驗的。HTML的表現屬性都已經被廢棄了,有關樣式的定義應該被包含在?[樣式表](http://coderlmn.github.io/code-standards/#css)?中。
## HTML5
[HTML5](http://www.ibm.com/developerworks/library/wa-webstandards/index.html)?是HTML 和 XHTML 的新版本。 在?[HTML5 草案](http://www.w3.org/TR/html5/)?的規范中定義了可以用 HTML 和 XML編寫的單一的語言,意在解決在之前HTML的迭代中發現的一些問題并滿足web應用的需求,這是以前HTML沒有充分覆蓋到的領域([來源](http://html5.org/)?) 。
在合適的時候,我們會使用HTML5 Doctype 和 HTML5 特性。
我們會對照?[W3C 校驗器](http://validator.w3.org/)?測試我們的標記,以確保標記是結構良好的。我們的目標并不是100%的合法代碼,但是校驗肯定對于編寫可維護的站點以及調試代碼都大有幫助。?Isobar公司不保證代碼都是100%合法,而是確信跨瀏覽器體驗會相當一致?。
### 模板
對HTML5文件,我們使用?[H5BP](http://html5boilerplate.com/)?針對我們自己項目需求修改的一個分支。 你也可以[從這里Fork H5BP](https://github.com/isobar-idev/html5-boilerplate)。
## Doctype
標記中必須總是使用合適的Doctype來指示瀏覽器觸發標準模式. 永遠要避免Quirks模式。
HTML5特別好的一個方面就是它簡化了Doctype需要的代碼。無意義的屬性被棄用了,`DOCTYPE`?聲明也被顯著地簡化了。另外,也無需再用?`CDATA`?對內聯JavaScript代碼進行轉義,而這在此之前為了讓XHTML符合XML的嚴密性是必需的。
HTML5 Doctype
~~~
<!DOCTYPE html>
~~~
### 字符編碼
所有標記必須通過UTF-8編碼傳遞,因為這種編碼方式是對國際化最友好的。必須在HTTP的header和HTML文檔的head部分都指定這種編碼。
設定字符編碼是通過 標簽進行。
~~~
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
~~~
如果是HTML5,則只需要寫:
~~~
<meta charset="utf-8">
~~~
## 標記的總體原則
下面是編寫HTML標記的總體原則。提醒大家一點,在創建的HTML文檔里總是要使用能夠代表內容語義的標記。
* 段落分隔符要使用實際對應的`<p>`元素,而不是用多個`<br>`標簽。
* 在合適的條件下,充分利用`<dl>`?(定義列表)和`<blockquote>`?標簽。
* 列表中的條目必須總是放置于`<ul>`、`<ol>`或`<dl>`?中,永遠不要用一組?`<div>`或`<p>`?來表示。
* 給每個表單里的字段加上?`<label>`?標簽,其中的?`for`?屬性必須和對應的輸入字段對應,這樣用戶就可以點擊標簽。同理,給標簽加上?`cursor:pointer;`?樣式也是明智的做法。?[討論 1](http://www.accessifyforum.com/viewtopic.php?t=1926#14178)?[討論 2](http://www.accessifyforum.com/viewtopic.php?t=6738)
* 不用使用輸入字段中的?`size`?屬性。該屬性是和輸入字段里文本的?`font-size`?相關的。應該使用CSS寬度。
* 在某些閉合的?`</div>`?標簽旁邊加上一段html注釋,說明這里閉合的是什么元素。這在有大量嵌套和縮進的情況下會很有用。
* 不要把表格用于頁面布局。
* 在合適的條件下,利用?[microformats](http://en.wikipedia.org/wiki/Microformat)?和/或者 Microdata ,具體說是?`hCard`?和?`adr`。
* 在合適的條件下,利用?`<thead>`、`<tbody>`和`<th>`標簽 (以及`Scope`屬性)。
具備恰當語法結構(THEAD,TBODY,TH [scope])的 Table 標記
~~~
<table summary="This is a chart of year-end returns for 2005.">
<thead>
<tr>
<th scope="col">Table header 1</th>
<th scope="col">Table header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table data 1</td>
<td>Table data 2</td>
</tr>
</tbody>
</table>
~~~
* 對于頁眉和標題,永遠使用首字母大寫格式。不要在標記中使用全部大寫或小寫的標題,而是應用CSS屬性?`text-transform:uppercase/lowercase`?。
### 屬性加引號
在HTML5規范里并沒有嚴格要求屬性值兩邊加引號。但考慮到一些屬性可以接受空白值,為了保持一致性,我們要求所有屬性值必須加上引號。
~~~
<p class="line note" data-attribute="106">This is my paragraph of special text.</p>
~~~