Skip to content

Day03 语义化

ScarSu edited this page Sep 30, 2020 · 3 revisions

语义化是什么

合理正确的使用语义化的标签来展示内容

为什么要追求语义化

  • 易于阅读,丢失样式的情况下页面具有清晰的结构(给用户看

  • 利于SEO(给搜索引擎看

  • 易于维护开发,代码可读性高(给开发人员看

  • 利于设备解析,例如屏幕阅读器、打印设备、视障阅读器(给机器看

如何做到语义化

HTML5 语义化标签:

  • title:主要用于页面的头部的信息介绍
  • header:定义文档的页眉
  • nav:主要用于页面导航
  • main:规定文档的主要内容。对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
  • article:独立的自包含内容
  • h1~h6:定义标题
  • ul: 用来定义无序列表
  • ol: 用来定义有序列表
  • address:定义文档或文章的作者/拥有者的联系信息。
  • canvas:用于绘制图像
  • dialog:定义一个对话框、确认框或窗口
  • aside:定义其所处内容之外的内容。<aside> 的内容可用作文章的侧栏。
  • section:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
  • figure:规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
  • details:描述文档或者文档某一部分细节
  • mark:义带有记号的文本

语义化标签创建页面结构: