HTML5 语义化标签 ​

1. 语义化的背景： ​

以前的HTML的结构，基本上就是DIV+CSS。然而，DIV它并没有什么任何的意义，全靠CSS显示页面的样式。 那么近几年呢，开发者提出了HTML结构的语义化，所以W3C就制定出了语义化标签。

2. 什么是语义化 ​

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

比如有这样的标签：

1. header表示页面头部
2. main表示页面主题
3. footer表示页面底部

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

3. 怎么知道页面结构是否语义化了呢？ ​

去掉CSS，看HTML代码的结构，是否清晰，再看页面内容呈现，是否可以正常显示

4. 为什么要语义化 ​

1. 对于编写代码的人来说，有语义化标签的HTM的结构，更加清晰，方便编写代码；
2. 对于团队来说，方便团队的开发与维护；
3. 对于爬虫，有利于SEO；
4. 对于浏览器，更加方便解析，
5. 对于用户，假如因为网速的原因导致没有加载CSS，页面也能呈现出良好的结构；
6. 某些标签属性如alt，title能带来良好的用户体验，还有用好label标签更利于用户交互；
7. 在特殊终端如视障阅读器中语义化的 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 类名也要语义化。