为什么要使用HTML5语义标记而不是div?
为什么要使用HTML5语义标记喜欢headers
,section
,nav
,和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