标题的正确标记方式

Question

如何在文章中语义化地标记标题，如下图所示？我经常遇到这个问题；有时候我有一个视觉上第一的标题，但它是一个子标题、介绍性标题或比主标题不重要。我可以把它放在主标题后面，并用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>

- Robert Bue

Answer 1

不要使用标题元素（h1-h6）作为副标题。虽然以前可以使用hgroup元素实现，但已被删除。

现在HTML5规范中有一个关于副标题、字幕、替代标题和标语的章��。 使用p元素作为子标题，并将标题和子标题分组在header元素中：

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

如果您认为引言段落也应该是标题的一部分（而不是主要内容），您也可以将其放在header中。

- unor

---

太好了，正是我想要的 :) - Robert Bue

<hgroup> 元素确实存在，并且在此场景下建议使用：https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element - CodeManX

Answer 2

截至2023年，HTML标准建议使用<hgroup>元素作为副标题、替代标题和标语的标记：

<article>
  <hgroup>
    <p>New product</p>
    <h1>Launching our new x-series</h1>
    <p>Lorem ipsum dolor sit amet...</p>
  </hgroup>
  <p>Integer varius, turpis sit amet accumsan...</p>
  ...
</article>

允许的内容：

1. 零个或多个<p>元素，
2. 后跟一个<h1>、<h2>、<h3>、<h4>、<h5>或<h6>元素，
3. 后跟零个或多个<p>元素。

参见：4.3.7 hgroup元素

虽然没有明确提到，但我认为引言段落是与标题相关的内容，因此也应将其放在<hgroup>中。

不需要设置类似于<p class="lead">的类，因为<hgroup>元素可以让您轻松地在CSS中定位子标题和引言段落：

hgroup > p:first-child { /* or  hgroup p:has(+ h1)  for the <p> before <h1> */
  font-size: 16pt;
}

hgroup h1 + p {
  font-size: 14pt;
  font-style: italic;
}

- CodeManX

Answer 3

虽然你所做的语法是被允许的，但我认为它会给低视力用户带来困惑。

那么我们可以这样做：

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

如果你想使用一些较新的HTML，我建议你研究一下article和section标签。

- Adam Zuckerman

---

不使用h1标签并且使用article标签（就像我现在这样）是不太友好的SEO做法，因此应该添加一个h1标签。 - Robert Bue

你的问题是关于语义还是SEO吗？并且你可以在文章中使用标题标签。每篇文章都应该是关于一个独立的“某物”（例如新闻文章、博客条目、词典条目等）。我的回答特别针对视力低下的人（盲人或近乎盲人）。 - Adam Zuckerman

我的问题涉及语义，因此直接与SEO相关。但主要是关于如何使用h1和必要时的h2标记标题。我将更新我的问题以更加精确。 - Robert Bue

我使用了几个验证工具（仅在线）。使用您的代码，它们都没有抱怨无效的标记。 - Adam Zuckerman