语义化 HTML (Semantic HTML)

在计算机科学的背景下，语义 (semantics) 指的是编程语言的含义。

在前端开发的背景下，语义可以在 HTML、CSS 和 JavaScript 中体现。

就 HTML 而言，标签本身就具有语义含义，例如：

<ul> 用于无序列表
<ol> 用于有序列表
<table> 用于表格或表格式数据
等等...

语义化元素 (Semantic Elements)

HTML5 引入了语义化元素：

`<article>`

文档、页面、应用程序或站点中的一个自包含的作品 (self-contained composition)，其意图是可独立分发或重用。

示例 (Example)

博客文章、杂志、文章、产品卡片、用户提交的评论、小部件 (widget) 或小工具 (gadget)。

用法 (Usage)

通常包含一个标题：<h1> - <h6> 作为其子元素。
当多个 <article> 嵌套时，内部的应与外部的相关。
将 <article> 的作者信息放在 <address> 标签中。
<article> 的发布日期和时间可以使用 <time> 标签的 datetime 属性。

`<aside>`

文档的一部分，其内容与主要内容间接相关。

示例 (Example)

侧边栏 (sidebar) 或标注框 (call-out box)。

用法 (Usage)

不要用它来标记括号内的文本。

`<details>`, `<summary>`

<details> 创建一个可折叠/展开的小部件 (disclosure widget)，其中的信息仅在小部件切换到“打开”状态时可见。

使用 <summary> 或为 <summary> 提供标签。默认状态是关闭的，仅显示摘要信息。

示例 (Example)

大语言模型 (LLM) 的思考过程小部件。

用法 (Usage)

<summary> 只能作为 <details> 元素的第一个子元素。

属性 (Attribute)

open: 布尔值，指示内容是否可见。
name: 分组多个具有相同 name 的 <details> 元素，但同一组中只有一个可以同时可见。

事件 (Event)

toggle: 检测小部件状态改变时触发。

`<figure>`, `<figcaption>`

<figure> 用于自包含的内容 (self-contained content)，可能带有一个标题 <figcaption>。

示例 (Example)

图像、插图、图表、代码片段。

`<header>`, `<footer>`

<footer> 代表其最近的祖先 章节内容 (sectioning content) 或 分段根 (sectioning root) 元素的页脚。<header> 代表介绍性内容。

示例 (Example)

<footer> 用于作者信息、相关链接或版权信息。
<header> 可能包含标题元素、搜索表单、作者姓名、徽标等。

用法 (Usage)

当 <footer> 的分段根是 <body> 时，它可以是整个页面的页脚。
如果使用 <address> 提供作者信息，可以将其放在 <footer> 内。
当 <header> 的上下文是 <body> 时，它的含义与站点范围的横幅 (site-wide banner) 相同。在无障碍树 (accessibility tree) 中，它是一个 banner 角色。否则，在无障碍树中，它是一个包含标题的 section 角色。

`<form>`

<form> 提供用于提交信息的交互式控件。

属性 (Attributes)

autocomplete: 输入元素的值是否可以默认由浏览器自动完成。
name: 表单的名称，在所有表单中必须唯一，并且不能为空字符串。

用于提交 (For submission):

action: 处理信息的 URL。
method: 提交表单所用的 HTTP 方法，允许的方法：post, get, dialog。
target: 指示提交表单后在哪里显示响应，示例：_self(默认), _blank(新的浏览上下文), _parent(父级上下文)。
novalidate: 布尔值，指示表单不应被验证。

`<main>`

文档 <body> 的主要内容 (dominant content)。<main> 内的内容应与文档的中心主题直接相关。

一个文档不能有超过一个没有 hidden 属性的 <main> 元素。

用法 (Usage)

<main> 不贡献于文档的大纲 (outline)，它不影响 DOM 对页面结构的概念。
<main> 内的内容应该是唯一的，重复的内容应放在 <main> 之外。

`<mark>`

表示因标记段落在包围上下文中的相关性，而为参考或注释目的而 标记 (marked) 或 高亮 (highlighted) 的文本。

用法 (Usage)

