4

通常，当我编写 HTML5 文档时，我使用以下语法：

<header class="site-header">
    <hgroup class="site-brand">
        <h1 class="brand-name">
            Brand Name
        </h1>
        <h2 class="brans-slogan">
            Awesome Slogan
        </h2>
    </hgroup>
</header>
<article>
    <header class="article-header">
        <h1 class="article-title">Article Header</h1>
    </header>
    [... content ...]
</article>

它似乎是header站点标题的正确标签，但是在阅读了规范并概述了这段代码之后，我发现了两个缺点

  • header标签使其内容第一级，文章标题第二级
  • 站点标题可能根本不包含标题，因为它的目的是告诉用户该页面属于谁。

最好的方法是什么？

4

2 回答 2

1

您的第一个问题是您有两个 h1 标签。这不是正确的语义标记。您对标题标签是正确的，最好在该区域放置高级 h 标签。

话虽如此，您最初的问题是设计和内容架构问题。如果您要在文章正文中使用 h1，那么您应该选择不同的标签在页面标题中使用。

规范说，“标题元素通常包含一个部分的标题（一个 h1-h6 元素或 hgroup 元素），以及该部分的介绍性材料或导航帮助等内容。”

不过，它不必这样做。h1 标签（和标题标签）是页面的主要语义指标。您不想要 2 个 h1 标签或标头标签，但是这两个标签不必放在一起……但是如果您能以这种方式构建它，那就太好了。

于 2013-01-31T17:50:25.910 回答
0

您header在此示例中的使用是可以的。

但是，这里并不真正需要它。如果只包含h1-h6和hgroup，则不需要指定它是一个标题，因为它在定义上已经很清楚了。header如果您想包含其他内容，但不一定清楚它应该属于标题还是主要内容，这很有用。

但是header只使用标题并没有什么坏处，所以如果你喜欢它就继续使用它，CSS/JS 钩子需要它，将来可能包含额外的标题内容等等。

header标签使其内容第一级，文章标题第二级

我不明白你的意思。该header元素不影响文档大纲。这是一种区分介绍性内容和主要内容的方法。

站点标题可能根本不包含标题，因为它的目的是告诉用户该页面属于谁。

该header元素不必包含标题。例如，这个例子很好：

<article>
  <header>I visited Berlin last week and in this post I document what I liked about it.</header>
  <p>…&lt;/p>
</article>

该footer元素是相似的，对于某些内容，这两个元素都可能是合适的。

如果你想给文章作者添加属性，它会进入一个footer.

于 2013-02-01T16:43:50.797 回答