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>

Astred

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.

Jepson

Perfect. Just what I was looking for :) – Astred

The <hgroup> element very much exists and is recommended for this scenario: html.spec.whatwg.org/multipage/sections.html#the-hgroup-element – Overhear

Answer 2

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;
}

Overhear

Answer 3

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.

Crinkle

It isn't very SEO friendly to not use h1, and by using article (as I am) a h1 should be present – Astred

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). – Crinkle

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 – Astred

I tested against several validation tools (online only). None of them complained about invalid markup using your code. – Crinkle