CODEWITHSUNDEEP
htmlsemantic-markup
user3282116
user3282116

Reputation: 39

html5 structure with multiple header tags

Is this structure correct semantically? I was thinking whether this structure is correct semantically or not. 

<html>
  <head></head>
  <body>
    <header></header>
    <section>
      <header>
        <h1></h1>
      </header>
    </section>
    <section>
      <header>
        <h1></h1>
      </header>
    </section>
  </body>
</html>

Upvotes: 0

Views: 408

Answers (1)

Igor Gilyazov
Igor Gilyazov

Reputation: 777

It is heavily dependent on the actual content.

For example, the document with this structure could represent a book. The first header could include meta information about the book like name, author, table of contents, etc. Each section could represent a chapter. The header within section could include meta information about the chapter like name, dedication, etc.

<!doctype html>

<html>
  <head>
    <meta charset="utf-8">
    <title>My Awesome Book</title>
  </head>
  <body>
    <header>
      <h1>My Awesome Book</h1>
      <nav>
        <h1>Table of Contents</h1>
        <ul>
          <li>
            <a href="#chapter1">Chapter 1</a>
          </li>
          <li>
            <a href="#chapter2">Chapter 2</a>
          </li>
        </ul>
      </nav>
    </header>
    <section id="chapter1">
      <header>
        <h1>Chapter 1</h1>
        <p>This chapter is dedicated to voices in my head. Thank you for inspiration.</p>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, velit!</p>
    </section>
    <section id="chapter2">
      <h1>Chapter 2</h1>
      <p>Asperiores corporis illum minus vel tempora non voluptate dolores itaque nam?</p>
    </section>
  </body>
</html>

Upvotes: 1

Related Questions