HTML 5 Page without main <header>?

StackOverflow https://stackoverflow.com/questions/22354112

Question

Is it bad to nave no <header>?

I have this basic structure but I am thinking about wrapping a header arround everything between the body start and the content because the header has also this nice shema.org markup attached. Good Idea?

Just because sometimes the header is not there but the navbars actually contain the brandname and are sort of headers themseves.

if I do this how should I markup whats the <header> right now? A section inside a header is not valid right? Just a normal <div> I guess.

<body>

<div class="nav1"><h1>brandname</h1><nav>...</nav></div>

<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->

<div class="nav2"><h1>brandname</h1><nav>...</nav></div>

<div>content ...

To this

<body>
<header itemtype="http://schema.org/WPHeader" ...>
<div class="nav1"><h1>brandname</h1><nav>...</nav></div>

<div><h1>brandname</h1><p>slogan</p></div> <!-- sometimes this is not there -->

<div class="nav2"><h1>brandname</h1><nav>...</nav></div>
</header>
<div>content ...

Multiple headers not valid either or? I am thinking of it this way as using the <header> without any CSS styles just for semantic markup. I could think of styling barriers created with this so not 100% satisfied with this.

Or is this valid.

<body>

<header class="nav1"><h1>brandname</h1><nav>...</nav></header>

<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->

<header class="nav2"><h1>brandname</h1><nav>...</nav></header>

<div>content ...

// just read html5: using header or footer tag twice? this and looks like I stick with the 2nd solution since I not really like the idea of having no header at all

Dont be afraid to answer ;)

Was it helpful?

Solution

Decide for every sectioning root element (e.g., body) and every sectioning content element (e.g., article) if it contains content which is appropriate for header. The spec defines that it’s for "introductory content", and gives the following examples:

  • introductory or navigational aids
  • heading (an h1–h6 element) (not required)
  • table of contents, a search form, or any relevant logos

If there is such content, use a header element. If the content in that sectioning root/content element is scattered, use several header elements.

Keep in mind that the header always applies for "its nearest ancestor sectioning content or sectioning root element":

<body>
  <header> <!-- this header is for the whole page --> </header>

  <article>
    <header> <!-- this header is for the whole article element --> </header>

    <div>
      <header> <!-- this header is also for the whole article element (and not only for the div element!) --></header>
    </div>

    <section>
      <header> <!-- this header is for this article’s section element only --> </header>
    </section>

  </article>

  <figure>
    <header> <!-- this header is for the figure element only --> </header>
  </figure>

  <strong>
    <header> <!-- but this header is also for the whole page (and not for the strong element only!) --> </header>
  </strong>

</body>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top