编写语义化 HTML

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

编写语义化的HTML是指使用正确的HTML元素来传达或强化有关其所包含信息类型的信息。也就是说，HTML标签在内容结构中起着重要作用，而不仅仅是将信息分组以便设置样式（就像过去div对所有类型的内容所做的那样）。

这也意味着不要因为错误的原因使用标签。例如：不要strong仅仅为了设置样式（字体粗细）而使用标签——应该用它来强调文本。

语义化 HTML 旨在描述 HTML 标签中内容的含义，使程序员和处理此信息的机器都能更清楚地理解其含义。

为什么你应该关注语义化的HTML？

1. 辅助功能：语义化的 HTML 为屏幕阅读器、盲文阅读器、文本转语音 (TTS) 等工具提供上下文，从而实现朗读、键盘导航和其他辅助功能。主要内容可以轻松分离并优先于次要内容，各个部分之间也易于导航等等。
2. SEO：搜索引擎更容易索引内容并优先显示相关内容。例如：Google 的摘要列表用于显示li元素。
3. 良好的开发实践：语义化代码更简洁易懂，也是分离内容和样式的一种有效方法。此外，许多语义化标签还带有实用功能和增强特性。例如，`<a>` 标签button可以form使用 Tab 键、Tab+Shift 键等进行导航。

如何使文档语义化？

1. 页面布局/文档结构

为了对文档进行高级结构化，我们使用了正确的标签，例如header, footer, nav, main, aside, section, ( form) 和article

• header代表介绍性内容，通常是一组介绍性或导航性辅助工具。它可能包含一些标题元素，但也可能包含徽标、搜索表单等。
• nav用于网站内导航链接（而非普通<a>标签）
• main代表页面的主要内容
• aside是指其内容与文档主要内容只有间接关系的部分（无需理解当前内容）。
• article一个独立包含的部分，旨在独立分发或重复使用（例如：博客文章、新闻文章）
• section是独立内容的一部分（例如：博客文章的一部分，该部分可能带有标题，也可能没有标题）
• address表示所附的 HTML 代码提供了个人或组织的联系信息。
• footer代表其最近的章节内容或网站的页脚

（这只是一个例子，并不一定要完全一样）

2. 行内文本语义

说到内容，使用规范且结构化的标题（例如h1<h1>、h2<h2>、<h3> 等h6）和p标签有助于组织数据。有些屏幕阅读器会在段落分隔符后暂停。用户可以按章节（由标题标识）跳转。<h1>
ul、ol<h2>dl和 <h3>li用于列表。

以下是一些可用于提供文本部分更多信息的标签（而不是使用 <code><br></code> 标签span）。

• strong表示其内容非常重要（这是语义上的，与……相比b）。
  em强调文本重点（使用此项，而不是非语义性的i）。

• cite描述对引用作品的参考文献，并包含该作品的标题。
  q表示其中包含的文本是简短的行内引用。
  blockquote表示其中包含的文本是较长的引用（通常通过缩进来呈现）。

• dfn用于指示定义短语或句子中被定义的术语。
  abbr表示缩写或首字母缩略词（可选的“title”属性可以提供缩写的展开或描述）。

• sub下标元素。
  sup上标元素。

• time用于表示时间或时间段

• kbd表示一段行内文本，用于表示用户通过键盘、语音输入或其他任何文本输入设备输入的文本。

• code表示文本是一小段计算机代码。
  samp表示计算机程序的示例（或引用）输出。
  var表示数学表达式或编程上下文中的变量名。

• del表示已从文档中删除的文本范围。
  ins表示已添加到文档中的文本范围。

很多信息都可以用关联标签来表示，例如dd“和” dt、figure“和” figcaption、label“和” 。input

这只是一个简单的介绍。你可以在这个MDN页面上找到所有的HTML标签。