正确的标题标记 [英] Correct markup for headers

问题描述

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

另一个问题：是否有任何特殊的标记方式
$ b

不允许？

 < article> 
< h2>新产品< / h2> 
< h1>启动我们新的x系列< / h1> 
< p class =lead> Lorem ipsum dolor sit amet ...< / p> 
< p> Integer varius，turpis sit amet accumsan ...< / p> 
 ... 
< / article> 
  

解决方案

不要使用标题元素（ h1 - h6 ）小标题。这曾经是 hgroup 元素的可能，但它被删除了。

现在HTML5规范有一个关于副标题，副标题，备选标题和标语。对子标题使用 p 元素，并在标题元素中对标题和子标题进行分组：

< article>
< header>
< p>新产品< / p>
< h1>启动我们新的X系列< / h1>
< / header>
< / article>


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

How do I semanticly markup the headers in the article as presented in the picture below? I often run into this problem; where I have a header that is visually first, but is a subheading, intro header or less important then the main header. I could put it after the main header and move it above with CSS, but that isn't always a ideal solution.

Another question: is there any special way to markup lead paragraphs?

Not allowed?

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

解决方案

Don’t use a heading element (h1-h6) for the subheading. This was once possible with the hgroup element, but it got removed.

Now the HTML5 spec has a section about Subheadings, subtitles, alternative titles and taglines. Use a p element for the subheading, and group both, the heading and the subheading in a header element:

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

If you think the lead paragraph should also be part of the header (instead of the main content), you can put it in the header, too.

这篇关于正确的标题标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！