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

Posted 2023-02-24

【中文标题】站点标题的语义标记，即使使用大纲

【英文标题】：Semantic markup for site header, even with outliner

【发布时间】：2013-01-15 19:34:39

【问题描述】：

通常，当我编写 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标签将其内容设为第一级，文章标题设为第二级 网站标题可能根本不包含标题，因为它的目的是告诉用户该页面属于谁。

最好的方法是什么？

【参考方案1】：

您在本例中使用 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】：

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

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

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

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

【讨论】：

从语义上讲，在带有分段元素的 HTML5 页面中使用多个（或仅！）h1 完全没问题。

你能引用那个断言吗？因为我可以显示任何类型的盲人文档阅读器（一种依赖于语义标记的设备）会在单个页面中抛出多个 h1 的错误。您可能有多个 h 标签，但不是 h1。即使这样，h2-6 也必须正确排列。

我同意 unor：我从未见过任何文档表明 h1 每页只能使用一次。我认为你在这一点上给我们一些参考是更合乎逻辑的。

正如我所说，语义上。 HTML5 规范 says：“部分可能包含任何级别的标题，但强烈建议作者要么仅使用 h1 元素，要么使用适当级别的元素作为部分的嵌套级别。”可访问性是另一个问题。支持 HTML5 的屏幕阅读器应该不会对 h1-only 有问题。老屏幕阅读器也需要h2-h6，因为他们不知道/理解 HTML5 大纲。注意：特定版本的 JAWS 只能与 h1 一起使用 - 仅适用于 HTML5 文档（错误）。

LOL...这绝对是一个棘手的问题...WHATWG 尚未同意语义标准...您所做的只是引用当前（和不断变化的）html5 规范.参与辅助技术的主要公司之一 WebAIM 表示，“页面应该以分层方式构建，一级标题 (