为什么选择HTML5语义化标签而非div标签?
P粉806834059
P粉806834059 2023-08-22 23:00:37
0
2
544
<p>为什么要使用HTML5语义化标签,如<code>headers</code>、<code>section</code>、<code>nav</code>和<code>article</code>,而不是简单地使用<code>div</code>并将其设置为首选的<code>css</code>?</p> <p>我创建了一个网页并使用了这些标签,但它们与<code>div</code>并没有什么区别。它们的主要目的是什么?</p> <p>它们只是在使用时提供适当的标签名称,还是还有其他作用?</p> <p>请解释一下。我查阅了许多网站,但没有找到这些基础知识。</p>
P粉806834059
P粉806834059

全部回复(2)
P粉262926195

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

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

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

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

如果你这样做:

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

<nav></nav>

或者

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

<aside></aside>

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

P粉200138510

牛津词典如下所述:

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

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

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

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

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

    而不是
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板