什么是最符合语义的子标题方法？

Question

编辑:正确的术语似乎是byline,而不是sub-heading.我将保留其他未经修改的帖子.转换成你的头:)

什么是最符合语义的子标题方法？以下示例.

---

关于

^{我们卖苹果,耶!}

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

对此有何建议？

如果我将术语子标题错误(我可能已经做过):) 请纠正我:)

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

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

旧例子

_{仍然有效,但我更喜欢将H[1-6]元素作为标题及其bylines/taglines /等的逻辑容器.}

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

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

要么

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

<style>
    header .subtitle{ color: blue; }
</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>