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