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

Question

为什么要使用HTML5语义标记喜欢headers，section，nav，和article的，而不是简单地div用首选css呢？

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

是否仅在使用时为标签指定了适当的名称？

请解释。我已经浏览了许多站点，但是找不到这些基础知识。

Answer 1

顾名思义，这仅是出于语义目的。它用于改善文档的自动化处理。自动化处理比您想像的要多得多-搜索引擎对每个网站的排名都来自对所有网站的自动化处理。

如果您访问网页，作为普通读者，您可以立即（视觉上）区分所有页面元素，更重要的是 理解 其内容。

但是，机器很笨，无法做到这一点：想象一下，一个Web爬网程序或一个屏幕阅读器试图在各处使用divs分析您的网页。他们怎么知道，您打算将文档的哪一部分作为导航或主要文章，或一些不太重要的旁注？他们可以通过使用一些通用标准来分析您的文档结构来
猜测 ，这是对特定元素的提示。例如ul，内部链接列表很可能是某种页面导航。但是，如果改为使用某个nav元素，则机器会立即知道该元素的用途。

示例：作为用户（您在阅读页面时没有看到实际的标记），您并不关心元素是否包含在<i>或<em>标记中。可能在大多数浏览器中，它将显示为斜体文本，并且只要它在文本中突出显示即可轻松识别，您就可以了。
但是，在语义方面存在较大差异：<i>只是表示斜体-
这是浏览器的提示性提示，不一定包含更深的语义信息。<em>但是，意思是强调，即从语义上指示重要的信息。现在，浏览器不再 局限于斜体
指令，但可以用斜体，粗体，下划线或其他颜色在视觉上呈现…对于视障人士，屏幕阅读器可以提高声音-在特定情况下，最适合强调此重要信息的任何方法。

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

// machine: ah, a navigation element!
<nav class="some-meaningless-class"><ul><li><a>...</nav>