web-dev-qa-db-fra.com

En HTML5, les balises <header> et <footer> peuvent-elles apparaître en dehors de la balise <body>?

J'utilise actuellement les balises ci-dessus de cette manière (ordre des balises classique):

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

L'utilisation et les spécifications des balises étaient très rigides dans les versions précédentes de HTML (4.x), tandis que HTML5 n'a pas vraiment besoin de <head> et même <body> Mots clés.

J'utiliserais donc la structure suivante, qui à mon humble avis est beaucoup plus sémantique que la précédente.

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

Qu'est-ce que tu penses?

htmlhtml5tags
39
Salaros

Eh bien, le <head> la balise n'a rien à voir avec le <header> tag. Dans le head vient toutes les métadonnées et tout, tandis que le header n'est qu'un composant de mise en page.
Et la mise en page vient dans body. Je suis donc en désaccord avec vous.

45
Iulius Curt

Obtenons une réponse canonique ici. Je vais référencer le spécification HTML5 .

Tout d'abord, 12.1.2.4 Tags optionnels :

Un élément de headbalise de début ​​peut être omis si l'élément est vide, ou si la première chose à l'intérieur de l'élément head est un élément.

Un élément headbalise de fin peut être omis si l'élément head n'est pas immédiatement suivi d'un caractère espace ou a - commentaire.

Un body élément start tag peut être omis si l'élément est vide, ou si la première chose à l'intérieur de l'élément body n'est pas un espace caractère ou commentaire, sauf si la première chose à l'intérieur de l'élément body est un élément script ou style.

Un élément bodyend tag peut être omis si l'élément body n'est pas immédiatement suivi d'un comment.

Ensuite, le 4.1.1 L'élément html :

Modèle de contenu: Un élément head suivi d'un élément body.

Ayant les restrictions citées et l'ordre des éléments strictement défini, nous pouvons facilement déterminer quelles sont les règles pour placer la balise implicite <body>.

Étant donné que <head/> Doit venir en premier et qu'il ne peut contenir que des éléments (et non du texte direct), tous les éléments adaptés à <head/> Deviendront la partie de <head/> Implicite, jusqu'au premier texte errant ou élément spécifique <body/>. À ce moment, tous les éléments et nœuds de texte restants seront placés dans <body/>.

Examinons maintenant votre deuxième extrait:

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

Ici, l'élément <header/> Ne convient pas à <head/> (C'est contenu de flux), la balise <body> Sera placée juste avant. En d'autres termes, le document sera compris par navigateur comme suit:

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

Et c'est certainement pas ce que vous attendiez. Et comme une note, il est également invalide; voir 4.4.1 L'élément body :

Contextes dans lesquels cet élément peut être utilisé: Comme deuxième élément d'un élément html.

[...]

Dans les documents conformes, il n'y a qu'un seul élément body.

Ainsi, <header/> Ou <footer/>sera correctement utilisé dans ce contexte. Eh bien, ils seront pratiquement équivalents au premier extrait. Mais cela entraînera un élément <body/> Supplémentaire au milieu d'un <body/> Qui n'est pas valide.

En remarque, vous confondez probablement <body/> Ici avec la partie principale du conten qui n'a pas d'élément spécifique. Vous pouvez consulter cette page pour d'autres solutions pour obtenir ce que vous voulez.

Citant 4.4.1 L'élément body encore une fois:

L'élément body représente le contenu principal du document.

ce qui signifie tous le contenu. Et l'en-tête et le pied de page font partie de ce contenu.

28
Michał Górny

Je vois ce que vous essayez de faire, vous essayez d'utiliser le <body> tag comme conteneur pour le contenu principal de la page. Utilisez plutôt <main> tag , comme spécifié dans la spécification HTML5. J'utilise cette disposition:

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

Je ne suis pas sûr à 100% mais je pense que quoi que ce soit en dehors du <body> tag est considéré comme une métadonnée et ne sera pas rendu par le navigateur. Je ne pense pas que le DOM puisse y accéder non plus.

Pour conclure, utilisez le <main> tag pour votre contenu et continuez à mettre en forme votre code HTML comme vous l'avez fait dans votre premier extrait de code. Vous avez utilisé le <section> tag mais je pense que cela vient avec des problèmes de mise en forme étranges lorsque vous essayez d'appliquer CSS.

17
luc122c

Si vous voulez vraiment qu'il ait l'air plus sémantique, comme avoir le <body> au milieu, vous pouvez utiliser le <main> élément. Avec toutes les avancées récentes, le <body>element n'est pas aussi sémantique qu'autrefois mais il suffit de le considérer comme un wrapper dans lequel le port de vue voit.

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

Selon la norme HTML , le modèle de contenu de l'élément HTML est:

Un élément head suivi d'un élément body.

Vous pouvez soit définir l'élément BODY dans le code source:

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

ou vous pouvez omettre l'élément BODY:

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

Cependant, il n'est pas valide de placer l'élément BODY à l'intérieur du contenu de la page Web (entre d'autres éléments ou contenu textuel), comme ceci:

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

Je suis d'accord avec certaines des réponses des autres. Les balises <head> Et <header> Ont deux fonctions uniques et très indépendantes. La balise <header>, Si je ne me trompe pas, a été introduite en HTML5 et a été créée pour une accessibilité accrue, notamment pour les lecteurs d'écran. Il est généralement utilisé pour indiquer l'en-tête de votre document et, afin de fonctionner correctement et efficacement, doit être placé à l'intérieur de la balise <body>. La balise <head>, Puisqu'elle est d'origine, est utilisée pour le référencement en ce sens qu'elle construit toutes les métadonnées nécessaires et autres. Une structure HTML valide pour votre page avec les deux balises incluses ressemblerait à quelque chose comme ceci:

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

Il s'agit de la structure générale d'un 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>
1
Joshua Michael Calafell

Même si le <head> et <body>balises ne sont pas nécessaires, les éléments sont toujours là - c'est juste que le navigateur peut déterminer où les balises auraient été du reste du document.

Les autres éléments que vous utilisez doivent toujours être à l'intérieur du <body>

0
Gareth