Html 在 HTML5 中，<header> 和 <footer> 标签可以出现在 <body> 标签之外吗？

Question

提问by Salaros

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<head>甚至不需要<body>标签。

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

所以我会使用以下结构，恕我直言，它比前一个更具语义。

<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?

你怎么认为？

Answer 1

回答by Iulius Curt

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

好吧，<head>标签与标签无关<header>。在head谈到所有元数据和内容，而header仅仅是一个布局组件。
和布局进入body。所以我不同意你的观点。

Answer 2

回答by Micha? Górny

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 headelement's start tagmay be omitted if the element is empty, or if the first thing inside the headelement is an element.
A headelement's end tagmay be omitted if the headelement is not immediately followed by a space characteror a comment.
A bodyelement's start tagmay be omitted if the element is empty, or if the first thing inside the bodyelement is not a space characteror a comment, except if the first thing inside the bodyelement is a scriptor styleelement.
A bodyelement's end tagmay be omitted if the bodyelement is not immediately followed by a comment.

一个head元素的开始标记，如果该元素为空，或者如果里面的第一件事，可以省略head元素的元素。
一个head元素的结束标记，如果可以省略head元素不紧跟一个空格字符或评论。
一个body元素的开始标记，如果该元素是空的，或者可以被省略，如果里面的第一件事body元素不是空格字符或评论，除非里面的第一件事body元素是一个script或style元素。
一个body元素的结束标记，如果可以省略body元素不紧跟一个注释。

Then, the 4.1.1 The html element:

然后，4.1.1 html元素：

Content model:A headelement followed by a bodyelement.

内容模型：一个head元素后跟一个body元素。

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

有了引用的限制和严格定义的元素顺序，我们可以很容易地找出放置隐式<body>标签的规则。

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/>.

由于<head/>must 放在最前面，并且它只能包含元素（而不是直接文本），因此所有适用于的元素<head/>都将成为 hidden 的一部分<head/>，直到第一个杂散文本或<body/>-specific 元素。那时，所有剩余的元素和文本节点将被放置在<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:

在这里，<header/>元素不适合<head/>（它的流内容），<body>标签将被放置在它之前。换句话说，该文档将被浏览器理解为：

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

And that's certainly notwhat you were expecting. And as a note, it is invalid as well; see 4.4.1 The body element:

这当然不是您所期望的。请注意，它也是无效的；见4.4.1 body 元素：

Contexts in which this element can be used:As the second element in an htmlelement.
[...]
In conforming documents, there is only one bodyelement.

可以使用此元素的上下文：作为元素中的第二个html元素。
[...]
在符合文档中，只有一个body元素。

Thus, the <header/>or <footer/>willbe 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.

因此，<header/>or<footer/>将在此上下文中正确使用。好吧，它们实际上等同于第一个片段。但这会导致<body/>a 中间的附加元素<body/>无效。

As a side note, you're probably confusing <body/>here with the main part of the contentwhich has no specific element. You could look up that page for other solutions on getting what you want.

作为旁注，您可能<body/>在这里与没有特定元素的内容的主要部分混淆。您可以在该页面上查找有关获得所需内容的其他解决方案。

Quoting 4.4.1 The body elementonce again:

再次引用4.4.1 body 元素：

The bodyelement represents the main content of the document.

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

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

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

Answer 3

回答by luc122c

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:

我明白你在做什么，你正在尝试使用<body>标签作为页面主要内容的容器。而是使用HTML5 规范中指定的<main>标签。我使用这种布局：

    <!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% 确定，但我认为<body>标签之外的任何内容都被视为元数据，不会被浏览器呈现。我也不认为 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.

总而言之，<main>为您的内容使用标记，并按照您在第一个代码片段中的正确方式来设置 HTML 格式。您使用了<section>标签，但我认为当您尝试应用 CSS 时，会出现一些奇怪的格式问题。

Answer 4

回答by Tofu Warrior

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.

如果您真的希望它看起来更具语义，就像<body>在中间放置，则可以使用该<main>元素。随着最近的所有进步，<body>元素不再像以前那样语义化，但您只需要将其视为视口可见的包装器。

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

Answer 5

回答by ?ime Vidas

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

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

A head element followed by a body element.

一个 head 元素后跟一个 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>

Answer 6

回答by James M

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:

我同意其他人的一些答案。在<head>和<header>标签有两个独特的，非常不相关的功能。<header>如果我没记错的话，这个标签是在 HTML5 中引入的，是为了增加可访问性而创建的，即用于屏幕阅读器。它通常用于指示文档的标题，为了正确有效地工作，应将其放置在<body>标签内。该<head>标签，因为它的起源，在它构造所有必需的元数据和这样的用于搜索引擎优化。包含两个标签的页面的有效 HTML 结构如下所示：

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

Answer 7

回答by Joshua Michael Waggoner

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>

Answer 8

回答by Gareth

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

即使不需要<head>和<body>标签，元素仍然存在 - 只是浏览器可以从文档的其余部分找出标签的位置。

The other elements you're using still have to be inside the <body>

您使用的其他元素仍然必须在 <body>

Html 在 HTML5 中，<header> 和 <footer> 标签可以出现在 <body> 标签之外吗？

提问by Salaros

回答by Iulius Curt

回答by Micha? Górny

回答by luc122c

回答by Tofu Warrior

回答by ?ime Vidas

回答by James M

回答by Joshua Michael Waggoner

回答by Gareth

相关推荐

最近更新

标签

Html 在 HTML5 中，<header> 和 <footer> 标签可以出现在 <body> 标签之外吗？

提问by Salaros

回答by Iulius Curt

回答by Micha? Górny

回答by luc122c

回答by Tofu Warrior

回答by ?ime Vidas

回答by James M

回答by Joshua Michael Waggoner

回答by Gareth

相关推荐

如何从列数据而不是 HTML 中的行数据创建表格？

Html HTML5 块引用与作者

innerHTML 添加文本但不添加 html 标签

Html css3中的按钮宽度

相关推荐

最近更新

标签