为什么要使用HTML5语义标记而不是div? [英] Why use an HTML5 semantic tag instead of div?
问题描述
为什么要使用诸如headers，section，nav和article的HTML5语义标记，而不是简单地将div与首选的css一起使用?
我创建了一个网页并使用了这些标签，但它们与div没有什么区别.他们的主要目的是什么?
仅在使用时为标签使用适当的名称还是更多?
请解释.我已经浏览了许多站点，但是找不到这些基础知识.
顾名思义，这仅是出于语义目的.它用于改善文档的自动化处理.自动化处理比您想像的要多得多-搜索引擎对每个网站的排名都来自对所有网站的自动化处理.
如果您访问网页，您作为人类读者可以立即(视觉上)区分所有页面元素，更重要的是了解内容.
但是，机器很笨，无法执行以下操作:
想象一下，一个网络爬虫或一个屏幕阅读器试图用无处不在的divs分析您的网页.他们怎么知道，您打算将文档的哪一部分作为导航或主要文章，或一些不太重要的旁注?他们可以使用一些通用标准来分析您的文档结构，从而猜测特定的元素.例如.内部链接的ul列表很可能是某种页面导航.但是，如果改为使用nav元素，则计算机会立即知道该元素的用途.
示例:作为用户(阅读页面而没有看到实际的标记)，您无需关心元素是否包含在<i>或<em>标记中.可能在大多数浏览器中，它都将显示为斜体文本，并且只要它在文本中突出显示即可轻松识别，就可以了.
但是，在语义方面存在更大的差异:<i>只是表示斜体-这是浏览器的提示性提示，不一定包含更深的语义信息.但是<em>表示强调，从语义上讲是一条重要的信息.现在，浏览器不再受 italic 指令的束缚，而是可以以斜体，粗体，下划线或其他颜色可视化呈现...对于视障人士，屏幕阅读器可以提高声音-在特定情况下，最适合强调此重要信息的任何方法.
// 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>
Why use HTML5 semantic tags like headers, section, nav, and article instead of simply div with the preferred css to it?
I created a webpage and used those tags, but they do not make a 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 I 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.
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.
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屋！
