Est-il nécessaire d'écrire des balises HEAD, BODY et HTML?

194

Faut-il écrire <html>, <head>et<body> les étiquettes?

Par exemple, je peux faire une telle page:

<!DOCTYPE html>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script>

Et Firebug sépare correctement la tête et le corps: entrez la description de l'image ici

La validation W3C indique qu'elle est valide.

Mais je vois rarement cette pratique sur le Web.

Y a-t-il une raison d'écrire ces balises?

html tags Larry Cinabre
la source
5
Le validateur HTML5 à html5.validator.nu nécessite la titlebalise. C'est le plus petit document qu'il considère valide:<!DOCTYPE html> <title>A</title>
bonh

Réponses:

142

Omettre les html, headet les body balises est certainement permise par les spécifications HTML. La raison sous-jacente est que les navigateurs ont toujours cherché à être cohérents avec les pages Web existantes, et les toutes premières versions de HTML ne définissaient pas ces éléments. Quand HTML2.0 d'abord, il a été fait de manière à ce que les balises soient déduites lorsqu'elles sont manquantes.

Je trouve souvent pratique d'omettre les balises lors du prototypage et surtout lors de l'écriture des cas de test car cela permet de garder le balisage concentré sur le test en question. Le processus d'inférence doit créer les éléments exactement de la manière que vous voyez dans Firebug, et les navigateurs sont assez cohérents pour ce faire.

Mais...

IE a au moins un bogue connu dans ce domaine. Même IE9 le montre. Supposons que le balisage soit le suivant:

<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
   <input name="var1">
</form>

Vous devriez (et faites dans d'autres navigateurs) obtenir un DOM qui ressemble à ceci:

HTML
    HEAD
        TITLE
    BODY
        FORM action="#"
            INPUT name="var1"

Mais dans IE, vous obtenez ceci:

HTML
    HEAD
       TITLE
       FORM action="#"
           BODY
               INPUT name="var1"
    BODY

Voyez par vous-même.

Ce bogue semble limité à la formbalise de début précédant tout contenu texte et toute bodybalise de début.

Alohci
la source
5
HTML 1.0 a défini HTML, HEAD et BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt
Liza Daly
6
@Liza - Eh bien, on peut se demander si ce document définit HTML 1.0, mais je suis corrigé, que les éléments sont antérieurs à HTML 2.0. Merci. Cependant, voir w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… de 1992. Les éléments n'existent pas alors.
Alohci
1
Ce bug ne semble pas affecter Internet Explorer 11 (j'ai également testé IE8 dont je confirme qu'il est affecté)
jornane
2
@Justin - Ces restrictions sont en grande partie techniques et ne vous affecteront généralement pas. Donc oui, si cela importe pour votre page si un nœud de commentaire ou un espace blanc apparaît juste avant l'élément head ou juste à l'intérieur, (le JS de la page pourrait en dépendre), vous devez alors identifier explicitement la balise head start pour que cette relation soit correcte . Mais si ce n'est pas le cas (et je n'ai jamais écrit de page HTML là où il le fait), la balise head sera déduite quelque part de manière raisonnable et vous pouvez l'omettre en toute sécurité. De même pour les autres balises html, head et body.
Alohci
3
@Justin Cette réponse semble avoir un indice car la question est "Est-il nécessaire d'écrire des balises HEAD, BODY et HTML?" pas si c'est une bonne pratique. Conventions ont tendance à changer ... juste jeter un oeil à la Styleguide google ... qui est une convention qui vous stipule devez omettre ces balises ... :-)
Potherca
77

Le Google Style Guide for HTML recommande d'omettre toutes les balises facultatives.
Cela inclut <html>, <head>, <body>, <p>et <li>.

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

À des fins d'optimisation de la taille des fichiers et de numérisation, envisagez d'omettre les balises facultatives. La spécification HTML5 définit quelles balises peuvent être omises.

(Cette approche peut nécessiter l'établissement d'un délai de grâce en tant que ligne directrice plus large, car il diffère considérablement de ce que les développeurs Web apprennent généralement. Pour des raisons de cohérence et de simplicité, il vaut mieux omettre toutes les balises facultatives, pas seulement une sélection.)

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
Rima
la source
2
Exemple d'incompatibilité: l'outil de rechargement en direct que j'utilise pour le développement web (puer) insère automatiquement un script dans head. Sans enfin la balise <head>, cela ne fonctionne pas.
Offirmo
@Offirmo Qu'est-ce que c'est que ça?
Ken Sharp
@KenSharp livereload outils de développement web habituellement de travail en insérant un code dans les pages servis, comme ça: <script src="http://localhost:35729/livereload.js"></script>. Pour les modèles exotiques, ils ne comprennent pas où ils doivent insérer leur code.
Offirmo
1
@Offirmo La documentation de livereload indique que vous devez ajouter vous-même ce script à vos pages client. Vous utilisez peut-être une bibliothèque magique qui le fait pour vous. Cela devrait être la source de la difficulté que vous rencontrez.
kequc
7
L'omission de toutes les balises possibles est sage et insensée. Les économies de bande passante sont de minuscules% (en particulier depuis la plupart des connexions auto-compressées), tandis que les risques d'erreur humaine sur les cas marginaux sont élevés (pensez aux auteurs, aux éditeurs et même aux rédacteurs d'analyseurs HTML). Il est également plus difficile de trouver des erreurs (en raison du changement d'entropie).
TextGeek
48

