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

What does "semantically correct" mean?

提问by johnny

I have seen it a lot in css talk. What does semantically correct mean?

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

回答by Nathan Long

Labeling correctly

正确贴标

It means that you're calling something what it actually is. The classic example is that if something is a table, it should contain rows and columns of data. To use that for layout is semantically incorrect - you're saying "this is a table" when it's not.

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

Another example: a list (<ul>or <ol>) should generally be used to group similar items (<li>). You coulduse a divfor the group and a <span>for each item, and style each spanto be on a separate line with a bullet point, and it might look the way you want. But "this is a list" conveys more information.

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

Fits the ideal behind HTML

适合 HTML 背后的理想

HTML stands for "HyperText MarkupLanguage"; its purpose is to mark up, or label, your content. The more accurately you mark it up, the better. New elements are being introduced in HTML5 to more accurately label common web page parts, such as headers and footers.

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

Makes it more useful

让它更有用

All of this semantic labeling helps machines parse your content, which helps users. For instance:

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

• Knowing what your elements arelets browsers use sensible defaults for how they should look and behave. This means you have less customization work to do and are more likely to get consistent results in different browsers.
• Browsers can correctly apply your CSS (Cascading StyleSheets), describing how each type of content should look. You can offer alternative styles, or users can use their own; as long as you've labeled your elements semantically, rules like "I want headlines to be huge" will be usable.
• Screen readers for the blind can help them fill out a form more easily if the logical sections are broken into fieldsetswith one legendfor each one. A blind user can hear the legendtext and decide, "oh, I can skip this section," just as a sighted user might do by reading it.
• Mobile phones can switch to a numeric keyboard when they see a form input of type="tel"(for telephone numbers).

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

回答by Jamie Dixon

Semantics basically means "The study of meaning".

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

Usually when people are talking about code being semantically correct, they're referring to the code that accurately describes something.

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

In (x)HTML, there are certain tags that give meaning to the content they contain. For example:

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

An H1 tag describes the data it contains as a level-1 heading. An H2 tag describes the data it contains as a level-2 heading. The implied meaning behind this is that each H2 under an H1 is in some way related (i.e. heading and subheading).

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

When you code in a semantic way, you basically give meaning to the data you're describing.

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

Consider the following 2 samples of semantic VS non-semantic:

考虑以下 2 个语义 VS 非语义样本：

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

VS a non-semantic equivalent:

VS 非语义等价物：

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

Sometimes you might hear people in a debate saying "You're just talking semantics now" and this usually refers to the act of saying the same meaning as the other person but using different words.

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

回答by cakeforcerberus

"Semantically correct usage of elements means that you use them for what they are meant to be used for. It means that you use tables for tabular data but not for layout, it means that you use lists for listing things, strong and em for giving text an emphasis, and the like."

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

From: http://www.codingforums.com/archive/index.php/t-53165.html

来自：http: //www.codingforums.com/archive/index.php/t-53165.html

回答by Triptych

HTML elements have meaning. "Semantically correct" means that your elements meanwhat they are supposed to.

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

For instance, you definition lists are represented by <dl>lists in code, your abbreviations are <abbr>setc.

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

回答by Triptych

It means that HTML elements are used in the right context (not like tables are used for design purposes), CSS classes are named in a human-understandable way and the document itself has a structure that can be processed by non-browser clients like screen-readers, automatic parsers trying to extract the information and its structure from the document etc.

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

For example, you use lists to build up menus. This way a screen reader for disabled people will know these list items are parts of the same menu level, so it will read them in sequence for a person to make choice.

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

回答by Thomas Owens

I've never heard it in a purely CSS context, but when talking about CSS and HTML, it means using the proper tags (for example, avoiding the use of the table tag for non-tabular data), providing proper values for the class and id that identify what the contained data is (and using microformatsas appropriate), and so on.

我从来没有在纯 CSS 上下文中听过它，但是在谈论 CSS 和 HTML 时，这意味着使用适当的标签（例如，避免对非表格数据使用 table 标签），为类提供适当的值和 id 标识包含的数据是什么（并根据需要使用微格式），等等。

It's all about making sure that your data can be understood by humans (everything is displayed properly) and computers (everything is properly identified and marked up).

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