在 <q> 或 <blockquote> 中使用。
否则，它表示文档内容的某一部分与用户的当前活动相关。
不要将其用于语法高亮，应使用带有 CSS 的 <span> 替代；不要将其与 <strong> 混淆，前者表示内容具有一定程度的相关性 (relevance)，后者表示文本的重要性 (importance)。

`<nav>`

提供导航链接。

示例 (Examples)

菜单 (menus)
目录 (table of contents, toc)
索引 (indexes)

用法 (Usage)

用于主要的导航链接块，而不是用于所有链接。
一个文档可以有多个 <nav> 元素。

`<section>`

代表文档的一个通用的独立章节 (generic standalone section)；应始终包含一个标题。

用法 (Usage)

仅当没有更具体的元素来表示它时才应使用。
有更好的选择：
- 代表主要内容？使用 <main>
- 代表切题信息 (tangential info)？使用 <aside>
- 代表与主要流程相关的原子内容单元？使用 <article>
- 用作样式包装器 (styling wrapper)？使用 <div>

`<time>`

属性 (Attribute)

datetime

用法 (Usage)

以机器可读格式呈现日期和时间。
不要用于格里高利历 (公历) 引入之前的日期。

语义化属性 (Semantic Attributes)

`role`

role 属性描述了元素在文档上下文中所扮演的角色。它是一个全局属性，意味着对所有元素都有效，由 ARIA 规范定义。

它有助于构建 AOM (无障碍对象模型 - Accessibility Object Model)。

为何要语义化？(Why semantics?)

编写语义化标记的好处如下：

更好的 SEO (搜索引擎优化)：使用语义构建的 Web 应用会被搜索引擎认为更重要。
更好的无障碍性 (A11y - Accessibility)：
- 屏幕阅读器可以比没有语义化时更容易地使用它。
- 像 <header>, <nav>, <main>, <footer> 这样的语义化标签可以创建语义化地标 (semantic landmarks)，为 Web 内容提供结构，并确保内容的重要部分对于屏幕阅读器用户是可通过键盘导航的。
更好的可读性 (Readability)：
- 开发者可以使用搜索快速找到目标元素。
- 避免大量的 <div> 嵌套 (div soup)。

内容类别 (Content categories)

在编写语义化元素时，牢记内容类别是很有益的。它有助于定义元素的内容模型 (content model)。
你可以在内容类别 - MDN 查看。 (注：链接已更新为中文 MDN 页面，如果不存在则会回退到英文)

7 种主要内容类别的维恩图

基本上有 7 种类型：

元数据内容 (Metadata content)：修改文档其余部分的呈现或行为，设置到其他文档的链接，传达带外信息 (out-of-band info)。
- 示例：
  - <base>
  - <head> 中的所有内容：<link>, <meta>, <script>, <style>, <title>
流式内容 (Flow content)：<body> 内部的大多数元素。
- 示例：
  - 标题元素、章节元素、段落元素、嵌入元素、交互元素和表单相关元素。
章节内容 (Sectioning content)：流式内容的一个子集，在当前大纲中创建一个章节，定义 <header> 和 <footer> 元素的范围。
- 示例：
  - <article>, <aside>, <nav>, <section>
标题内容 (Heading content)：流式内容的一个子集，定义一个章节的标题。
- 示例：
  - <h1> - <h6>
  - <hgroup>
段落内容 (Phrasing content)：流式内容的一个子集，文档中的文本和标记。
嵌入式内容 (Embedded content)：流式内容的一个子集，导入另一个资源或将来自其他标记语言或命名空间的内容插入到文档中。
- 示例：
  - <audio>, <video>, <iframe>, <svg>, <img>, <embed>, <canvas>, <picture>
交互式内容 (Interactive content)：流式内容的一个子集，专为用户交互而设计。
- 示例：
  - <button>, <label>, <details>, <select>, <textarea>

工具 (Tools)

你可以使用 W3C 验证器 (validator) 来验证你的 HTML 代码。
你可以在 Chrome 开发者工具的 Element (元素) 面板切换到无障碍树视图 (Accessibility Tree View)。

语义化 HTML (Semantic HTML)