HTML5 subtitle mark-up for every level of headings, ie, h1 to h6

Question

Including WordPress official templates, there are a lot of resources explaining how to code "h1" and "h2" wrapping with "header" tag to include a subtitle as "p" tag.

For example,

  <main>  
    <header>
      <h1>The Title For The Site</h1>
      <p>The subtitle goes here</p>
    </header>
    ...
 </main>

Or for an archive page:

  <main>  
    <header>
      <h1>The Title For The Site</h1>
      <p>The subtitle goes here</p>
    </header>
    <article>
      <header>
        <h1>The Title Of An Article</h1>
        <p>The subtitle for the article</p>
      </header>
      ...
    </article>
    ...
 </main>

So here is the question: What will be for the other levels of h3 to h6 headings if I need subtitles also for those levels?

Is it semantically possible to mark-up like:

      <main>  
        <header>
          <h1>The Title For The Site</h1>
          <p>The subtitle goes here</p>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur ... dignissim.</p>

    <header>
      <h3>Fusce rutrum</h3>
      <p>Vestibulum commodo gravida tortor</p>
    </header>
    <p>....</p>

    <header>
      <h4>Praesent eget</h4>
      <p> Maecenas malesuada vel lectus</p>
    </header>
    <p>....</p>
    ...
 </main>

Please give some advise! Thanks in advance.

Cockspur

<p> is enough, just adjust the font-size – Halinahalite

Thank you. However, this is not the point, please let me know that we can wrap h3 or h4,,, together with p tag subtilte with a header tag to semantically tell this pair of two elements a kind of group heading, rather than the sub title p tag is just a paragraph. – Cockspur

Answer 1

Yes, that’s correct. The heading rank is not a relevant difference in this case. The important thing is that you don’t use another heading element for the subtitle.

See also in the HTML 5.1 spec: Subheadings, subtitles, alternative titles and taglines

Eastbound