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

为什么要使用HTML5语义标记喜欢headerssectionnav,和article的,而不是简单地div用首选css呢?

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

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

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

回答:

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

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

但是,机器很笨,无法做到这一点:想象一下,一个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>

以上是 为什么要使用HTML5语义标记而不是div? 的全部内容, 来源链接: utcz.com/qa/400112.html

回到顶部