标头的正确标记

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>

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

Answer 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中。

Answer 2

虽然你在语法上允许做什么，但我认为这对低视力用户来说会造成混淆。

做这样的事情怎么样：

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

如果您想使用更新的HTML，我建议您查看article和section代码。