I\'m currently using the above tags in this way (classic tag order):
...
...
Let's get a canonical answer here. I will reference the HTML5 spec.
First of all, 12.1.2.4 Optional tags:
A
headelement's start tag may be omitted if the element is empty, or if the first thing inside theheadelement is an element.A
headelement's end tag may be omitted if theheadelement is not immediately followed by a space character or a comment.A
bodyelement's start tag may be omitted if the element is empty, or if the first thing inside thebodyelement is not a space character or a comment, except if the first thing inside thebodyelement is ascriptorstyleelement.A
bodyelement's end tag may be omitted if thebodyelement is not immediately followed by a comment.
Then, the 4.1.1 The html element:
Content model: A
headelement followed by abodyelement.
Having the cited restrictions and strictly defined element order, we can easily work out what are the rules for placing implicit tag.
Since must come first, and it can contain elements only (and not direct text), all elements suitable for will become the part of implicit , up to the first stray text or -specific element. At that moment, all remaining elements and text nodes will be placed in .
Now let's consider your second snippet:
...
...
...
...
Here, the element is not suitable for (it's flow content), the tag will be placed immediately before it. In other words, the document will be understood by browser as following:
... ... ... ...
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
htmlelement.[...]
In conforming documents, there is only one
bodyelement.
Thus, the or will be correctly used in this context. Well, they will be practically equivalent to the first snippet. But this will cause an additional element in middle of a which is invalid.
As a side note, you're probably confusing 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
bodyelement represents the main content of the document.
which means all the content. And both header and footer are part of this content.