HGROUP 元素已从 HTML5 规范中移除。可以使用什么替代技术？答案

【问题标题】：HGROUP element removed from the HTML5 Specification. What alternative technique can be used instead?HGROUP 元素已从 HTML5 规范中移除。可以使用什么替代技术？
【发布时间】：2013-03-26 08:34:51
【问题描述】：

正如你们中的一些人听说的那样，hgroup 元素正在从HTML5 Specification 中删除。（有关详细信息，请参阅 W3C 的公共邮件列表档案中的 W3C HTML Working Group's decision on request to drop hgroup from HTML5。）

现在我正在使用这个标签重新设计一个网站，它创建了一种添加子标题的方法。

我目前的想法是在主标题下添加另一个 hX 标签，但我不确定这是否足够语义化。

 <h1>Darren Reay</h1>
 <h2>A developing web developer</h2>
 <p>Hello World</p>

任何人都可以提出使用子标题的替代方法，或者至少为我指明正确的方向吗？

【问题讨论】：

您可以使用hgroup 解决哪些您无法轻松解决的问题？你能把这个问题说得更具体一些吗？
@dystroy 我已编辑问题以添加我当前的想法以希望澄清问题。谢谢
你所拥有的有什么问题？这就是你应该如何创建标题和副标题。 hgroup 标签只是将它们包裹起来以显示它们是相关的。你可以对普通的 div 做同样的事情。
@jimjimmy1995 但搜索引擎会将它们识别为两个标题，并且它们周围只有一个 div 组合在一起吗？我认为 div 对搜索引擎毫无意义。我认为它们只是 CSS 的钩子。
@DarrenReay 你认为他们在 hgroup 标签之前是如何做到的？

标签： html w3c semantic-markup web-standards

【解决方案1】：

HTML5 规范现在包含有关如何标记 Subheadings, subtitles, alternative titles and taglines 的建议

【讨论】：

感谢您的链接。跟我想的差不多。如果可以的话，我会给你加 1 :(
新链接：w3c.github.io/html/…

【解决方案2】：

我会采用 W3C 在 Lars Gunther 提出的 drop hgroup change proposal 中建议的替代方案，并使用标题和段落。

你的例子应该是这样的

<header>
    <h1>Darren Reay</h1>
    <p>A developing web developer</p>
</header>

我觉得这在语义上是正确的。

【讨论】：

我们应该用什么来替换<hgroup> 内的<header> 元素（例如：网站标题）？ <header> 可以在 <header> 内吗？>

【解决方案3】：

需要考虑的几点：

即使标签从 HTML5 规范中移除，也不意味着它会在一夜之间停止工作。浏览器长期保持向后兼容性（AFAIK，如果不是所有浏览器仍然正确呈现<font>！）
我可能读错了这个问题，但在字里行间，你似乎一直在滥用 hgroup 标签。（不允许包含除标题元素以外的任何内容。）

我认为完全删除标签或用 div 替换它们没有任何问题。

【讨论】：

是的，我认为这个问题有点含糊。我只在 hgroup 中使用过 h 标签。因此，根据我从您的答案中收集到的信息，浏览器目前仍会识别 hgroup，直到发布用于子标题的新标签，代码在语义上是否正确？
现在我阅读了您链接到的讨论，它明确表示他们考虑将其从规范中删除，因为没有浏览器实现它。所以你很安全。他们不太可能想出一个新标签来替换它，因为<h2> 已经意味着一个副标题。

【解决方案4】：

这是我目前在我的个人网站上使用的技术，以实现标题带有副标题的效果：

<header>
  <h1>
    <a href="http://www.jdclark.org/">Jordan Clark</a>
    <small>Personal and Professional Website</small>
  </h1>
</header>

（然后，当然，我只是简单地使用 CSS 来重新设置 <small> 元素的样式。我个人也认为我的技术在语义上比仅使用段落更准确——虽然我不是 SEO 专家，但我我确信通过将副标题文本保留在 h1 中会比基本段落赋予它更高的价值。）

【讨论】：