在HTML5中，和标签是否可以出现在标签之外？

I'm currently using the above tags in this way (classic tag order):

我目前正在以这种方式使用上述标签（经典标签顺序）：

<html>
  <head>...</head>
  <body>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </body>
</html>

Tag usage and specifications were very rigid in previous versions of HTML (4.x), while HTML5 doesn't really need <head> and even <body> tags.

在先前版本的HTML（4.x）中，标记用法和规范非常严格，而HTML5实际上并不需要甚至标记。

So I would use the following structure, which IMHO is much more semantic than the previous one.

所以我会使用以下结构，其中IMHO比前一个更加语义。

<html>
  <header>...</header>     <!-- put header and footer outside the body tag -->
  <body>
    <section>...</section>
    <section>...</section>
    <section>...</section>
  </body>
  <footer>...</footer>
</html>

What do you think?

你怎么看？

8 个解决方案

#1

Well, the <head> tag has nothing to do with the <header> tag. In the head comes all the metadata and stuff, since the header is just a layout component.
And layout comes into body. So I disagree with you.

好吧，标签与

标签无关。在头部出现了所有的元数据和东西，因为标题只是一个布局组件。布局进入了身体。所以我不同意你的意见。

#2

Let's get a canonical answer here. I will reference the HTML5 spec.

让我们在这里得到一个规范的答案。我将参考HTML5规范。

First of all, 12.1.2.4 Optional tags:

首先，12.1.2.4可选标签：

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.

如果元素为空，或者head元素中的第一个元素是元素，则可以省略head元素的开始标记。

A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment.

如果head元素没有紧跟空格字符或注释，则可以省略head元素的结束标记。

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.

如果元素为空，或者body元素中的第一个元素不是空格字符或注释，则可以省略body元素的开始标记，除非body元素内的第一个元素是脚本或样式元素。

A body element's end tag may be omitted if the body element is not immediately followed by a comment.

如果body元素没有紧跟注释，则可以省略body元素的结束标记。

Then, the 4.1.1 The html element:

然后，4.1.1 html元素：

Content model: A head element followed by a body element.

内容模型：头元素后跟body元素。

Having the cited restrictions and strictly defined element order, we can easily work out what are the rules for placing implicit <body> tag.

通过引用的限制和严格定义的元素顺序，我们可以轻松找出放置隐式标记的规则。

Since <head/> must come first, and it can contain elements only (and not direct text), all elements suitable for <head/> will become the part of implicit <head/>, up to the first stray text or <body/>-specific element. At that moment, all remaining elements and text nodes will be placed in <body/>.

由于必须首先出现，并且它只能包含元素（而不是直接文本），所有适合的元素将成为隐式的一部分，直到第一个杂散文本或 - 特定元素。此时，所有剩余的元素和文本节点将被放置在中。

Now let's consider your second snippet:

现在让我们考虑你的第二个片段：

<html>
  <header>...</header>
  <body>
    <section>...</section>
    <section>...</section>
    <section>...</section>
  </body>
  <footer>...</footer>
</html>

