Question

许多营销和内容丰富的网站使用大文本和/或图片展示网页的主要内容，有时使用滑块，包含注册服务的号召性用语，或下载应用等。我不确定这个设计元素的名称是什么，我从twitter bootstrap获得了术语“英雄单位”：

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

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

我查看了几个不同的网站，有些网站将此英雄单元放在ASIDE元素中，其他人使用SECTION，ARTICLE甚至HEADER。 Using twitter bootstrap as an example again：

<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 doctor，他们讨论如何标记主要内容：

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

所以我只需将你的“英雄单位”包裹在section中。页面上的每个相关内容组应分组在其自己的section中，第一部分是主要内容的开头。

然而，我会建议经常使用HTML5大纲。@ net.uk.sweet的建议。另外，请查看Mozilla Developers Network上的HTML概述文章，这对我非常有帮助。

Answer 2

我建议您查看您正在考虑使用的每个标签的w3规范，并阅读说明和用法示例。当然，你只需要看看由when to use an article tag这个看似简单的问题所产生的争论，就会发现这些东西是非常主观的。但是，阅读规范将使您更好地制定自己的观点：

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

我认为您的header标记应该包含在另一个切片元素中，这样它在层次上不等于包含它的元素中的其他页眉。该分区元素应该取决于您的“英雄单元”的内容以及该内容与页面其余部分的关系。

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

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

2 个答案: