17

许多营销和内容密集型网站使用大文本和/或图像展示页面的主要内容，有时使用滑块，包含注册服务或下载应用程序等的号召性用语。我是不知道这个设计元素叫什么，我从 twitter bootstrap 中得到了 hero unit 一词：

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?

4

2 回答 2

9

来自HTML5 doctor，他们讨论了如何标记主要内容：

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

所以我会把你的“英雄单位”包装在一个section. 页面上的每个相关内容组都应分组在自己的section中，第一部分是主要内容的开始。

不过，我会第二次 @net.uk.sweet 建议经常使用 HTML5 大纲。另外，查看Mozilla Developers Network上的 HTML 大纲文章，它对我很有帮助。

于 2012-06-19T09:14:12.480 回答
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 文档大纲中检查您的工作，以了解新部分的结构和包含它的页面。

于 2012-06-19T00:29:18.637 回答