参考链接

MDN: HTML 元素参考

【译】停止滥用div! HTML语义化介绍

阮一峰：网页的语义结构

HTML 语义化

根据内容的结构选择合适的标签

优点：

  • 增加代码可读性，结构清晰，便于开发和维护

  • 对机器友好，文字表现力丰富，有利于SEO。
    SEO(Search Engine Optimization)是搜索引擎优化，为了让用户在搜索和网站相关的关键词的时候，可以使网站在搜索引擎的排名尽量靠前，从而增加流量

  • 方便设备解析（如盲人阅读器等），可用于智能分析

  • 在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构

常见的语义化标签

  • header ：页眉通常包括网站标志、主导航、全站链接以及搜索框。
  • nav ： 标记导航，仅对文档中重要的链接群使用。
  • section ： 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
  • main：代表文档的主要内容。
  • article： 定义外部的内容，其中的内容独立于文档的其余部分。
  • aside ： 内容仅与文档的主要内容间接相关。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
  • footer：页脚，只有当父级是body时，才是整个页面的页脚。
  • address： 作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
  • code：表明该文本是计算机代码的一小段。
  • blockquote：文本是扩展引用。