为什么要使用 HTML5 语义标签而不是 div？

Question

Why use HTML5 semantic tags like headers , section , nav , and article instead of simply div with the首选 css 到吗？

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

它只是在使用标签时使用适当的名称还是不止于此？

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

原文由 Rajaram Shelar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

牛津词典指出：

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

顾名思义，这些标签旨在改善网页的含义。良好的语义对文档的自动化处理起着重要作用。这种自动处理的发生频率比您想象的要高 - 每个网站在搜索引擎中的排名都来自于对所有网站的自动处理。

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

然而，机器是愚蠢的，无法做到这一点：查看与您相同的页面，网络爬虫只会看到一张图片、一个锚标签列表、一个文本节点、一个输入字段和一张带有链接的图片。在底部有另一个文本节点。现在，他们怎么知道您打算将文档的哪一部分作为导航或主要文章，或者一些不太重要的脚注？他们可以通过使用一些通用标准分析您的文档结构来 _猜测_，这些标准是对特定元素的提示。例如 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> 或 <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，棕色眼睛等。

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

原文由 Christoph 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

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

如果你这样做，

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

相反，

 <nav></nav>

要么

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

相反，

 <aside></aside>

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

原文由 painotpi 发布，翻译遵循 CC BY-SA 4.0 许可协议