<Header> tag HTML5 inside div

Question

just wondering, is it bad practice to place a <header> tag inside a div tag when designing a site that mostly uses html5 elements and the doctype is for html5? Thanks!

Also, should I place the Nav outside the header or inside, or does it really matter?

Answer 1

No, not strictly, but there are some contextual semantics that are implied by embedding the header under elements other than the body. Depending on how you structure the document, you may run into unexpected behaviours. See below.

HTML5, as far as I can tell, is a DTD-less document type. Which does not apply strict rules as it pertains to document structure validation. According to the W3C document on HTML5 the:

... header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids. [1]

Basically, what this seems to indicate is that, if the header element is directly under the body of the document, it applies to the page as a whole, but if contained under another element which identifies a section the header applies more specifically to the nearest ancestor.

Bear in mind though that a <div> is not a sectioning element as pointed out by Tomasz Zielinski. Originally I had thought it was. If you want your header to apply only to a specific section of the page, it is best to use one of the defined sectioning elements to encompass the header, as defined here: http://www.w3.org/TR/html5/sections.html

E.g.

<div>
  <section>
    <header>...</header>
  </section>
</div>

Answer 2

I do not believe that it is a bad practice. However, still make sure you have it placed int the general area where it should be.

Here is a link that might help you understand the location of your header.

Answer 3

No, as long as you respect the content semantics and that your header contains header information. You can wrap it in a div with no SEO drawbacks.