语义HTML5元素属性 [英] Semantic HTML5 element properties

问题描述

HTML5引入了许多语义元素（< nav> ; ，< section> ，< article> 等）。但除了帮助阅读和构建我们的HTML，他们还有其他独特的属性吗？或者它们实质上只是< div> s有不同的名字？看来后者是真的。

我一直在阅读关于语义的内容，但找不到直接答案。

< nav> ，< section> >，< article> 等元素没有任何特殊属性暴露给前端JavaScript代码;相反，他们都只是使用 HTMLElement div 元素没有。

屏幕阅读器可以宣布文档的某个部分是部分或文章，并允许屏幕阅读器用户浏览文档部分 -by - 部分，或者更轻松地跳转到文章 s。

也就是说，屏幕阅读器还允许用户通过跳转到 h1 - h6 标题 - 不管这些标题是在部分还是文章元素中 - 因此对于屏幕阅读器用户这实际上是更重要的，你的文件有很好的我nformative h1 - h6 标题和逻辑结构

HTML5 introduced many semantic elements (<nav>, <section>, <article>, etc.). But aside from helping read and structure our HTML, do they have any other unique properties? Or are they essentially just <div>s with different names? It seems like the latter is true.

I keep reading about the "semantics" but can't find a direct answer.

解决方案

The <nav>, <section>, <article>, etc., elements don’t have any special properties that are exposed to frontend JavaScript code; instead they all just use the HTMLElement interface.

However, they do have special properties in screen readers—in that they get announced to screen-reader users in a special way that a div element doesn’t.

Screen readers can announce that a certain part of a document is a section or article, and allow screen-reader users to navigate through the document section-by-section, or to more easily jump among articles.

That said, screen readers also enable users to easily navigate through a document by jumping among its h1-h6 headings—regardless of whether those headings are in section or article elements—so for screen-reader users it’s actually more important that your documents have good informative h1-h6 headings and a logical structure.

这篇关于语义HTML5元素属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！