61

为什么要使用 HTML5 语义标签，如headers, section, nav, 而article不是简单地div使用首选css呢？

我创建了一个网页并使用了这些标签，但它们与div. 他们的主要目的是什么？

是否仅适用于使用标签时的适当名称或更多？

请解释。我浏览了很多网站，但我找不到这些基础知识。

4

3 回答 3

84

牛津词典指出：

语义学：与意义有关的语言学和逻辑学分支。

正如他们的名字所说，这些标签旨在提高您网页的含义。良好的语义在文档的自动化处理中起着重要作用。这种自动处理发生的频率比您意识到的要多——搜索引擎中的每个网站排名都来自对所有网站的自动处理。

如果您访问（设计良好的）网页，作为人类读者，您可以立即（视觉）区分所有页面元素，更重要的是理解内容。在左上角，您会看到公司徽标，旁边是网站导航，有一个搜索栏和一些关于公司的文字，一个您可以购买的产品的链接以及底部的法律免责声明。

然而，机器是愚蠢的，无法做到这一点：与您查看同一页面，网络爬虫看到的只是一张图片、一个锚标签列表、一个文本节点、一个输入字段和一张带有链接的图片。在底部有另一个文本节点。现在，他们应该怎么知道，您打算将文档的哪一部分作为导航或主要文章，或者一些不那么重要的脚注？他们可以通过使用一些通用标准来分析您的文档结构来猜测，这些标准是特定元素的提示。例如ul，内部链接列表很可能是某种页面导航，文档末尾的文本是必要的，但对日常查看者来说并不那么重要（法律免责声明）。

div现在想象一下，将使用一个元素而不是一个普通的nav元素——机器立即知道这个元素的目的是什么：

// machine: okay, this structure looks like it might be a navigation element?
<div><ul><li><a href="internal_link">...</div>

// machine: ah, a navigation element!
<nav><ul><li><a>...</nav>

现在是标签内的文本main——这显然是页面中最重要的信息！在左边，那个文本节点，图像和锚节点都属于一起，因为它们被分组在一个section标签内，而在底部有一些文本在一个footer元素中（他们仍然不知道那个文本，但现在他们可以推断出它是某种精美的印刷品）。

示例：
您作为用户（在没有看到实际标记的情况下阅读页面）并不关心元素是否包含在<i>or<em>标记中。在大多数浏览器中，这两个标签都会以相同的方式呈现——作为斜体文本——只要它在周围的文本之间突出，它就可以达到它的目的。

但是，在语义方面存在很大差异：
<i>表示斜体 - 它只是浏览器关于如何呈现它的表示提示（斜体），不一定包含更深层次的语义信息。
<em>意味着强调 - 它表示一条重要的信息。现在浏览器不再受斜体指令的约束，而是可以用斜体、粗体、下划线或不同的颜色来渲染它……对于视障人士，屏幕阅读器可以提高声音——无论哪种方法看起来最适合具体情况来强调这一重要信息。

最后的想法：
语义标签不是结束。元数据、本体、资源描述语言等内容更进一步，有助于在不同网页之间连接数据，甚至可以帮助创建新知识！

例如，维基百科在语义呈现数据方面做得非常糟糕。

https://en.wikipedia.org/wiki/Barack_Obama
https://en.wikipedia.org/wiki/Donald_Trump
https://en.wikipedia.org/wiki/Joe_Biden

这三个人都是在某个时间点担任美国总统的人。

所有三篇文章都包含一个显示这些信息的侧边栏，您可以比较它们（通过打开两个页面然后来回切换），但它们没有语义描述。相反，如果维基百科使用本体来描述一个人：http ://dbpedia.org/ontology/Person

<!-- President is a subclass of Politician which is a subclass of Person -->
<President> 
    <birthname>Barrack Hussein Obama II</birthname>
    <birthdate>1961-08-04</birthdate>
    <headOf>country::USA</headOf>
    <tenure>2009-01-20 – 2017-01-20</tenure>
</President>

您（和机器）现在不仅可以直接比较这三个（在动态生成的页面上！），而且您甚至可以创建新知识，例如显示美国所有总统的列表 - 很无聊但也很酷的东西，比如谁是现任世界领导人，我们有多少女性世界领导人，谁是最年轻的领导人，有多少类型的领导人（总统/皇帝/女王/独裁者），谁任职时间最长，其中有多少是身高超过175cm，有棕色眼睛等。

总之，良好的语义非常酷（但在技术层面上也很难实现和维护）。

于 2013-06-24T09:44:10.523 回答
13

HTML5Doctor上有一篇关于 HTML5 语义的不错的小文章。

语义已经以某种形式成为 HTML 的一部分。它可以帮助您了解页面上发生的情况。

早些时候，当<div>几乎所有东西都使用时，我们仍然通过给它一个“语义”类名或一个 id 名来实现语义。

这些标签有助于正确构建和理解布局。

如果你这样做，

<div class="nav"></div>

相反，

<nav></nav>

或者

<div class="sidebar"></div>

相反，

<aside></aside>

没有错，但后者有助于为您以及爬虫、阅读器等提供更好的可读性。

于 2013-06-24T09:54:49.673 回答
2

在div标签中，您必须提供一个 id 来说明它所持有的内容类型，包括正文、页眉、页脚等。

而对于 HTML5 的语义元素，名称清楚地定义了它所持有的代码类型，以及它适用于网站的哪个部分。

语义元素是<header>, <footer>, <section>,<aside>等。

于 2013-06-24T09:48:21.813 回答