关于

Question

执行副标题或副标题的语义最正确的方法是什么？示例如下。

关于

^{我们卖苹果，是的！}

Lorem ipsum ......

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

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

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

对此有何建议？

Answer 1

定义

如果我得到了这个词，请纠正我小标题错误（我可能做过）

我相信你的内容比任何类型的标题都更像是一个副词（虽然在一个松散的意义上 - 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 / etc的逻辑容器。}

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

<style>

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

</style>

OR

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

<style>

.byline { /* byline style */ }

</style>

Answer 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）

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>而不是跨度来表示它比文本的其余部分更重要但不是标题。

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

关于

关于我们

关于我们的文字

关于本网站

关于本网站的文字

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

Answer 5

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

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

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

关于

^{我们卖苹果，是的！}

5 个答案:

定义

规格

实施例

旧例子

关于