副标题最正确的语法方法是什么？

Question

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

---

关于

我们卖苹果，耶！

Lorem存有...

---

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

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

• <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> - >标题的一部分。我真的不知道这是好事还是坏事。

对此有何建议？

Answer 1

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）

Answer 2

定义

如果我将副词标题错误（我可能已经做过），请纠正我

我相信你的内容比任何类型的标题更像是一个副标题（虽然在一个松散的意义上 - http://en.wikipedia.org/wiki/Byline）。因此，您有理由（并鼓励）使用不具有分层语义的单独样式和标记。

规格

• 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="byline">We sell apples, yay!</div>
</header>

<style>
    header .byline { color: blue; }
</style>

旧例子

仍然有效，但我更喜欢header元素作为标题及其bylines / taglines /等的逻辑容器。

---

<h2>About</h2> 
<div>We sell apples, yay!</div>

<style>

H2 + DIV { /* byline style - IE7+ selector */ }

</style>

要么

<h2>About</h2>
<div class="byline">We sell apples, yay!</div>

<style>

.byline { /* byline style */ }

</style>

Answer 3

我真的很喜欢Toby Inkster的建议：http://lists.w3.org/Archives/Public/public-html/2010Nov/0405.html作为HTML5提议的<hgroup>元素的替代品，这对许多网络作者来说似乎是一个难以理解的概念。 （见布鲁斯·劳森的那篇文章的开头。）托比建议：

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

Answer 4

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

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

About

关于我们

关于我们的文字

关于这个网站

关于这个网站的文字

你应该使用<h3>作为小标题。

Answer 5

如果byline实际上是一个引用，你应该使用blockquote。

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