正确的标题标记

Posted 2023-02-24

【中文标题】正确的标题标记

【英文标题】：Correct markup for headers

【发布时间】：2014-04-22 01:16:50

【问题描述】：

如何对文章中的标题进行语义标记，如下图所示？我经常遇到这个问题；我有一个在视觉上首先出现的标题，但它是一个副标题、介绍标题或不如主标题重要。我可以把它放在主标题之后，然后用 CSS 将它移到上面，但这并不总是一个理想的解决方案。

另一个问题：是否有任何特殊的方法来标记引导段落？

不允许？

<article>
<h2>New prodcut</h2>
<h1>Launching our new x-series</h1>
<p class="lead">Lorem ipsum dolor sit amet...</p>
<p>Integer varius, turpis sit amet accumsan...</p>
...
</article>

【参考方案1】：

不要为副标题使用标题元素 (h1-h6)。 hgroup 元素曾经可以做到这一点，但它被删除了。

现在 html5 规范中有一个关于 Subheadings, subtitles, alternative titles and taglines 的部分。使用p 元素作为副标题，并将标题和副标题组合到header 元素中：

<article>
  <header>
    <p>New product</p>
    <h1>Launching our new X-series</h1>
  </header>
</article>

如果你认为开头段落也应该是part of the header (instead of the main content)，你也可以把它放在header中。

【讨论】：

完美。正是我想要的:)

【参考方案2】：

虽然你所做的在语法上是允许的，但我认为这会给低视力用户造成混淆。

做这样的事情怎么样：

<div class="newproduct>New Product</div>
<div class="articletitle">Launching our new x-series</div>
Lorem ipsum....

如果您想使用一些较新的 HTML，我建议您查看 article 和 section 标签。

【讨论】：

不使用 h1 对 SEO 不太友好，通过使用文章（就像我一样）应该存在 h1

您的问题是关于语义还是 SEO？您可以在文章中使用标题标签。每篇文章都应该是关于一个独立的“东西”（即新闻文章、博客条目、字典条目等）。我的回答专门针对视力低下的人（盲人或几乎盲人）。

我的问题是关于语义的，因此与 SEO 直接相关。但主要是关于如何在需要时用 h1 和 h2 标记标题。我将更新我的问题以更准确

我测试了几种验证工具（仅限在线）。他们都没有抱怨使用您的代码进行无效标记。