语义化标签

  • header：包含网站的标题，或者logo
  • nav：导航栏，目录
  • main：文档的主要内容，不包含侧边栏、导航栏、版权信息、网站logo等附属信息
  • article：文档中可以脱离其他部分，独立出来又完整，甚至可以复用的一部分，通常有自己的标题，当 article 内嵌 article 时，里外层应该是相关的，比如一篇微博和它的评论
  • section：文档中一段主体性内容，通常也有自己的标题，跟 article 的区别在于它是整体的不部分或者说文章的一节
  • aside：侧边栏或者嵌入内容，通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等
  • footer：页脚，通常包含作者、版权信息或者相关链接等
  • figure：与主文章相关的图像、照片等流内容，不仅限图片，代码、表格等，只要是具有一定自包含性（类似独立句子）的内容，都可以用。
  • figcaption：内容的标题
  • address：表示文章（作者）的联系方式，明确地只关联到 article 和 body
  • hgroup：标题组
  • abbr：表示缩写
  • hr：表示故事走向的转变或者话题的转变
  • 引述相关的标签
    • blockquote：段落级引述内容
    • q：行内的引述内容
    • cite：引述的作品名
  • time：时间
  • dfn：用来包裹被定义的名词
  • pre：表示内容是预先排版过得，不需要浏览器进行排版
  • samp：计算机程序的实例输出
  • code：代码

image.png

使用场景

自然语言表达能力的补充

举个例子：
当没有上下文时，如何消除歧义？这就要用到我们的 em 标签了， em 表示重音：

  1. 今天我吃了一个<em>苹果</em>。
  2. 今天我吃了<em>一个</em>苹果。

前面那个的表达的意思时我今天吃的是苹果，而不是别的什么东西。
后面则表示我今天只吃了一个苹果，没有多吃。

文章的结构

举个例子：

  1. <h1>JavaScript 对象</h1>
  2. <h2>我们需要模拟类吗？</h2>

上面这段代码生成的标题结构是：

  • JavaScript对象
    • 我们需要模拟类吗
  1. <hgroup>
  2.   <h1>JavaScript对象></h1>
  3.   <h2>我们需要模拟类吗</h2>
  4. </hgroup>

这段diamagnetic的标题结构式：

  • JavaScript对象 —— 我们需要模拟类吗？

可以看出，加入了 hgroup 更加符合我们想要表达的意思。

整体结构

应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，它能让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对视障用户的读屏软件更友好。

建议

尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。这样，我们才能保证语义标签不被滥用，造成更多的问题。

参考链接：