Correct markup for headers

Question

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>

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

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