什么是最符合语义的子标题编写方式？

Question

什么是最语义正确的子标题或副标题的做法？以下是示例。

---

关于

^{我们卖苹果，耶！}

Lorem ipsum...

---

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

因此，我想到的选项如下：

• <h2>关于</h2><h3>我们卖苹果，耶！</h3> -> 这是我想避免的。
• <h2>关于</h2><span class="subheading">我们卖苹果，耶！</span> -> 有效。这是最好的方式吗？不知道。
• <h2>关于<span class="subheading">我们卖苹果，耶！</span></h2> -> 标题的一部分。我不确定这是好事还是坏事。

对此有什么建议吗？

- jpeltoniemi

---

如果您认为您的副标题不重要，不能够作为实际标题的资格，那么为什么还要使用它们呢？具体来说，您为什么反对使用各种<H2>/<H3>/等标签呢？ - Cody Gray

@Cody 我认为像“我们卖苹果，耶！”这样的语句更像是装饰元素而不是标题。副标题似乎是更合适的术语。 - jpeltoniemi

告诉你使用“署名行”这个术语是错误的人是错的。“署名行”是指“报纸中标明文章作者的一行文字”。从字面上看，它是一个显示文章作者的“行”。我认为你想要的是“副标题”（定义2），牛津美国词典将其定义为“已出版作品或文章的次要标题，提供有关其内容的附加信息”。 - Alan H.

@AlanH。我想你是对的。我已经忘记了我从哪里得到这个术语，谢谢！ :) - jpeltoniemi

Answer 1

规范

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

除非用于新的章节或子章节的标题，否则不应使用

至

元素来标记副标题、字幕、替代标题和标语。

标题应帮助构成文档的概要。Microsoft Word中的文档大纲--同样使用标题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>

- Tim M.

---

谢谢您提供正确的术语。如果不是nikc的回答，我可能会接受你的（可惜如果所有答案都同样有用，您无法接受多个答案）+1 给你 :) - jpeltoniemi

网站头部怎么办？比如博客描述应该用什么？由于<header>已经是容器，我不能再放另一个<header>。过去人们使用<hgroup>（内部包含<h1>和<h2>），但是由于它不再被支持... - deathlock

适用的术语是“字幕”，而不是“署名”。 - Alan H.

Answer 2

我非常喜欢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>

- Alohci

---

在标题中使用 small 标签作为副标题是 HTML 工作组不建议的做法。 - Clint Pachl

如果你使用Bootstrap，它会非常方便。 - Herman Van Der Blom

Answer 3

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）

- nikc.org

---

+1 表示注意到 HTML 5 在这种情况下有更好的支持。 - Tim M.

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

自撰写此文以来，“hgroup”的未来已经受到威胁：http://dev.w3.org/html5/status/issue-status.html#ISSUE-164 - nikc.org

@nikc.org所以，既然hgroup已经过时了，现在什么是正确的解决方案呢？ - deathlock

@deathlock - 使用 header 来分组内容似乎是一个合适的习语。请查看我的更新答案和 http://www.w3.org/TR/html51/common-idioms.html#sub-head。 - Tim M.

Answer 4

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

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

- Pete

Answer 5

我个人认为你的第二个选项是最好的。 “About”是一个章节的标题，但是“子标题”更具描述性质而不是一个章节标题/头部。您可以使用<strong>代替span来表示其比其他文字更重要，但并不是标题。

如果它们确实是子标题，例如：

About

About us

Text about us

About this website

Text about this website

您应该将<h3>用于子标题。

- Stephan Muller

---

除此之外，如果您使用<strong>来表示副标题，您将失去使用相同标记来指示重要内容/正文的能力。 - Cody Gray

我编辑了我的答案，如果这是一个实际的副标题，你应该使用H元素，但如果它只是更重要的一点文本（无论它是段落内的还是更重要的子行），我会使用strong。我认为在其他部分使用strong元素不会贬值它。这取决于副标题是否实际上是某种标题/标题还是引言或类似的东西。 - Stephan Muller