英雄单位/展示的适当HTML 5元素是什么？

Question

许多营销和内容丰富的网站使用大文本和/或图像展示页面的主要内容,有时使用滑块,包含注册服务的号召性用语,或下载应用程序等.我是不知道这个设计元素叫什么,我从twitter bootstrap得到了术语英雄单位:

http://twitter.github.com/bootstrap/components.html#typography

我想大多数人都知道我要描述的内容......如果不清楚我可以添加截图或链接到这个问题.

我看了几个不同的网站,有些把这个英雄单位放在一个ASIDE元素中,其他人使用SECTION,ARTICLE甚至HEADER.再次使用twitter bootstrap作为示例:

<header class="jumbotron masthead">
  <div class="inner">
    <h1>Bootstrap, from Twitter</h1>
    <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
    <p class="download-info">

HEADER这种类型的内容是最合适的标签吗？或者我应该使用ASIDE,ARTICLE还是SECTION？

Answer 1

来自HTML5医生,他们讨论如何标记主要内容:

像屏幕阅读器这样的辅助技术可以找到主要内容,因为它是页面内不是标题,导航或页脚的第一件事.

所以我只想将你的"英雄单位"包裹起来section.页面上的每个相关内容组应该自己分组,section第一部分是主要内容的开头.

然而,我会建议经常使用HTML5大纲.@ net.uk.sweet的建议.另外,查看Mozilla开发者网络上的HTML概述文章,这对我很有帮助.

Answer 2

我建议您查看您正在考虑使用的每个标签的 w3 规范，并阅读描述和使用示例。当然，您只需要看看由一个看似简单的问题（例如何时使用文章标签）引发的争论就可以意识到这个东西是相当主观的。然而，阅读规范将使您能够更好地形成自己的观点：

1. http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
2. http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element
3. http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element
4. http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

我确实认为您的header标签应该包含在进一步的分段元素中，以便它在层次上不等于包含它的元素内的其他页面标题。该分区元素应该是什么将取决于“英雄单元”的内容以及该内容与页面其余部分的关系。

最后，经常在HTML5 文档大纲中检查您的工作，以了解新部分以及包含该部分的页面的结构。