做副标题的最语义正确的方法是啥？

Posted 2023-02-24

【中文标题】做副标题的最语义正确的方法是啥？

【英文标题】：What's the most semantically correct way to do subheadings?做副标题的最语义正确的方法是什么？

【发布时间】：2011-05-24 06:46:06

【问题描述】：

制作副标题或副标题的语义最正确的方法是什么？下面的例子。

---

关于

^{我们卖苹果，耶！}

Lorem ipsum...

---

由于与实际的信息标题相比，副标题的内容并不重要，我认为屏幕阅读器和搜索引擎不应将它们视为单独的标题。

所以，我想到的选项如下：

<h2>About</h2><h3>We sell apples, yay!</h3> -> 这是我想避免的。 <h2>About</h2><span class="subheading">We sell apples, yay!</span> -> 有效。这是最好的方法吗？不知道。 <h2>About<span class="subheading">We sell apples, yay!</span></h2> -> 部分标题。我真的不知道这是好事还是坏事。

对此有何建议？

【问题讨论】：

如果您不认为您的子标题足够重要而不能作为实际标题，那么您为什么要使用它们呢？为什么，具体来说，你反对使用各种<H2>/<H3>/等。标签？

@Cody 我考虑像“我们卖苹果，耶！”这样的台词。更像是一个装饰元素而不是一个标题。署名似乎是恰当的术语。

谁告诉你你的意思是使用“署名”这个词是错误的。 “署名”是“新论文中指明文章作者的一行”。从字面上看，它是一条“线”，显示了文章的“作者”。我认为您的意思是“副标题”（定义 2），牛津美国人将其定义为“已发表作品或文章的从属标题，提供有关其内容的附加信息。”

@AlanH。我想你是对的。太久了，我不记得我从哪里得到这个词了。谢谢！ :)

【参考方案1】：

规格

https://www.w3.org/TR/html51/common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines

h1–h6 元素不得用于标记副标题、副标题、 替代标题和标语，除非打算作为标题 一个新的部分或小节。

标题应该有助于构成文档的大纲。 Microsoft Word 中的文档大纲（也使用标题 1 到 6）是这个概念的一个很好的例子。标题通常用作（或有可能用作）某些附加信息主体的标题，即“与它们相关联的部分的标题”。

如果内容不能帮助形成文档的大纲并且没有可能成为其他信息的标题，那么它可能不属于 H[1-6] 标记。

示例

标题通常包含一个组介绍性或导航帮助。 _{http://www.w3.org/TR/html51/sections.html#the-header-element，强调我的。}

<header>
    <h1>About</h1>
    <div class="subtitle">We sell apples, yay!</div>
</header>

<style>
    header .subtitle color: blue; 
</style>

【讨论】：

感谢您提供正确的术语。如果不是因为 nikc 的回答，我会接受你的（如果它们都同样有帮助，你不能接受多个答案）+1 为你 :)

网站标题呢？我应该用什么来写博客描述？因为<header> 已经是容器，所以我不能再放另一个<header>。过去人们使用<hgroup>（内部有<h1> 和<h2>），但由于它不再支持......

适用术语是“副标题”，而不是“署名”。

【参考方案2】：

HTML5 通过hgroup 标签解决了这个问题。使用它。

如果您觉得您还没有准备好迁移，那么我会说您在标记标题时仍然应该使用正确的标题标签。如果您不喜欢将两个标题标记为同级，也许您可​​以调整您的副本以将标题数量减少到一个。

编辑：

自撰写本文以来，hgroup 的未来已岌岌可危：http://dev.w3.org/html5/status/issue-status.html#ISSUE-164

编辑 2：

自 2013 年 4 月 2 日起，hgroup 已从规范中删除： http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html

（来源：https://twitter.com/iandevlin/status/318961224836587521）

【讨论】：

+1 表示 HTML 5 对此类情况有更好的支持。

我不知道有这样的标签。谢谢！

自撰写本文以来，hgroup 的未来已岌岌可危：dev.w3.org/html5/status/issue-status.html#ISSUE-164

@nikc.org 那么既然 hgroup 已经过时了，那么正确的解决方案是什么？

@deathlock - 使用header 对内容进行分组似乎是一个合适的习惯用法。请参阅我的更新答案和w3.org/TR/html51/common-idioms.html#sub-head

【参考方案3】：

我真的很喜欢 Toby Inkster 的建议：http://lists.w3.org/Archives/Public/public-html/2010Nov/0405.html 作为 HTML5 提议的 <hgroup> 元素的替代方案，这对于许多网络作者来说似乎是一个难以掌握的概念。 （参见 Bruce Lawson 的帖子开头。）Toby 建议：

<h2>
  <span>About<span>
  <small>We sell apples, yay!</small>
</h2>

【讨论】：

在标题中使用small标签作为子标题是not advised by the HTML working group。

如果您使用 Bootstrap，它会非常方便。

【参考方案4】：

如果署名实际上是引号，则应使用 blockquote。

<h2>About Us</h2>
<blockquote class="byline"><p>We Sell Apples Yay!</p></blockquote>

【参考方案5】：

我个人认为您的第二个选项是最好的。 “关于”是一个部分的标题，但与部分标题/标题相比，“副标题”或更多是描述性的。您可以使用<strong> 而不是跨度来表示它比文本的其余部分更重要，但不是标题。

如果它们真的是副标题，比如

关于

关于我们

关于我们的文字

关于本网站

关于本网站的文字

您应该使用<h3> 作为子标题。

【讨论】：

除了，如果您使用<strong> 表示子标题，您将无法使用相同的标签来表示内容/正文文本的重要位。

我编辑了我的答案，如果它是一个实际的副标题，你应该使用 H 元素，但如果它只是一个更重要的文本（无论它是在一个段落内还是在一个重要子行的更多部分）我会使用强。如果也用于其他部分，我认为这不会贬低强元素。这实际上取决于副标题是否实际上是某种标题/标题或更多的介绍性行或其他东西。