HTML 语义化

HTML 语义化

作用

Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用;另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器(如果访客有视障)能够读懂内容。 简单来说就是利于 SEO,便于阅读维护理解。

常见语义化标签

  • i:专业术语
  • em:强调文本
  • strong:这个文本非常重要
  • section:文档中的一个区域、一节
  • article:文档、页面、网站中的独立结构
  • aside:附属信息
  • nav:页面的导航链接区域
  • footer:页脚
  • hgroup:文章的标题
  • header:页眉

dl、dt、dd

<dl> 代表 description list,这个 list 封装了若干个 terms (<dt>) 以及 descriptions (<dd>) 信息。

<dl>
    <dt>火狐浏览器</dt>
    <dd>
        由 Mozilla 组织以及数百个志愿者一起开发的一款免费、开源、跨平台的 Web 浏览器。
    </dd>
    <dt>Chrome 浏览器</dt>
    <dd>
        谷歌浏览器,是一个由Google(谷歌)公司开发的开放源代码网页浏览器。
    </dd>
</dl>