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

Question

这个问题在这里已经有了答案:





Why should I use 'li' instead of 'div'?

(15 个回答)



Are new HTML5 elements like <section> and <article> pointless? [closed]

(8 个回答)



Why use HTML5 tags? [duplicate]

(1 个回答)


8年前关闭。




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

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

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

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

Answer 1

《牛津词典》指出:

semantics: the branch of linguistics and logic concerned with meaning.

顾名思义，这些标签旨在改善您网页的含义。良好的语义在文档的自动化处理中起着重要作用。这种自动处理发生的频率比您意识到的要多 - 来自搜索引擎的每个网站排名都源自对所有网站的自动处理。
如果您访问(设计良好的)网页，您作为人类读者可以立即(视觉上)区分所有页面元素，更重要的是理解内容。在左上 Angular ，您会看到公司徽标，旁边是站点导航，有一个搜索栏和一些关于公司的文本，您可以购买的产品链接和底部的法律免责声明。
然而，机器是愚蠢的，不能做到这一点:
查看与您相同的页面，网络爬虫将看到的只是一个图像、一个 anchor 标签列表、一个文本节点、一个输入字段和一个带有链接的图像。在底部有另一个文本节点。
现在，他们怎么知道您打算将文档的哪一部分作为导航或主要文章，或者一些不那么重要的脚注？他们可以通过使用一些常见标准来分析您的文档结构来猜测，这些标准是特定元素的提示。
例如。 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标签——这显然是页面最重要的信息!在左边，那个文本节点、图像和 anchor 节点都属于一起，因为它们被分组在一个 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>

您(和机器)现在不仅可以直接比较这三者(在动态生成的页面上!)，而且您甚至可以创建新知识，例如显示美国所有总统的名单(很无聊)，谁都是现任世界领导人，我们有多少女性世界领导人，谁是最年轻的领导人，有多少类型的领导人(总统/皇帝/皇后/独裁者)，谁服役时间最长，有多少高度超过 175 厘米，棕色眼睛等。
总之，良好的语义非常酷(但在技术层面上也很难实现和维护)。