HTML语义化标签的理解

1. 语义化的背景：
以前的HTML的结构，基本上就是DIV+CSS。然而，DIV它并没有什么任何的意义，全靠CSS显示页面的样式。

那么近几年呢，开发者提出了HTML结构的语义化，所以W3C就制定出了语义化标签。

2. 什么是语义化
语义化就是构成HTML结构的标签要有意义。

比如有这样的标签：

header表示页面头部
main表示页面主题
footer表示页面底部
 那么这些标签构成的HTML结构就是有意义的，也是语义化的。

​ 如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。

3. 怎么知道页面结构是否语义化了呢？
​ 去掉CSS，看HTML代码的结构，是否清晰，再看页面内容呈现，是否可以正常显示

4. 为什么要语义化
​对于编写代码的人来说，有语义化标签的HTM的结构，更加清晰，方便编写代码；
对于团队来说，方便团队的开发与维护；
对于爬虫，有利于SEO；
对于浏览器，更加方便解析，
对于用户，假如因为网速的原因导致没有加载CSS，页面也能呈现出良好的结构；某些标签属性如alt，title能带来良好的用户体验，还有用好label标签更利于用户交互；在特殊终端如视障阅读器中语义化的 HTML 可以呈现良好的结构。
5. 怎么做才能写出语义化的HTML呢？
​ 少使用/不使用 div 和 span 标签；
​ 用 p 标签代替 div 标签；
​ 不使用样式标签，如： b 标签、font 标签；
强调文本放在 strong 或者 em 标签中，不要用 b 和 i 标签；
使用表格 table 时，标题要用 caption，表头要用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围；表头用 th，单元格用 td。表单域用 filedset 包裹，用 lengend 标签说明表单的用途。
input 标签通过 id 属性或 for 属性与 label 标签关联。
html 语义化，css 类名也要语义化。