目的：為開發頁面時有一套明確的頁面結構化實施方案，提高開發效率；
HTML結構化指的其實就是使用HTML語義化標簽根據web標准書寫具有明確結構邏輯的HTML代碼的一種思路；
說白了重點就是：頁面實際要展現的內容，貼切頁面內容的HTML標簽，符合web標准，結構邏輯明確；
前置條件
1、了解HTML語義化；
2、了解web標准；
工作中如何使用結構化？
從單純的頁面級別來說，頁面是由很多個小的結構組成的，這些小的結構都由HTML標簽包裹着文字、圖片組成的。
一、結構化整體布局
一個常規的頁面一般分為以下幾部分：
1、頭部head
2、側欄side
3、主體內容main
4、尾部foot
上面四個部分就是一個大的結構化布局；
二、結構化細則布局
針對UI設計師天馬行空的設計理念，作為前端人員必須有一套自己的應對方案；比如在UI還沒天馬行空完，我們就可以根據原型書寫一套良好的HTML代碼；
什么才是良好的HTML代碼呢？
1、HTML語義化要有強有力的展現，比如是一段文字的話就用p標簽，這沒什么可解釋的；
2、塊級元素和內聯元素的嵌套一定要符合web標准，比如內聯元素就是不能嵌套塊級元素；
3、在寫結構的時候不要去考慮樣式怎么展現，結構就是結構，跟樣式沒毛線關系；
4、結構一定要體現出所表達的含義，達到只看結構就能知道該結構是要干嘛的；
舉幾個例子：
1、書寫一個有標題、圖片、文字的HTML結構
<div> <h2>標題</h2> <img src="xxx.jpg" alt="xxx.jpg" /> <p>內容內容內容內容</p> </div>2、書寫一個form表單
<form> <label>賬號</label> <input type="text" value="" /> <button type="submite">提交按鈕</button> </form>三、結構化的步驟
1、無論是根據原型還是UI設計稿，都要先抽出頭尾、側欄等公用的布局結構進行單獨HTML代碼的編寫；
2、仔細查看原型或者UI設計稿，找出結構一樣或者結構相似的，思考結構相似的該如何展現；是求同存異？還是修改成相同的？比如圖片在上文字在下和圖片在下文字在上；
3、着手編寫HTML代碼時，將代碼以單獨結構的形式進行注釋；
四、結構化標准
1、HTML代碼必須根據頁面的具體內容進行語義化編寫；
2、禁止內聯元素包含塊級元素；
3、禁止超出三層的標簽嵌套；
4、相似度70%（拍腦袋拍出來的）的結構必須抽取相同結構或者強制寫成完全相同的結構；
5、每一塊結構必須加注釋，在進行拷貝結構頁面拼裝時，注釋也必須要帶上；
6、整站相同的結構必須寫在一個頁面中；
7、禁止一邊寫結構一邊寫樣式；
五、辨別結構化的合理性
從以下幾個方面入手：
1、HTML標簽是否和所要展現的內容貼切；
2、內聯標簽是否只包含文字、圖片等需要在頁面上展現出來的內容；
3、標簽嵌套是否在三層以內；
4、結構與結構之間的相似度是否低於70%；
六、結構化中重復的工作
一切重復性的工作是應該被消滅的；
其實大部分網站都會存在很多共性的地方；比如某個結構會出現在很多網站當中，畢竟設計師有時也是按套路出牌的；
針對在很多頁面乃至很多網站中出現較頻繁的結構，我們肯定不能夠每次都去梳理結構書寫結構，最好的辦法就是將這些高頻的結構代碼封裝成代碼片段，保存在常用的IDE中，這樣就能夠提高開發效率消滅重復的工作；
七、判斷頁面是不是結構化
見第五條