6

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.

Ninki
  • 93
  • 2
  • 8
  • 1
    `

    ` is enough, just adjust the `font-size`

     – Carl Binalla Apr 03 '17 at 07:43
  • 1
    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. – Ninki Apr 03 '17 at 13:39

1 Answers1

6

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

unor
  • 92,415
  • 26
  • 211
  • 360