3

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?

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

Robert Bue
  • 1,624
  • 2
  • 11
  • 14

2 Answers2

4

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.

Community
  • 1
  • 1
unor
  • 87,575
  • 24
  • 195
  • 335
-1

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.

Adam Zuckerman
  • 1,623
  • 1
  • 14
  • 20
  • It isn't very SEO friendly to not use h1, and by using article (as I am) a h1 should be present – Robert Bue Mar 16 '14 at 23:10
  • Was your question about semantics or SEO? And you can use heading tags within articles. Each article should be about a stand alone "something" (i.e., news article, blog entry, dictionary entry, etc.). My response was specifically about people with low vision (blind or nearly blind). – Adam Zuckerman Mar 16 '14 at 23:17
  • My question is about semantics, and therefore directly related to SEO. But mainly about how to markup the headings with h1, and h2 if needed. I will update my question to be more precise – Robert Bue Mar 17 '14 at 00:06
  • I tested against several validation tools (online only). None of them complained about invalid markup using your code. – Adam Zuckerman Mar 17 '14 at 00:40