为什么要使用HTML5语义标记而不是div [英] Why to use HTML5 semantic tag instead of div

问题描述

为什么使用 headers 部分 nav css c> 而不是简单的 div 到它。我创建了一个网页，并使用那些标签，但他们不区分div。他们的主要目的是什么。是只为适当的名称的标签，而使用它或更多？请解释我已经经历了许多网站，但找不到这些基础。

Why to use Html5 semantic tags like headers section nav article instead of simply div with the preferred css to it. I created a webpage and used those tags but they do not make difference from div. What is their main purpose. 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 could not find these basics.

推荐答案

正如他们的名字所说，只要。它用于改进文档的自动处理。自动化处理比您实现更频繁 - 搜索引擎中的每个网站排名来自对所有网站的自动处理。

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 understand the content.

然而，机器是愚蠢的这样做：
想象一下，网页抓取工具或者screenreader试图用div分析你的网页。他们怎么知道，你打算作为导航或主要文章的文档的哪一部分，或一些不那么重要的sidenote？他们可以通过使用一些通用标准（它们是特定元素的提示）分析您的文档结构来 。例如。 ul 内部链接列表很可能是某种类型的页面导航。然而，如果使用 nav 元素，则机器立即知道该元素的目的是什么。

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 guess by analyzing your document structure using some common criteria which are a hint for a specific element. E.g. an ul list of internal links is most likely some kind of page navigation. However if instead a nav element would be used, the machine immediately knows what the purpose of this element is.

示例：作为用户（读取一个没有看到实际标记的页面），不关心元素是否包含在< i> 或< em> 标记。可能在大多数浏览器中，它将被渲染为斜体文本，只要它突出了文本以容易识别它，你就可以了。

然而，有更大的区别语义：< i> 只是意味着斜体 - 它是浏览器的呈现提示，不一定包含更深层次的语义信息。 < em> 但是意味着强调，这在语义上表示重要的信息。现在，浏览器不再绑定到 italic 指令，而是可以用斜体或粗体或下划线或不同的颜色呈现它。对于视觉障碍人士，屏幕阅读器可以提高语音 -

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 italic instruction 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.

// 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！