HTML重構：戰術篇
[2] 正確還不夠：關注你的內容
上文書我們說到《HTML重構：戰略篇》，書接前言下面是戰術篇，我們通過路線圖來先有一個大體印象：
1、HTML規范化(Well-Formedness)：語法正確
2、HTML Validity ：語義正確
3、不僅僅是語義正確：HTML元素的用法回歸正途
4、正確還不夠：關注你的內容
5、哪有個完啊：關注網站可用性(Accessibility)
HTML規范化(Well-Formedness)：語法正確
規范化(Well-Formedness)是XML中的概念，它指文檔嚴格遵守約束。規范化的HTML文檔結構是一個獨一無二的樹。HTML規范化是發揮XML工具強大功能的先決條件，可靠地DOM操作也為跨瀏覽器腳本的提供了一個很好的基礎。不規范的頁面在瀏覽器中可能表現千差萬別，因為瀏覽器對錯誤的理解和處理是不一樣的，而規范化的HTML讓瀏覽器行為可預測。好處當然還有很多，比如SEO，快速加載… ...
下面會有一些規范化的實踐指南，作者給出了做這些重構的動機和利弊，大家可以根據自己的情況來選擇。下面簡單列一下：
文檔轉為小寫Change Name to Lowercase
屬性賦值添加引號Quote Attribute Value
省略值不全Fill In Omitted Attribute Value
例如：<input type="radio" value="debit" checked></input>
空標簽添加空屬性Replace Empty Tag with Empty-Element Tag
例如：<hr>變成<hr class='empty' />
添加結束標簽Add End-tag
刪除重疊Remove Overlap
例如：<strong><em>very important</strong></em>!
文檔編碼轉成UTF-8Convert Text to UTF-8<轉義為 < ;Escape Less-Than Sign& to &Escape AmpersandEscape Quotation Marks in Attribute Values
屬性值內字符轉義：" to " ' to '
添加DOCTYPE聲明Introduce an XHTML DOCTYPE Declaration
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
實體添加結束符Terminate Each Entity Reference&之類的實體要不全; 即：&
使用標準實體名Replace Imaginary Entity References添加根元素Introduce a Root Element添加XHTML的名稱空間Introduce the XHTML Namespace
HTML Validity ：語義正確
背景介紹：HTML驗證是通過與標準HTML規則進行比較的方式，分析HTML文檔、標記出錯誤和非標準代碼的處理過程。Web頁面使用HTML進行渲染，而HTML本身采用了HTML規范作為其規則和標準。通過驗證HTML代碼穿越多重瀏覽器標準！
通過驗證的文檔，能夠幫助瀏覽器反映創作者的意圖。通過驗證的站點會獲得下列優勢：頁面行為可預測，瀏覽器兼容問題，未來的瀏覽器上也可以運行，更容易維護，等等…
W3C在線驗證地址：http://jigsaw.w3.org/css-validator/
通過驗證并不是強制要求的，一個規范化但是沒有通過驗證的文檔照樣可以使用XML工具。如果你有特殊的應用比如MathXML，也可以忽略掉通過HTML驗證。下面簡單列出一些要通過驗證要做的工作：
清除非法標簽Remove All Nonexistent Tags
添加圖像說明Add an alt Attribute
嵌入標簽換成對象標簽Replace embed with object
添加嚴格的文檔類型聲明Introduce a Strict DOCTYPE Declaration
Replace center with CSS
Replace font with CSS
Replace i with em or CSS
Replace b with strong or CSS
Replace the color Attribute with CSS
Convert img Attributes to CSS
Replace applet with object
Replace Presentational Elements with CSS
Nest Inline Elements inside Block Elements
不僅僅是語義正確：HTML元素的用法回歸正途
一個Web開發者可能會有這樣的懺悔：我錯了，我一直都在用表格做布局，我的頁面和樣式雜糅在一起… …我們可能把原因歸結為歷史，以前的開發就沒有這種理念，歷史是這樣的么？傳統的HTML是基于SGML標準，這個標準誕生于Web之前，我們回顧一下：
SGML是1986年出版發布的一個信息管理方面的國際標準(ISO 8879)。該標準定義獨立于平臺和應用的文本文檔的格式、索引和鏈接信息，為用戶提供一種類似于語法的機制，用來定義文檔的結構和指示文檔結構的標簽。其中Markup的含義是指插入到文檔中的標記。標記分為兩種：一種稱為procedard markup，用來描述文檔顯示的樣式；另一種稱為descriptive markup，用來描述文檔中的文字的用途。制定SGML的基本思想是把文檔的內容與樣式分開。
回顧歷史我們應該像佟掌柜一樣感慨了：“我錯了，我真的錯了”
如何將文檔的內容和樣式分開？作者同樣給出了一些建議：
Replace Table Layouts
Replace Frames with CSS Positions
Move Content to the Front
Mark Up Lists as Lists
Replace blockquote/ul Indentation with CSS
Replace Spacer GIFs
Add an ID Attribute
Add Width and Height to an Image
留言列表
