如何理解语义化

如何理解语义化

语义化的背景

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

什么是语义化

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

怎么知道页面结构是否语义化了呢

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

为什么要语义化

对于编写代码的人来说，有语义化标签的HTM的结构，更加清晰，方便编写代码；对于团队来说，方便团队的开发与维护；对于爬虫，有利于SEO；对于浏览器更加方便解析，最重要的是对于用户，一是假如因为网速的原因导致没有加载CSS，页面也能呈现出良好的结构。二是某些标签属性如alt，title能带来良好的用户体验，还有用好label标签更利于用户交互；三是在特殊终端如视障阅读器中语义化的 HTML 可以呈现良好的结构

怎么做才能写出语义化的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 类名也要语义化。