Contrairement à la note de @Liza Daly sur HTML5, cette spécification est en fait assez spécifique sur les balises qui peuvent être omises et quand (et les règles sont un peu différentes de HTML 4.01, principalement pour clarifier où les éléments ambigus comme les commentaires et les espaces blancs appartiennent)

La référence pertinente est http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags , et elle dit:

  • La balise de début d'un élément html peut être omise si la première chose à l'intérieur de l'élément html n'est pas un commentaire.

  • La balise de fin d'un élément html peut être omise si l'élément html n'est pas immédiatement suivi d'un commentaire.

  • La balise de début d'un élément head peut être omise si l'élément est vide, ou si la première chose à l'intérieur de l'élément head est un élément.

  • La balise de fin d'un élément head peut être omise si l'élément head n'est pas immédiatement suivi d'un caractère espace ou d'un commentaire.

  • La balise de début d'un élément body peut être omise si l'élément est vide, ou si la première chose à l'intérieur de l'élément body n'est pas un caractère espace ou un commentaire, sauf si la première chose à l'intérieur de l'élément body est un élément script ou style.

  • La balise de fin d'un élément body peut être omise si l'élément body n'est pas immédiatement suivi d'un commentaire.

Votre exemple est donc HTML5 valide, et serait analysé comme ceci, avec les balises html, head et body dans leurs positions implicites:

<!DOCTYPE html><HTML><HEAD>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script></HEAD><BODY><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script></BODY></HTML>

