问题
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>
回答1:
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.
回答2:
While what you are doing is syntactically allowed, I think it will case confusion for low vision users.
How about doing something like this:
<div class="newproduct>New Product</div>
<div class="articletitle">Launching our new x-series</div>
Lorem ipsum....
If you want to use some newer HTML, I would recommend you look into article and section tags.
来源：https://stackoverflow.com/questions/22444118/correct-markup-for-headers