HTML 的语义化标签

在 HTML 里,divspan 分别作为块元素和行内元素的代表,可以满足绝大多数情况下我们的需求,但有理想的前端工程师还应该去追求更优雅的语义化标签

什么是语义化标签

语义化标签在视觉表现上和常见的 divspan 并没有太大区别,关键就在于不同的语义化标签代表了不同的语义,比如经常见到的 headerfootersection 等等。

语义指的是对单词或句子含义的正确解释,很多时候一段内容的语义由内容里的文字来承担,但有些时候文字也无法表达类似段落、页首、页尾或侧边栏等内容,这个时候就需要语义化标签来代为补充了

虽然很多场景下,divspan 已经足够使用,但语义化标签也有下面这些不可替代的优点:

  • 对开发者友好。增强了代码的可读性,即使在没有 CSS 的时候,也可以清晰地看出页面的结构,方便后期团队维护
  • 方便程序自动化。有语义的标签很大程度上方便了机器阅读分析页面结构和内容,适合搜索引擎检索、页面转码转义、爬虫分析、视障辅助等程序自动化操作

虽然语义化标签带来了很多好处,但有时候也没必要过分追求。不恰当地使用语义化标签还会造成大量冗余标签,语义化标签自带的样式也会给 CSS 的编写增加负担。引用 winter 老师的一句总结:用对”比“不用”好,“不用”比“用错”好。当然了,我觉得有理想的前端工程师还是应该去追求“用对”它们

常见的语义化标签

在列举常见的语义化标签之前,我们先按它们出现的原因对其分类,分别为:

  • 作为自然语言的延伸
  • 为内容分区
  • 标记文本类型

下面将列表一下这三种情况下的语义化标签的用法,多数内容节选自 《HTML 元素参考 - MDN》,这里只列出相对重要且常用的语义化标签,完整查阅请参考 MDN

作为自然语言的延伸

本节下面的语义化标签,很多情况下用来辅助表达自然语言表述不够准确的场景。比如 <em> 标签可以帮助消除句子中的歧义,例如:”我昨天去超市了”,这句话可以理解为:”我昨天去了超市,但今天没去”,也可以理解为:”我昨天去了超市,而不是别的地方”,关键在于重音在昨天还是超市,这个时候就可以用 <em> 标签来消除歧义,比如:我<em>昨天</em>去超市了

