为什么选择HTML5语义化标签而非div标签？

Question

为什么要使用HTML5语义化标签，如headers、section、nav和article，而不是简单地使用div并将其设置为首选的css？

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

它们只是在使用时提供适当的标签名称，还是还有其他作用？

请解释一下。我查阅了许多网站，但没有找到这些基础知识。

Answer 1

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

语义一直是HTML的一部分，以某种形式存在。它帮助你理解页面上发生的事情。

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

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

如果你这样做：

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

与

<nav></nav>

或者

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

与

<aside></aside>

都没有问题，但后者对于你以及爬虫、阅读器等提供更好的可读性。

Answer 2

牛津词典如下所述：

正如它们的名称所示，这些标签旨在提高您的网页的含义。良好的语义在文档的自动处理中起着重要作用。这种自动处理比您意识到的要频繁 - 搜索引擎排名的每个网站都是从所有网站的自动处理中派生出来的。

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

然而，机器是愚蠢的，无法做到这一点： 看着与您相同的页面，网络爬虫只会看到一个图像，一系列锚点标签，一个文本节点，一个输入字段和一个带有链接的图像。底部还有另一个文本节点。 现在，他们应该如何知道您打算将文档的哪个部分作为导航或主要文章，或者一些不太重要的脚注？他们可以通过使用一些常见标准来分析您的文档结构来猜测特定元素的提示。 例如，内部链接的

列表很可能是某种页面导航，文档末尾的文本是对日常观看者来说必要但不太重要的内容（法律免责声明）。

现在想象一下，如果使用的是一个普通的

而不是

元素 - 机器立即知道这个元素的目的是什么：

// 机器：好的，这个结构看起来可能是一个导航元素？
<div><ul><li><a href="internal_link">...</div>

// 机器：啊，一个导航元素！
<nav><ul><li><a>...</nav>

现在，

标签内的文本 - 这显然是页面上最重要的信息！在左边，那个文本节点，图像和锚节点都属于同一组，因为它们都在

标签中分组，而在底部有一些文本在

元素中（他们仍然不知道该文本的含义，但现在他们可以推断出它是某种细则）。

示例：
作为用户（在不看实际标记的情况下阅读页面），您不在乎一个元素是包含在还是标签中。在大多数浏览器中，这两个标签将呈现相同 - 为斜体文本 - 只要它在周围的文本之间突出显示，它就能达到其目的。

然而，从语义角度来看有很大的区别：
意味着斜体 - 它只是对浏览器呈现它（斜体）的一种提示，不一定包含更深层次的语义信息。
意味着强调 - 它表示重要的信息。现在，浏览器不再受限于斜体指令，而可以以斜体、粗体、下划线或不同颜色呈现...对于视障人士，屏幕阅读器可以提高声音 - 无论在特定情况下哪种方法似乎最适合强调这一重要信息。

最后的思考：
语义标签并不是终点。还有元数据、本体论、资源描述语言等等，它们进一步帮助连接不同网页之间的数据，甚至可以帮助创建新的知识！

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

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是Politician的子类，Politician是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并且有棕色眼睛等等。

总之，良好的语义是非常酷的（但从技术层面上来说，难以实现和维护）。