Warum sollten Sie semantische HTML5-Tags anstelle von div-Tags wählen?
P粉806834059
P粉806834059 2023-08-22 23:00:37
0
2
475
<p>Warum semantische HTML5-Tags wie <code>headers</code>, <code>section</code>, <code>nav</code> und <code>article</code> verwenden? Anstatt einfach <code>div</code> zu verwenden und es auf das bevorzugte <code>css</code> festzulegen? </p> <p>Ich habe eine Seite erstellt und diese Tags verwendet, aber sie unterscheiden sich nicht von <code>div</code>. Was ist ihr Hauptzweck? </p> <p>Stellen sie bei der Verwendung nur den entsprechenden Labelnamen bereit oder machen sie etwas anderes? </p> <p>Bitte erklären Sie es. Ich habe viele Websites überprüft, konnte diese Grundlagen jedoch nicht finden. </p>
P粉806834059
P粉806834059

Antworte allen(2)
P粉262926195

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

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

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

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

如果你这样做:

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

<nav></nav>

或者

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

<aside></aside>

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

P粉200138510

牛津词典如下所述:

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

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

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

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

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

    而不是
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!