目的：为开发页面时有一套明确的页面结构化实施方案，提高开发效率；
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中，这样就能够提高开发效率消灭重复的工作；
七、判断页面是不是结构化
见第五条