“语义正确”是什么意思？答案

【问题标题】：What does "semantically correct" mean?“语义正确”是什么意思？
【发布时间】：2010-11-20 15:18:42
【问题描述】：

我在 css talk 中看到了很多。语义正确是什么意思？

【问题讨论】：

@johnny：在发布问题之前，您是否尝试过搜索问题的答案？并不是说这是一个坏问题，而是人们写了很多关于它的问题。
是的，但老实说，没有冒犯的意思，但我看不出这些类型的问题有什么害处，也不知道为什么有些人在被问到时会被冒犯。如果我欠一个网站，我不会介意，因为它只会创建更多可以被索引的页面。我认为它对网站有帮助。但是，我确实看过并没有看到一个简单的答案。同样，无意冒犯。我只是不明白这些抱怨。
其实johnny是对的。只要问题是 stackoverflow 的原创问题，那么它就是一个合法的问题。 meta.stackexchange.com/questions/2686/…

【解决方案1】：

正确标注

这意味着你正在调用它实际上是什么。经典的例子是，如果某个东西是table，它应该包含数据的行和列。将其用于布局在语义上是不正确的 - 你说的是“这是一张桌子”，而实际上它不是。

另一个例子：列表（<ul> 或<ol>）通常用于对相似的项目（<li>）进行分组。您可以对组使用 div，对每个项目使用 <span>，并将每个 span 设置为单独的行并带有项目符号，它可能看起来像您想。但“这是一份清单”传达了更多信息。

HTML 代表“超文本标记语言”；其目的是标记或标记您的内容。标记得越准确越好。 HTML5 中引入了新元素，以更准确地标记常见网页部分，例如页眉和页脚。

所有这些语义标签都有助于机器解析您的内容，从而帮助用户。例如：

了解您的元素 是什么 让浏览器可以使用合理的默认值来确定它们应该如何外观和行为。这意味着您要做的自定义工作更少，更有可能在不同的浏览器中获得一致的结果。
浏览器可以正确应用您的 CSS（层叠样式表格），描述每种类型的内容的外观。您可以提供替代样式，或者用户可以使用自己的样式；只要您在语义上标记了元素，“我希望标题很大”之类的规则就可以使用。
如果将逻辑部分分成fieldsets，每个部分对应一个legend，盲人屏幕阅读器可以帮助他们更轻松地填写表格。盲人用户可以听到 legend 文字并决定“哦，我可以跳过这一部分”，就像有视力的用户通过阅读它可能会做的那样。
当手机看到type="tel"（用于电话号码）的表单输入时，手机可以切换到数字键盘。

【讨论】：

【解决方案2】：

这意味着 HTML 元素在正确的上下文中使用（不像表格用于设计目的），CSS 类以人类可理解的方式命名，并且文档本身具有非浏览器可以处理的结构客户端，例如屏幕阅读器、试图从文档中提取信息及其结构的自动解析器等。

例如，您使用列表来构建菜单。这样，残疾人的屏幕阅读器将知道这些列表项是同一菜单级别的一部分，因此它将按顺序阅读它们以供人们做出选择。

【讨论】：

【解决方案3】：

“元素的语义正确使用意味着您将它们用于它们的用途。这意味着您将表格用于表格数据而不是用于布局，这意味着您使用列表来列出事物, strong 和 em 用于强调文本等。”

【讨论】：

【解决方案4】：

HTML 元素是有意义的。 “语义正确”意味着您的元素意味着它们应该是什么。

例如，您的定义列表由代码中的<dl> 列表表示，您的缩写为<abbr>s 等。

【讨论】：

【解决方案5】：

我从来没有在纯粹的 CSS 上下文中听说过它，但是当谈到 CSS 和 HTML 时，它意味着使用正确的标签（例如，避免对非表格数据使用 table 标签），提供正确的值用于标识所包含数据是什么的类和 id（并酌情使用microformats），等等。

这一切都是为了确保您的数据能够被人类（一切都正确显示）和计算机（一切都被正确识别和标记）理解。

【讨论】：

不过，它也存在于纯 CSS 上下文中。考虑在span 内的替代文本上设置display: none 的不同图像替换黑客（例如FIR）。这在语义上是错误的，并导致屏幕阅读器软件在看到 CSS 时会跳过文本，即使它应该已经被阅读（毕竟，替代文本的存在正是为了盲人用户）。

【解决方案6】：

语义基本上意味着“意义的研究”。

通常当人们谈论代码在语义上正确时，他们指的是准确描述某事的代码。

在 (x)HTML 中，某些标签赋予它们所包含的内容以意义。例如：

H1 标记将其包含的数据描述为 1 级标题。 H2 标签将其包含的数据描述为 2 级标题。这背后的隐含含义是 H1 下的每个 H2 在某种程度上是相关的（即标题和副标题）。

当您以语义方式编码时，您基本上可以为您所描述的数据赋予意义。

考虑以下 2 个语义 VS 非语义示例：

<h1>Heading</h1>
<h2>Subheading</h2>

VS 非语义等价物：

<p><strong>Heading</strong></p>
<p><em>Subheading</em></p>

有时你可能会在辩论中听到人们说“你现在只是在谈论语义”，这通常是指说与对方意思相同但使用不同词语的行为。

【讨论】：