4

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,774
  • 2
  • 11
  • 14

3 Answers3

3

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
  • 92,415
  • 26
  • 211
  • 360
0

The HTML Standard as of 2023 recommends the use of the <hgroup> element for subheading, alternative titles, and taglines:

<article>
  <hgroup>
    <p>New product</p>
    <h1>Launching our new x-series</h1>
    <p>Lorem ipsum dolor sit amet...</p>
  </hgroup>
  <p>Integer varius, turpis sit amet accumsan...</p>
  ...
</article>

Permitted content:

  1. Zero or more <p> elements,
  2. followed by one <h1> , <h2>, <h3>, <h4>, <h5>, or <h6> element,
  3. followed by zero or more <p> elements.

See: 4.3.7 The hgroup element

While not explicitly mentioned, I would consider the lead paragraph to be content related to a heading and would thus place it in the <hgroup> as well.

Setting classes like <p class="lead"> is not required thanks to the <hgroup> element, which lets you target the subheading and the lead paragraph in CSS easily:

hgroup > p:first-child { /* or  hgroup p:has(+ h1)  for the <p> before <h1> */
  font-size: 16pt;
}

hgroup h1 + p {
  font-size: 14pt;
  font-style: italic;
}
CodeManX
  • 11,159
  • 5
  • 49
  • 70
-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,633
  • 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