In HTML5 can the header and footer tags appear outside of the body tag

Question

I m currently using the above tags in this way  classic tag order     lt html gt     lt head gt     lt  head gt     lt body gt       lt header gt     lt  header gt       lt section gt     lt  section gt       lt footer gt     lt  footer gt     lt  body gt   lt  html gt    Tag usage and specifications were very rigid in previous versions of HTML  4 x   while HTML5 doesn t really need  lt head gt  and even  lt body gt  tags   So I would use the following structure  which IMHO is much more semantic than the previous one    lt html gt     lt header gt     lt  header gt       lt  -- put header and footer outside the body tag -- gt     lt body gt       lt section gt     lt  section gt       lt section gt     lt  section gt       lt section gt     lt  section gt     lt  body gt     lt footer gt     lt  footer gt   lt  html gt    What do you think

User · Answer

Let s get a canonical answer here  I will reference the HTML5 spec   First of all  12 1 2 4 Optional tags      A head element s start tag may be omitted if the element is empty  or if the first thing inside the head element is an element       A head element s end tag may be omitted if the head element is not immediately followed by a space character or a comment       A body element s start tag may be omitted if the element is empty  or if the first thing inside the body element is not a space character or a comment  except if the first thing inside the body element is a script or style element        A body element s end tag may be omitted if the body element is not immediately followed by a comment    Then  the 4 1 1 The html element      Content model  A head element followed by a body element    Having the cited restrictions and strictly defined element order  we can easily work out what are the rules for placing implicit  lt body gt  tag   Since  lt head  gt  must come first  and it can contain elements only  and not direct text   all elements suitable for  lt head  gt  will become the part of implicit  lt head  gt   up to the first stray text or  lt body  gt -specific element  At that moment  all remaining elements and text nodes will be placed in  lt body  gt      Now let s consider your second snippet    lt html gt     lt header gt     lt  header gt     lt body gt       lt section gt     lt  section gt       lt section gt     lt  section gt       lt section gt     lt  section gt     lt  body gt     lt footer gt     lt  footer gt   lt  html gt    Here  the  lt header  gt  element is not suitable for  lt head  gt   it s flow content   the  lt body gt  tag will be placed immediately before it  In other words  the document will be understood by browser as following    lt html gt     lt head  gt     lt body gt       lt header gt     lt  header gt       lt body gt         lt section gt     lt  section gt         lt section gt     lt  section gt         lt section gt     lt  section gt       lt  body gt       lt footer gt     lt  footer gt     lt  body gt   lt  html gt    And that s certainly not what you were expecting  And as a note  it is invalid as well  see 4 4 1 The body element      Contexts in which this element can be used  As the second element in an html element                  In conforming documents  there is only one body element      Thus  the  lt header  gt  or  lt footer  gt  will be correctly used in this context  Well  they will be practically equivalent to the first snippet  But this will cause an additional  lt body  gt  element in middle of a  lt body  gt  which is invalid     As a side note  you re probably confusing  lt body  gt  here with the main part of the content which has no specific element  You could look up that page for other solutions on getting what you want   Quoting 4 4 1 The body element once again      The body element represents the main content of the document    which means all the content  And both header and footer are part of this content

User · Answer

I agree with some of the others  answers  The  lt head gt  and  lt header gt  tags have two unique and very unrelated functions  The  lt header gt  tag  if I m not mistaken  was introduced in HTML5 and was created for increased accessibility  namely for screen readers  It s generally used to indicate the heading of your document and  in order to work appropriately and effectively  should be placed inside the  lt body gt  tag  The  lt head gt  tag  since it s origin  is used for SEO in that it constructs all of the necessary meta data and such  A valid HTML structure for your page with both tags included would be like something like this    lt  DOCTYPE html  gt   lt html lang  es  gt       lt head gt           lt  --crazy meta stuff here-- gt       lt  head gt       lt body gt           lt header gt               lt  --Optional nav tag-- gt               lt nav gt               lt  nav gt           lt  header gt           lt  --Body content-- gt       lt  body gt   lt  html gt

User · Answer

This is the general structure of an html document     lt html gt       lt head gt          Title  meta-data  scripts  etc go here    Don t confuse with header      lt  head gt       lt body gt          You body stuff comes here             lt footer gt              Your footer stuff goes here             lt  footer gt       lt  body gt   lt  html gt

User · Answer

If you really want it to look more semantic like having the  lt body gt  in the middle you can use the  lt main gt  element  With all the recent advances the  lt body gt element is not as semantic as it once was but you just have to think of it as a wrapper in which the view port sees    lt html gt       lt head gt       lt  head gt       lt body gt           lt header gt           lt  header gt           lt main gt               lt section gt  lt  section gt               lt article gt  lt  article gt           lt  main gt           lt footer gt           lt  footer gt       lt body gt   lt  html gt

User · Answer

Well  the  lt head gt  tag has nothing to do with the  lt header gt  tag  In the head comes all the metadata and stuff  while the header is just a layout component  And layout comes into body  So I disagree with you

User · Answer

According to the HTML standard  the content model of the HTML element is       A head element followed by a body   element    You can either define the BODY element in the source code    lt html gt       lt body gt              web-page          lt  body gt   lt  html gt    or you can omit the BODY element    lt html gt          web-page      lt  html gt    However  it is invalid to place the BODY element inside the web-page content  in-between other  elements or text content   like so     lt html gt          content          lt body gt              content          lt  body gt          content      lt  html gt

User · Answer

I see what you are trying to do  you are trying to use the  lt body gt  tag as the container for the main content of the page  Instead  use the  lt main gt  tag  as specified in the HTML5 spec  I use this layout        lt  DOCTYPE html gt       lt html gt           lt head gt   Metadata   lt  head gt           lt body gt               lt header gt                    lt h1 gt  and other important stuff  lt  h1 gt                    lt nav gt   Usually a formatted  lt Ul gt    lt  nav gt               lt  header gt               lt main gt   All my content   lt  main gt               lt footer gt   Copyright  links  social media etc   lt  footer gt           lt  body gt       lt  html gt    I m not 100  sure but I think that anything outside the  lt body gt  tag is considered metadata and will not be rendered by the browser  I don t think that the DOM can access it either   To conclude  use the  lt main gt  tag for your content and keep formatting your HTML the correct way as you have in your first code snippet  You used the  lt section gt  tag but I think that comes with some weird formatting issues when you try to apply CSS

User · Answer

Even though the  lt head gt  and  lt body gt  tags aren t required  the elements are still there - it s just that the browser can work out where the tags would have been from the rest of the document   The other elements you re using still have to be inside the  lt body gt

[html] In HTML5, can the <header> and <footer> tags appear outside of the <body> tag?

Examples related to html

Examples related to tags