logo标签列表

在HTML5中，<header>和<footer>标签能否出现在<body>标签之外？

htmltags
50

我目前正在以经典标签顺序使用上述标签：

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

在HTML的早期版本（4.x）中，标签的使用和规范非常严格，而HTML5并不真正需要<head>和<body>标签。

因此，我会使用以下结构，我认为比以前的更具语义化。

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

你认为呢？

2
HTML5很宽容，但并非“那么”宽容。我认为，您已经包含了BODY元素，多余地声明了BODY，然后在包含FOOTER之前关闭了BODY，这使得它无效。HTML5有很多好的“隐式”，但是不正确地终止元素会让您付出代价。 - rob - not a robber
headе’Ңbodyж Үзӯҫзҡ„еӯҳеңЁдёҺзјәеӨұ规еҲҷеңЁHTML5дёӯдёҺHTML 4.xе®Ңе…ЁзӣёеҗҢгҖӮе®һйҷ…дёҠпјҢе®ғ们дёҺHTML 2.0дёӯзҡ„规еҲҷе®Ңе…ЁзӣёеҗҢгҖӮеҸӘжңүXHTMLдёҚеҗҢгҖӮ - Alohci
8个回答
55

好的，<head> 标签与 <header> 标签没有任何关系。在 head 中包含所有元数据和其他内容，而 header 只是一个布局组件。
而布局放在 body 中。所以我不同意你的观点。

1
我同意@iuliux的观点，所有的显示内容都应该在<body>中，所以<header>和<footer>应该始终在其中。就像他所说的，<head>只是用于元数据。 - cander
3
是的。<body> 意味着 HTML 文档的主体，即浏览器应该呈现的全部内容。 “更语义化” 意味着更有意义，虽然您的想法可能对您（以及其他人）更有意义，但它并不是 HTML 规范中所同意的含义。 - Paul D. Waite
31

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

首先，看12.1.2.4 可选标签：

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

如果head元素后面不是紧跟着空格字符或注释，则可以省略head元素的结束标记。

如果body元素是空的，或者body元素内第一件事情不是空格字符或注释（除非body元素内第一件事情是script或style元素），则可以省略body元素的开始标记。

如果body元素后面不是紧跟着注释，则可以省略body元素的结束标记。

接下来是4.1.1 HTML元素：

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

有了这些限制和严格定义的元素顺序，我们就可以轻松确定放置隐式<body>标记的规则。

由于<head/>必须先出现，它只能包含元素（而不能是直接文本），所有适用于<head/>的元素将成为隐式<head/>的一部分，直到出现第一个杂散文本或<body/>特定元素。在那一刻，所有剩余的元素和文本节点将被放置在<body/>中。

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

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

在这里，<header/> 元素不适合用于 <head/> (它是 流内容)，<body> 标签将会紧接着放在它之前。换句话说，浏览器将会按照以下方式理解文档：

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

然而，这绝对不是你期望的结果。需要注意的是，它也是无效的；请参见4.4.1 The body element:

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

[...]

在符合规范的文档中，只有一个body元素。

因此，在这种情况下，<header/>或<footer/>将被正确地使用。嗯，它们实际上与第一段代码片段几乎相同。但这会导致在<body/>中间出现一个额外的<body/>元素，这是无效的。

顺便说一下，你可能会将这里的<body/>与内容的主要部分混淆，后者没有特定的元素。你可以查看该页面以获取其他解决方案来获得你想要的内容。

再次引用4.4.1 The body element中的内容：

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

这意味着所有内容，包括头部和底部。

1
如果您可以添加一个TL;DR并在原始问题标题“页眉和页脚是否需要在正文中”中添加结论，那将非常有帮助。我猜您在最后一句话中的意思是，是的，正文和页脚确实需要在body标签中。 - redfox05
20

我知道你想要做什么，你想使用<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>

我不是100%确定，但我认为在<body>标签之外的任何内容都被视为元数据，浏览器不会对其进行渲染。我也认为DOM无法访问它。

总之，请使用<main>标签来包含您的内容，并像您在第一个代码片段中一样正确地格式化您的HTML。您使用了<section>标签，但我认为当您尝试应用CSS时它会带来一些奇怪的格式问题。

1
主要元素在IE中只有部分支持Can i use it。 - Persijn
1
正确。根据您提供的链接，它是在规范的后期添加的，我们都知道IE如何处理常见规范的不同之处。感谢您指出这一点！ - luc122c
11

如果您真的希望页面看起来更加语义化，如将 <body> 标签放在中间，可以使用 <main> 标签。随着最近的发展，<body> 标签已不像以前那么语义化，但您只需要将其视为一个包装器，其中可以看到视口。

<html>
    <head>
    </head>
    <body>
        <header>
        </header>
        <main>
            <section></section>
            <article></article>
        </main>
        <footer>
        </footer>
    <body>
</html>
3
根据HTML标准，HTML元素的内容模型为：

head元素后跟body元素。

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

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

或者您可以省略BODY元素：
<html>
    ... web-page ...
</html>

然而，将BODY元素放置在网页内容中（在其他元素或文本内容之间）是无效的，例如：
<html>
    ... content ...
    <body>
        ... content ...
    </body>
    ... content ...
</html>
1
不，实际上不会。内部的body元素将不存在。显式的body标签被有效地忽略了（尽管隐式创建的body元素采用了开始标记上的任何属性）。请参见此处：http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%20%20%20%20%3Cheader%3E...%3C%2Fheader%3E%0A%20%20%20%20%3Cbody%20id%3D%22x%22%3E...%3C%2Fbody%3E%0A%20%20%20%20%3Cfooter%3E...%3C%2Ffooter%3E%0A%3C%2Fhtml%3E%0A - Alohci
@Alohci 你说得对。这种行为甚至跨浏览器。有趣的是，HTML代码是无效的。 - Šime Vidas
2

我同意其他人的回答。 <head> 和 <header> 标签有两个不同且毫无关联的功能。如果我没记错，<header> 标签是在HTML5中引入的，旨在增加可访问性，特别是对于屏幕阅读器。通常用于指示文档的标题，并且为了有效地工作，应放置在 <body> 标签内。自从它产生以来，<head> 标签用于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>
几乎了。头部元素提供语义价值，这是HTML5中添加的许多此类元素之一。 - james.garriss
<pedantic>我认为这是错误的；<head>用于元数据，其中可能包含面向SEO的内容。</pedantic> - Dan Lugg
1
这是一个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>
0
尽管<head>和<body>标签不是必需的，但这些元素仍然存在 - 只是浏览器可以从文档的其余部分推断出标签应该在哪里。
您使用的其他元素仍然必须在<body>内。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接