语义HTML5元素属性

Question

HTML5引入了许多语义要素 (<nav>、<section>、<article>等)。但是，除了帮助读取和构造HTML之外，它们还有其他独特的属性吗？或者，它们本质上只是具有不同名称的<div>？似乎后者是真的。

我一直在读关于“语义学”的文章，但找不到直接的答案。

Answer 1

<nav>、<section>、<article>等元素没有暴露于前端JavaScript代码的任何特殊属性；相反，它们都只是使用接口。

但是，它们在屏幕阅读器中确实具有特殊的属性--它们是以一种div元素没有的特殊方式通知屏幕阅读器用户的。

屏幕阅读器可以宣布文档的某一部分是section或article，并允许屏幕阅读器用户浏览文档sectionby-section，或者更容易地在article之间跳转。

也就是说，屏幕阅读器还可以让用户在h1-h6标题之间跳过，从而轻松地浏览文档--不管这些标题是在section还是article元素中--因此对于屏幕阅读器用户来说，更重要的是您的文档具有信息丰富的h1-h6标题和逻辑结构。

Answer 2

语义元素是描述内容的元素。它们向浏览器提供更多信息，而不需要任何额外的属性。

当您在网页中添加语义时，考虑到微格式，您应该考虑在适当的时候使用微格式来添加更多的意义。微格式在HTML (通常在元素的class属性中)中使用可读的文本来定义内容。

微格式添加有关元素的语义信息，这些信息已经在某些情况下使用。

​

​

上图显示谷歌搜索电影“安德的游戏”的评论。第二和第三个结果显示了“丰富的片段”，包括像星级这样的信息。

谷歌和必应都在使用这些类型的丰富片段来增强他们的搜索结果，而且他们使用的大多数数据都是使用微格式进行语义标记的HTML。您可以在我的书“Sams Teach You HTML5 Mobile Application Development在24小时内”中了解有关如何使用微格式的更多信息。

通过编写语义HTML，您可以向用户代理提供更多的信息，以便正确地显示这些信息。例如，如果屏幕阅读器看到了元素，它就知道这是页面的要点，并且在读取元素中的任何内容之前，它都会大声读出来。另外，随着网页变得越来越复杂，用户代理对它们所做的事情也变得越来越复杂。例如，在未来，你的语义标记食谱可以告诉一个准备好网络的冰箱什么时候提醒机器人管家开始烤肉。