# HTML语义化的理解

就是页面去掉样式或者加载失败的时候能够让页面呈现出清晰的结构。HTML5新增了好多语义化的标签,例如:header、footer、nav、menu、section、article等等,单单从字面上理解,就知道标签的含义。在写页面的时候,我们可以直接引用这些标签,不需要再用没有任何含义的div标签了,对于机器可以识别,对于开发人员很容易明白。

也就是说,脱掉css的外衣,头是头,脚是脚。赤裸裸的完整的一篇文档。这也就是,语义化之后文档的效果。

# 语义化的目的

就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong><em>用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

这也就解释为什么要用<strong>标签少用<b>标签;用<em>标签少用<i>标签了。

# 语义化的好处

  1. 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构;

  2. 用户体验:例如title、alt用于解释名词或解释图片信息的标签尽量填写有含义的词语、label标签的活用;

  3. 有利于SEO (opens new window):和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

  4. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以有意义的方式来渲染网页;

  5. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。