Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 structure and headings in section or article

Tags:

html

Although I should really know this, I am afraid that I don't get it completely. Having read different articles, read books and spoke to others I still don't quite understand the correct structure for a HTML5 section. Is it appropriate to have a h1 tag within each section and/or article? Does a new section or article constitute starting the h1 to h2 process again?

I am under the impression that each "block" should be allowed it's own "heading" structure.

For example, is this correct HTML5? :

<!doctype html>
<html>
  <head>
    <title>
    <!-- etc. etc. -->

    <body>
      <section> <!-- two or more <articles> within this section, both using <h1> tags -->
        <h1>Here is a section with articles in</h1>
        <article>
          <h1>Heading</h1>
          <h2>sub heading</h2>
          <p>A paragraph>
        </article>
        <article>
          <h1>Heading</h1>
          <h2>sub heading</h2>
          <p>A paragraph</p>
        </article>
        ...      
      </section>
      <section> <!-- two or more <articles> within this additional section, both using <h1> tags -->
        <h1>Here is a section with articles in</h1>
        <article>
          <h1>Heading</h1>
          <h2>sub heading</h2>
          <p>A paragraph>
        </article>
        <article>
          <h1>Heading</h1>
          <h2>sub heading</h2>
          <p>A paragraph</p>
        </article>
        ...      
      </section>                  
    </body>
</html>
like image 209
beingalex Avatar asked Oct 07 '22 12:10

beingalex


1 Answers

Since each pair of h1 and h2 elements in your articles represents a heading and a subheading respectively, you'll need to group the pair into its own header within the article in order to generate a proper document outline for each article.

Besides that, the heading structures of your sections seem fine.

like image 178
BoltClock Avatar answered Oct 10 '22 01:10

BoltClock