Notez que le commentaire "ce script sera dans la tête" est en fait analysé comme faisant partie du corps, bien que le script lui-même fasse partie de la tête. Selon la spécification, si vous souhaitez que cela soit différent, les balises </HEAD>et <BODY>ne doivent pas être omises. (Bien que les balises <HEAD>et correspondantes </BODY>puissent toujours l'être)

Ian Clelland
la source
15

Il est valide de les omettre dans HTML4:

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

http://www.w3.org/TR/html401/struct/global.html

En HTML5, il n'y a aucun élément "requis" ou "facultatif" exactement, car la syntaxe HTML5 est définie de manière plus lâche. Par exemple title:

L'élément title est un enfant obligatoire dans la plupart des situations, mais lorsqu'un protocole de niveau supérieur fournit des informations sur le titre, par exemple dans la ligne Objet d'un e-mail lorsque HTML est utilisé comme format de création d'e-mail, l'élément title peut être omis .

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

Il n'est pas valide de les omettre dans le vrai XHTML5, bien que cela ne soit presque jamais utilisé (contre XHTML agissant comme HTML5).

Cependant, d'un point de vue pratique, vous souhaitez souvent que les navigateurs fonctionnent en "mode standard", pour une prévisibilité dans le rendu HTML et CSS. Fournir un DOCTYPE et une arborescence HTML plus structurée garantira des résultats inter-navigateurs plus prévisibles.

Liza Daly
la source
13
Ne confondez pas les éléments avec des étiquettes. Voir les commentaires de cHao ailleurs sur cette page. Pour html, headet body, les éléments sont obligatoires, mais les balises sont facultatives.
Alohci
En fait, vous vous trompez dans le dernier morceau. L'omission de balises est une fonctionnalité SGML DTD, tous les navigateurs prenant en charge l'analyse syntaxique SGML (c'est-à-dire tous les navigateurs) prennent également en charge l'omission de balises. La raison pour laquelle vous ne pouvez pas le faire en XHTML5 est qu'il s'agit de XML, pas de SGML. XML est trop stupide pour déduire des éléments.
OdraEncoded du
@OdraEncoded Pouvez-vous fournir une vérification de votre relevé, s'il vous plaît? Je ne trouve pas que ce soit le cas (voir la norme HTML ).
Brosse à dents
@OdraEncoded - proche, mais pas tout à fait vrai. L'omission de balises est une fonctionnalité facultative pour les analyseurs SGML (bien que la plupart la prennent en charge), telle que définie dans ISO 8879. Presque tous les analyseurs HTML la prennent en charge, bien que «html.parse» de Python ne semble pas le faire (voir stackoverflow.com/questions/29954170/… ).
TextGeek
14

Il est vrai que les spécifications HTML autorisent l'omission de certaines balises dans certains cas, mais il n'est généralement pas judicieux de le faire.

Il a deux effets - il rend la spécification plus complexe, ce qui rend plus difficile pour les auteurs de navigateurs d'écrire des implémentations correctes (comme le démontre IE en se trompant).

Cela rend la probabilité d'erreurs de navigateur dans ces parties de la spécification élevée. En tant qu'auteur de site Web, vous pouvez éviter le problème en incluant ces balises.Ainsi, bien que la spécification ne dise pas que vous devez le faire, cela réduit le risque de problèmes, ce qui est une bonne pratique d'ingénierie.

De plus, la dernière spécification HTML 5.1 WG indique actuellement (gardez à l'esprit que c'est un travail en cours et peut encore changer).

La balise de début d'un élément body peut être omise si l'élément est vide, ou si la première chose à l'intérieur de l'élément body n'est pas un caractère espace ou un commentaire, sauf si la première chose à l'intérieur de l'élément body est une méta, un lien, un script, un style ou élément de modèle.

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element

C'est un peu subtil. Vous pouvez omettre le corps et la tête, et le navigateur déduira alors où ces éléments doivent être insérés. Cela comporte le risque de ne pas être explicite, ce qui pourrait prêter à confusion.

Donc ça

<html>
  <h1>hello</h1>
  <script ... >
  ...

résulte que l'élément de script est un enfant de l'élément corps, mais cela

<html>
  <script ... >
  <h1>hello</h1>

entraînerait la balise de script étant un enfant de l'élément head.

Vous pourriez être explicite en faisant cela

<html>
    <body>
      <script ... >
      <h1>hello</h1>

et ensuite, selon ce que vous avez en premier, le script ou le h1, ils apparaîtront tous les deux de manière prévisible dans l'élément body. Ce sont des choses faciles à ignorer lors de la refactorisation et du débogage du code. (par exemple, vous avez JS qui recherche le 1er élément de script dans le corps - dans le deuxième extrait, il cesserait de fonctionner).

En règle générale, être explicite sur les choses vaut toujours mieux que de laisser les choses ouvertes à l'interprétation. À cet égard, XHTML est meilleur car il vous oblige à être complètement explicite sur la structure de votre élément dans votre code, ce qui le rend plus simple et donc moins sujet à une mauvaise interprétation.

Alors oui, vous pouvez les omettre et être techniquement valide, mais il est généralement imprudent de le faire.

Peter Bagnall
la source
1
IE se trompe parce que les auteurs se moquent des normes. C'est leur faute si cela ne fonctionne pas correctement. Les normes sont définies de sorte qu'ils doivent s'assurer qu'IE fonctionne avec eux.
Ken Sharp
3
@KenSharp Je ne suis pas en désaccord, mais jusqu'à ce que vous puissiez forcer tous vos clients à ne pas l'utiliser, nous sommes un peu coincés avec. Il vaut donc mieux écrire du code qui est complètement sans ambiguïté plutôt que de compter sur tout ce qui fonctionne comme il se doit.
Peter Bagnall
1
Les utilisateurs ont été forcés de vider IE pendant des années pour ne pas être conformes. Personne ne s'attend à ce que les utilisateurs continuent d'utiliser IE6, même si les gens installent toujours Windows XP. Nous ne pouvons pas non plus nous attendre à prendre en charge Windows 3.1 pour toujours. Erreur OSI niveau 8.
Ken Sharp
1
Exactement quelles balises peuvent être omises et exactement où, varie également selon la version HTML. Cela semble également être une bonne raison de les éviter (sauf dans les cas les plus évidents, les plus courants et les plus cohérents).
TextGeek
@TextGeek <!DOCTYPE html>.
Dét
-2

Firebug le montre correctement car votre navigateur corrige automatiquement le mauvais balisage pour vous. Ce comportement n'est spécifié nulle part et peut (variera) d'un navigateur à l'autre. Ces balises sont requises par le DOCTYPE que vous utilisez et ne doivent pas être omises.

L' élément html est l'élément racine de chaque page html. Si vous regardez la description de tous les autres éléments, cela indique où un élément peut être utilisé (et presque tous les éléments nécessitent soit la tête, soit le corps).

halfdan
la source
Donc, il peut ne pas s'agir d'un navigateur croisé?
Larry Cinnabar
5
en d'autres termes - mauvaise pratique donnant des résultats indéfinis.
Randy
3
@Innuendo Ce n'est pas parce que quelque chose est gros qu'il est bien assemblé.
Demian Brecht
2
En tant qu'appel à l'autorité, je trouve cela peu convaincant. google.com n'est pas non plus un code HTML valide. Cela ne signifie pas que le vôtre devrait l'être.
Rein Henrichs
17
Les éléments doivent exister. Rien ne dit que les balises le font. Le HTML sans balises html / head / body est, en fait, valide tant qu'aucun élément n'apparaît là où il ne devrait pas. ( <title>après a <p></p>, par exemple.)
cHao