标签 MDN 描述 备注
<abbr> HTML 缩写元素(<abbr>)用于展示缩写,并且可以通过可选的 title 属性提供完整的描述。
<b> HTML提醒注意(Bring Attention To)元素(<b>)用于吸引读者的注意到该元素的内容上(如果没有另加特别强调)。这个元素过去被认为是粗体(Boldface)元素,并且大多数浏览器仍然将文字显示为粗体。尽管如此,你不应将<b>元素用于显示粗体文字;替代方案是使用 CSS font-weight 属性来创建粗体文字。
<cite> HTML引用( Citation)标签 ((<cite>) 表示一个作品的引用。它必须包含引用作品的符合简写格式的标题或者URL,它可能是一个根据添加引用元数据的约定的简写形式。
<code> HTML<code>元素呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.
<data> HTML<data>元素 将一个指定内容和机器可读的翻译联系在一起。但如果内容是与 time 或者 date 相关的,一定要使用 <time>
<dfn> HTML 定义元素 ((<dfn>) 表示术语的一个定义。
<em> HTML 着重元素 ((<em>) 标记出需要用户着重阅读的内容,<em>元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。 对应汉语中重读的意思,可以用来消除句子中的歧义
<i> HTML元素<i>用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示。 现在经常被用来表示一些图标
<kbd> HTML键盘输入元素((<kbd>) 用于表示用户输入,它将产生一个行内元素,以浏览器的默认monospace字体显示。 一般用来标记键盘按键
<q> HTML引用标签 ((<q>)表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本,所以请不要引入换行符; 对于长的文本的引用请使用<blockquote>替代.
<ruby> HTML<ruby>元素 被用来展示东亚文字注音或字符注释。 比如,你(wo)太强(cai)了
<s> HTML<s>元素 使用删除线来渲染文本。使用<s>元素来表示不再相关,或者不再准确的事情。但是当表示文档编辑时,不提倡使用<s>;为此,提倡使用<del><ins>元素。 会被用于电商网站表示曾售价
<samp> <samp> 元素用于标识计算机程序输出,通常使用浏览器缺省的 monotype 字体(例如 Lucida Console)。
<small> HTML 中的元素將使文本的字体变小一号。(例如从大变成中等,从中等变成小,从小变成超小)。在HTML5中,除了它的样式含义,这个元素被重新定义为表示边注释和附属细则,包括版权和法律文本。
<strong> Strong 元素 ((<strong>)表示文本十分重要,一般用粗体显示。
<sub> HTML<sub>元素定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更低并且更小。
<sup> HTML<sup>元素定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更高并且更小。
<u> HTML<u>元素使文本在其内容的基线下的一行呈现下划线。在HTML5中, 此元素表示具有未标注的文本跨度,显示渲染,非文本注释,例如将文本标记为中文文本中的专有名称(一个正确的中文标记), 或 将文本标记为拼写错误。
<time> HTML time 标签((<time>) 用来表示24小时制时间或者公历日期,若表示日期则也可包含时间和时区。 注意跟 data 的区别

为内容分区

为内容分区的情况比较常见,也是很多前端用的最多的语义化标签了。通过下面这些标签,可以很方便地对整个页面结构进行分区分块。

标签 MDN 描述 备注
<address> HTML 的<address>元素可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下,它应用于整个文档。 每个 <article><body> 内只能出现一次
<article> <article>元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。 和 body 属于同一级别的标签,所以它也可以有自己的 <header><footer>
<aside> <aside> 元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。他们通常包含在工具条,例如来自词汇表的定义。也可能有其他类型的信息,例如相关的广告、笔者的传记、web 应用程序、个人资料信息,或在博客上的相关链接。
<footer> HTML <footer> 元素表示最近一个章节内容或者根节点(sectioning root )元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<header> HTML <header> 元素用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> HTML <h1><h6> 标题(Heading)元素呈现了六个不同的级别的标题,<h1> 级别最高,而 <h6> 级别最低。一个标题元素能简要描述该节的主题。标题信息可以由用户代理可以使用,例如,自动构造某个文档中的内容表(就像本文档右边浮动栏一样)。 HTML 可以根据平铺的 <h1><h6> 生成有层级关系的 TOC
<hgroup> HTML <hgroup> Element (HTML Headings Group Element) 代表一个段的标题。它规定了在文档轮廓里(the outline of the document )的单一标题是它所属的隐式或显式部分的标题。 常用于主题和副标题的组合
<main> HTML <main>元素呈现了文档<body>或应用的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。这部分内容在文档中应当是独一无二的,不包含任何在一系列文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。
<nav> HTML导航栏 (<nav>) 描绘一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表.
<section> HTML Section 元素 (<section>) 表示文档中的一个区域(或节),比如,内容中的一个专题组,一般来说会有包含一个标题(heading)。一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点 来 辨识每一个<section> <section> 内的 <h1><h6> 标签会降一级, 所以只通过 <section><h1> 即可生成有层级的标题结构

标记文本内容

下面这些标签相比 div 可以更好地标识内容的宗旨或结构,对于 SEO 和可访问性有很好的帮助。

标签 MDN 描述 备注
<blockquote> HTML <blockquote> 元素(或者 HTML 块级引用元素),代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进(注 中说明了如何更改)。若引文来源于网络,则可以将原内容的出处 URL 地址设置到 cite 特性上,若要以文本的形式告知读者引文的出处时,可以通过 <cite> 元素。 通常用作对外来的引用
<figcaption> HTML <figcaption> 元素 是与其相关联的图片的说明/标题,用?于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption><figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的;如果没有该元素,这个父节点的图片只是会没有说明/标题。
<figure> HTML <figure> 元素代表一段独立的内容, 经常与说明(caption) <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主体(main flow)时,它的位置独立于主体。这个标签经常是在主文中引用的图片,插图,表格,代码段等等,当这部分转移到附录中或者其他页面时不会影响到主体。 类似论文中的图表说明
<hr> HTML <hr> 元素表示段落级元素之间的主题转换(例如,一个故事中的场景的改变,或一个章节的主题的改变)。在HTML的早期版本中,它是一个水平线。现在它仍能在可视化浏览器中表现为水平线,但目前被定义为语义上的,而不是表现层面上。 注重 <hr> 表示的是文本内容主题的转换,而不是一个简单的横线
<p> HTML <p>元素(或者说 HTML 段落元素)表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本,或以垂直的空白隔离或以首行缩进。另外,<p> 是块级元素。 最常用地表示内容的段落
<pre> HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略) 常用来展示代码等已经有预定义格式的文本,防止 HTML 转义

小结及延伸

HTML 的语义化标签应该是锦上添花的功能,切不可滥用导致反效果,那样就得不偿失了。

但这里我想延伸一下,很多时候语义化标签的出现是顺应机器阅读而生的,开发使用了语义化标签了之后,程序就能更准确地辨识出各部分地内容代表了什么语义和用途。但在机器学习甚至深度学习如此兴盛的今天,可以反问下:“你已经是个成熟的机器了,就不能自己读出语义吗?”

不管怎么说,语义化标签的出现也是在 HTML 标准不断发展之下,更为人性化的产物,应该合理适当在对应的场景中引入。至少有了它对于视障用户来说,可能阅屏软件就不会从一个广告爆炸网页上念半个小时的:”澳门赌场大酬宾,传奇霸业一刀999?”