web-dev-qa-db-ja.com

HTML5では、<header>および<footer>タグを<body>タグの外側に表示できますか？

私は現在、この方法で上記のタグを使用しています（クラシックタグの順序）：

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

どう思いますか？

htmlhtml5tags
39
Salaros

<head>タグは<header>タグとは何の関係もありません。 headにはすべてのメタデータとものが含まれていますが、headerは単なるレイアウトコンポーネントです。
そしてレイアウトはbodyに入ります。だからあなたに同意しない。

45
Iulius Curt

ここで正解を取得しましょう。 HTML5仕様 を参照します。

まず、 12.1.2.4オプションのタグ ：

head要素のstart tagは、要素が空の場合、またはhead要素内の最初のものが要素である場合は省略できます。

head要素の直後にスペース文字またはコメントが続かない場合、head要素の終了タグは省略できます。

body要素の開始タグは、要素が空の場合、またはbody要素内の最初のものがスペース文字またはcomment。ただし、body要素内の最初のものがscriptまたはstyle要素である場合を除きます。

body要素の直後にcommentが続かない場合、body要素の終了タグは省略できます。

次に、 4.1.1 html要素 ：

コンテンツモデル：head要素とそれに続くbody要素。

引用された制限と厳密に定義された要素の順序により、暗黙の<body>タグを配置するためのルールを簡単に決定できます。

<head/>は最初に来る必要があり、要素のみを含むことができ（直接テキストではない）、<head/>に適したすべての要素は、最初の浮遊テキストまで暗黙の<head/>の一部になります。または<body/>-固有の要素。その時点で、残りのすべての要素とテキストノードは<body/>に配置されます。

次に、2番目のスニペットについて考えてみましょう。

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

ここでは、<header/>要素は<head/>（flow content）には適していません。<body>タグはその直前に配置されます。つまり、ドキュメントはブラウザによって次のように理解されます。

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

そしてそれは確かにあなたが期待していたnotです。また、注記として、これも無効です。 4.4.1 body要素 を参照してください：

この要素を使用できるコンテキスト：html要素の2番目の要素として。

[...]

適合ドキュメントには、body要素が1つだけあります。

したがって、<header/>または<footer/>はがこのコンテキストで正しく使用されます。まあ、彼らは最初のスニペットと実質的に同等になります。ただし、これにより、無効な<body/>の中間に<body/>要素が追加されます。

サイドノートとして、おそらくここで<body/>を コンテンツの主要部分 と混同しているでしょう。特定の要素はありません。必要なものを取得するための他のソリューションについては、そのページを検索できます。

引用 4.4.1 body要素 もう一度：

body要素は、ドキュメントのメインコンテンツを表します。

これは、コンテンツallを意味します。そして、ヘッダーとフッターの両方がこのコンテンツの一部です。

28
Michał Górny

あなたがやろうとしていることがわかりました。あなたはページのメインコンテンツのコンテナとして<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を適用しようとすると、奇妙なフォーマットの問題が発生すると思います。

17
luc122c

真ん中に<body>があるようにより意味的に見せたい場合は、<main>要素を使用できます。最近の進歩により、<body>elementは以前ほどセマンティックではありませんが、ビューポートが見るラッパーと考える必要があります。

<html>
    <head>
    </head>
    <body>
        <header>
        </header>
        <main>
            <section></section>
            <article></article>
        </main>
        <footer>
        </footer>
    <body>
</html>
9
Tofu Warrior

HTML標準による の場合、HTML要素のコンテンツモデルは次のとおりです。

Body要素が後に続くhead要素。

ソースコードでBODY要素を定義できます。

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

または、BODY要素を省略できます。

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

ただし、次のように、Webページコンテンツ内に（他の要素またはテキストコンテンツの間に）BODY要素を配置することは無効です。

<html>
    ... content ...
    <body>
        ... content ...
    </body>
    ... content ...
</html>
3
Šime Vidas

他の回答のいくつかに同意します。 <head>および<header>タグには、2つの一意で非常に無関係な関数があります。 <header>タグは、私が間違っていない場合、HTML5で導入され、アクセシビリティの向上、つまりスクリーンリーダー用に作成されました。通常、ドキュメントの見出しを示すために使用され、適切かつ効果的に機能するために、<body>タグ内に配置する必要があります。 Originなので、<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>
2
James M

これは、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>
1
Joshua Michael Calafell

<head>および<body>tagsは必須ではありませんが、要素はまだ存在します-それは、ブラウザがタグが他のどこにあるかを解決できるということですドキュメントの。

使用している他の要素は、まだ<body>内にある必要があります

0
Gareth