标签语义化

在网页设计中,我们时常都会听到标签语义化这个名词,HTML标签语义化的设计思维其实就是给某块内容用上一个最恰当最合适的标签,这样一来,不管是谁都能看懂这块内容是什么。

一个网页就好像是一栋房子,HTML结构就是一面面的墙,而标签则是一块块的砖,砖要摆放有序,整整齐齐,墙才会牢固。最后css则是装饰材料,美不美就靠她了。因此,我们要有一个优秀的网页,既要提供一个干净而又有清晰结构的HTML,更加离不开css的极致美化。

从上面也说明标签语义化极其重要,HTML每个标签都有自己的语义,都有自己适用的范围。但往往会被我们忽略或者被我们滥用,举个例子:在一个页面中

用了几十个甚至上百个,这是个无意义的标签,只是表示一个层而已,非常不利于后期的维护;而标签则是一个数据标签,该用的时候,我们就要大胆使用。

标签语义化的好处

让你使用标签语义化的理由可以有无数条:

去掉样式或者样式丢失时页面结构依然清晰分明
移动设备能够更加完美的展示你的网页(移动设备对css的支持较弱)
阅读器会根据标签的语义自动解析,呈现更容易阅读的内容形式(无障碍阅读)
搜索引擎会根据标签的语义确定上下文和权重问题
便于后期的开发以及维护,团队合作效率提高
通过多重组合,减少不必要的CSS命名
……

HTML常用标签语义汇总

红色:结构标签 黑色:行内元素 蓝色:块级元素 绿色:表格元素 灰色:其他标签