为什么要使用HTML5语义标签,如headers,section,nav,和article而不是简单地div与首选css呢？
我创建了一个网页并使用了这些标签,但它们并没有什么区别div.他们的主要目的是什么？
是否仅在使用标签时使用适当的标签名称或更多？
请解释.我经历了很多网站,但我找不到这些基础知识.
Chr*_*oph 79
正如他们的名字所说,这仅用于语义目的.它用于改进文档的自动处理.自动处理的发生频率超出您的意识 - 从搜索引擎排名的每个网站都源自所有网站的自动处理.
如果您访问网页,您作为人类读者可以立即(视觉上)区分所有页面元素,更重要的是了解内容.
然而,机器是愚蠢的,不能这样做:想象一个网络爬虫或屏幕阅读器试图分析你的网页到处都是div.他们怎么知道你想要成为导航或主要文章的文件的哪一部分,或者一些不那么重要的旁注？他们可以通过使用一些通用标准分析您的文档结构来猜测,这些标准是特定元素的提示.例如ul,内部链接列表很可能是某种页面导航.但是,如果使用一个nav元素,机器会立即知道这个元素的用途是什么.
例如:您作为用户(阅读页面没有看到实际的标记),不如果一个元素被封闭在一个照顾<i>或<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>
ta-*_*run 12
关于HTML5Doctor的 HTML5语义有一篇很好的小文章.
语义已经以某种形式成为HTML的一部分.它可以帮助您了解页面上发生的情况.
早些时候<div>几乎用于所有事情,我们仍然通过给它一个"语义"类名或id名来实现语义.
这些标签有助于正确构建和理解布局.
如果你这样做,
<div class="nav"></div>
相反,
<nav></nav>
要么
<div class="sidebar"></div>
相反,
<aside></aside>
没有什么不对,但后者有助于为您以及爬虫,读者等提供更好的可读性.
| 归档时间： |
|
| 查看次数： |
36311 次 |
| 最近记录： |