Question

通常，当我编写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似乎是网站标题的正确标记，但在阅读spec和outlining this code之后，我发现了两个缺点

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

最好的方法是什么？

Answer 1

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

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

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

但是，它没有必要。 h1标签（和标题标签）是页面的主要语义标记。你不需要2个h1标签或标头标签，但是这两个标签不需要一起......但如果你能用它那么构建它就很好。

Answer 2

您在此示例中使用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>…</p> </article>

footer element类似，对于某些内容，这两个元素都适用。

如果您想要归档文章作者，则会进入footer。

站点标题的语义标记，即使是大纲

2 个答案: