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 类名也要语义化。