Here, the <header/> element is not suitable for <head/> (it's flow content), the <body> tag will be placed immediately before it. In other words, the document will be understood by browser as following:

这里，

元素不适合（它的流内容），标签将紧接在它之前。换句话说，浏览器将理解该文档如下：

<html>
  <head/>
  <body>
    <header>...</header>
    <body>
      <section>...</section>
      <section>...</section>
      <section>...</section>
    </body>
    <footer>...</footer>
  </body>
</html>

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:

这肯定不是你所期待的。作为一个说明，它也是无效的;见4.4.1身体元素：

Contexts in which this element can be used: As the second element in an html element.

可以使用此元素的上下文：作为html元素中的第二个元素。

[...]

[...]

In conforming documents, there is only one body element.

在符合文件的情况下，只有一个身体元素。

Thus, the <header/> or <footer/> will be correctly used in this context. Well, they will be practically equivalent to the first snippet. But this will cause an additional <body/> element in middle of a <body/> which is invalid.

因此，

或将在此上下文中正确使用。好吧，它们实际上相当于第一个片段。但是这会在中间导致一个额外的元素无效。

As a side note, you're probably confusing <body/> 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:

引用4.4.1身体元素再次：

The body element represents the main content of the document.

body元素表示文档的主要内容。

which means all the content. And both header and footer are part of this content.

这意味着所有的内容。页眉和页脚都是此内容的一部分。

#3

I see what you are trying to do, you are trying to use the <body> tag as the container for the main content of the page. Instead, use the <main> tag, as specified in the HTML5 spec. I use this layout:

我看到你要做的是什么，你试图使用标签作为页面主要内容的容器。而是使用HTML5规范中指定的

标记。我用这个布局：

    <!DOCTYPE html>
    <html>
        <head> *Metadata* </head>
        <body>
            <header>
                *<h1> and other important stuff </h1>*
                <nav> *Usually a formatted <Ul>* </nav>
            </header>
            <main> *All my content* </main>
            <footer> *Copyright, links, social media etc* </footer>
        </body>
    </html>

I'm not 100% sure but I think that anything outside the <body> tag is considered metadata and will not be rendered by the browser. I don't think that the DOM can access it either.

我不是100％肯定，但我认为标记之外的任何内容都被视为元数据，并且不会被浏览器呈现。我认为DOM也不能访问它。

To conclude, use the <main> tag for your content and keep formatting your HTML the correct way as you have in your first code snippet. You used the <section> tag but I think that comes with some weird formatting issues when you try to apply CSS.

最后，使用内容的

标记，并按照第一个代码段中的正确方式格式化HTML。您使用了

标记，但我认为当您尝试应用CSS时会出现一些奇怪的格式问题。

#4

If you really want it to look more semantic like having the <body> in the middle you can use the <main> element. With all the recent advances the <body>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.

如果你真的希望它看起来更像语义，就像在中间使用一样，你可以使用

元素。随着最近的所有进步，元素不像以前那样具有语义，但您只需将其视为视口所看到的包装器。

<html>
    <head>
    </head>
    <body>
        <header>
        </header>
        <main>
            <section></section>
            <article></article>
        </main>
        <footer>
        </footer>
    <body>
</html>

#5

According to the HTML standard, the content model of the HTML element is:

根据HTML标准，HTML元素的内容模型是：

A head element followed by a body element.

头元素后跟一个body元素。

You can either define the BODY element in the source code:

您可以在源代码中定义BODY元素：

<html>
    <body>
        ... web-page ...
    </body>
</html>

or you can omit the BODY element:

或者你可以省略BODY元素：

<html>
    ... web-page ...
</html>

However, it is invalid to place the BODY element inside the web-page content (in-between other elements or text content), like so:

但是，将BODY元素放在网页内容中（在其他元素或文本内容之间）是无效的，如下所示：

<html>
    ... content ...
    <body>
        ... content ...
    </body>
    ... content ...
</html>

#6

I agree with some of the others' answers. The <head> and <header> tags have two unique and very unrelated functions. The <header> 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 <body> tag. The <head> 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:

我同意其他人的一些答案。和

标签有两个独特且非常不相关的功能。如果我没有弄错的话，

标签是在HTML5中引入的，它是为了增加可访问性而创建的，即用于屏幕阅读器。它通常用于指示文档的标题，并且为了正确有效地工作，应该放在标记内。标签，因为它的起源，用于SEO，因为它构建了所有必要的元数据等。包含两个标记的页面的有效HTML结构将类似于以下内容：

<!DOCTYPE html/>
<html lang="es">
    <head>
        <!--crazy meta stuff here-->
    </head>
    <body>
        <header>
            <!--Optional nav tag-->
            <nav>
            </nav>
        </header>
        <!--Body content-->
    </body>
</html>

#7

This is the general structure of an html document.

这是html文档的一般结构。

<html>
    <head>
        Title, meta-data, scripts, etc go here... Don't confuse with header
    </head>
    <body>
        You body stuff comes here...
        <footer>
            Your footer stuff goes here...
        </footer>
    </body>
</html>

#8

Even though the <head> and <body> 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 <body>

您正在使用的其他元素仍然必须位于中

#1