在HTML5中,<header>和<footer>标签是否可以出现在<body>标签之外?

Sal*_*ros 39 html tags html5

我目前正在以这种方式使用上述标签(经典标签顺序):

<html>
  <head>...</head>
  <body>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

标签的使用和规格在以前版本的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>
Run Code Online (Sandbox Code Playgroud)

你怎么看?

Iul*_*urt 46

好吧,<head>标签与标签无关<header>.在head所有的元数据和东西,而这header只是一个布局组件.
并且布局进入body.所以我不同意你的意见.

  • 对.`<body>`表示HTML文档的主体,即浏览器预期呈现的整体内容."更多语义"意味着更有意义,虽然您的想法可能对您(以及其他人)更有意义,但它并不是HTML规范中商定的含义. (3认同)

Mic*_*rny 28

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

首先,12.1.2.4可选标签:

一个head元素的开始标记,如果该元素为空,或者如果里面的第一件事,可以省略head元素的元素.

一个head元素的结束标记,如果可以省略head元素不紧跟一个空格字符评论.

一个body元素的开始标记,如果该元素是空的,或者可以被省略,如果里面的第一件事body元素不是空格字符评论,除非里面的第一件事body元素是一个scriptstyle元素.

一个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>
Run Code Online (Sandbox Code Playgroud)

这里,<header/>元素不适合<head/>(它的流内容),<body>标签将被放置在它之前.换句话说,浏览器将理解该文档如下:

<html>
  <head/>
  <body>
    <header>...</header>
    <body>
      <section>...</section>
      <section>...</section>
      <section>...</section>
    </body>
    <footer>...</footer>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

这肯定不是你所期待的.而且作为一个注释,它也是无效的; 见4.4.1身体元素:

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

[...]

在符合文件的情况下,只有一个body要素.


因此,在这种情况下正确使用<header/><footer/> 被正确使用.好吧,它们实际上相当于第一个片段.但是这会导致<body/>a中间的其他元素<body/>无效.


作为一个侧面说明,你可能混淆<body/>这里与内容的主要部分不具有特定元素.您可以在该页面上查找其他解决方案,了解您想要的内容.

引用4.4.1身体元素再次:

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

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


luc*_*22c 17

我看到你要做的是什么,你试图使用<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>
Run Code Online (Sandbox Code Playgroud)

我不是100%肯定,但我认为<body>标签之外的任何内容都被视为元数据,并且不会被浏览器呈现.我不认为DOM也可以访问它.

最后,请使用<main>内容标记,并按照第一个代码段中的正确方式格式化HTML格式.您使用了<section>标记但我认为当您尝试应用CSS时会出现一些奇怪的格式问题.


Tof*_*ior 9

如果你真的希望它看起来更像语义,就像<body>在中间你可以使用<main>元素.随着最近的所有进步,<body>元素不像以前那样具有语义,但您只需将其视为视口所看到的包装器.

<html>
    <head>
    </head>
    <body>
        <header>
        </header>
        <main>
            <section></section>
            <article></article>
        </main>
        <footer>
        </footer>
    <body>
</html>
Run Code Online (Sandbox Code Playgroud)