Html 为什么使用 HTML5 语义标签而不是 div？

Why use an HTML5 semantic tag instead of div?

提问by Rajaram Shelar

Why use HTML5 semantic tags like headers, section, nav, and articleinstead of simply divwith the preferred cssto it?

为什么要使用 HTML5 语义标签，如headers、section、nav和 ，article而不是简单地div使用首选css？

I created a webpage and used those tags, but they do not make a difference from div. What is their main purpose?

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

Is it only for the appropriate names for the tags while using it or more than that?

是否仅适用于使用时标签的适当名称或更多？

Please explain. I have gone through many sites, but I could not find these basics.

请解释。我浏览了很多网站，但找不到这些基础知识。

回答by Christoph

As their name says, this is for semantic purposes only. It's for improving the automated processing of documents. Automated processing happens more often than you realize - each website ranking from search engines is derived from automated processing of all the website out there.

正如他们的名字所说，这仅用于语义目的。它用于改进文档的自动化处理。自动处理发生的频率比您意识到的要多 - 来自搜索引擎的每个网站排名都源自对所有网站的自动处理。

If you visit a web page, you as the human reader can immediately (visually) distinguish all the page elements and more importantly understandthe content.

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

However, machines are dumb and cannot do this: Imagine a web-crawler or a screenreader trying to analyze your webpage with divs everywhere. How shall they know, what part of the document you intended to be the navigation or the main article, or some not-so-important sidenote? They could guessby analyzing your document structure using some common criteria which are a hint for a specific element. E.g. an ullist of internal links is most likely some kind of page navigation. However if instead a navelement would be used, the machine immediately knows what the purpose of this element is.

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

Example: You, as the user (reading a page without seeing the actual markup), don't care if an element is enclosed in an <i>or <em>tag. Probably in most browsers it will be rendered as italic text, and as long as it stands out of the text to easily recognize it, you are okay with it.
However, there is a bigger difference in terms of semantics: <i>simply means italic - it's a presentational hint for the browser and does not necessarily contain deeper semantic information. <em>however means emphasize, which semantically indicates an important piece of information. Now the browser is not bound to the italicinstruction any more, but could render it visually in italic or bold or underlined or in a different color... For visually impaired persons, the screenreaders can raise the voice - whatever method seems most suited in a specific situation to emphazize this important information.

示例：作为用户（阅读页面但未看到实际标记），您并不关心元素是否包含在<i>or<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>

回答by pai.not.pi

There's a nice little article on HTML5 semantics on HTML5Doctor.

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

Semantics have been a part of HTML in some form or another. It helps you understand what's happening where on the page.

语义已经以某种形式成为 HTML 的一部分。它可以帮助您了解页面上发生的事情。

Earlier when <div>was used for pretty much everything, we still implemented semantics by giving it a "semantic" class name or an id name.

早些时候，当<div>几乎所有东西都被使用时，我们仍然通过给它一个“语义”类名或 id 名称来实现语义。

These tags help in proper structuring and understanding of the layout.

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

If you do,

如果你这样做，

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

as opposed to,

相反，

<nav></nav>

OR

或者

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

as opposed to,

相反，

<aside></aside>

there's nothing wrong, but the latter helps in providing better readability for you as well as crawlers, readers, etc..

没有错，但后者有助于为您以及爬虫、阅读器等提供更好的可读性。

回答by scottperison

In the divtag you have to give an id which tells about what kind of content it is holding, either body, header, footer, etc.

在div标签中，您必须提供一个 id 来说明它所持有的内容类型，包括正文、页眉、页脚等。

While in case of semantic elements of HTML5, the name clearly defines what kind of code it is holding, and it is for which part of the website.

而在HTML5语义元素的情况下，名称清楚地定义了它所持有的代码类型，以及它用于网站的哪个部分。

Semantic elements are <header>, <footer>, <section>, <aside>, etc.

语义元素是<header>，<footer>，<section>，<aside>，等。