Est-il nécessaire d'écrire les balises HEAD, BODY et HTML?
Est-il nécessaire d'écrire les balises <html>, <head> et <body>?
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: 
La validation W3C indique que c'est valide.
Mais je vois rarement cette pratique sur le web.
Y a-t-il une raison d'écrire ces balises?
Omettre les balises html, head et body est certainement autorisé 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 que les toutes premières versions de HTML ne définissaient pas ces éléments. Quand HTML 2.0 d’abord, c’est fait de manière à ce que les tags soient déduits s’ils sont manquants.
Je trouve souvent pratique d'omettre les balises lors du prototypage, en particulier lors de la rédaction de scénarios de test, car cela permet de garder la marge de manœuvre centrée sur le test en question. Le processus d'inférence devrait créer les éléments exactement de la manière que vous voyez dans Firebug, et les navigateurs sont assez cohérents à cet égard.
Mais...
IE a au moins un bogue connu dans ce domaine. Même IE9 expose cela. Supposons que le balisage est le suivant:
<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
<input name="var1">
</form>
Vous devriez (et le faire 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
Ce bogue semble limité à la balise de début form précédant tout contenu textuel et toute balise de début body.
Le Guide de style de Google pour HTML recommande de supprimer toutes les balises facultatives.
Cela inclut <html>, <head>, <body>, <p> et <li>.
https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags
Afin d'optimiser la taille du fichier et de faciliter l'analyse, envisagez d'omettre les balises facultatives. La spécification HTML5 définit les balises pouvant être omises.
(Cette approche peut nécessiter l’instauration d’une période de grâce plus large, car elle 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 est préférable d’omettre toutes les balises facultatives, et 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.
Contrairement à la note de @Liza Daly à propos de HTML5, cette spécification est en fait assez précise sur les balises qui peuvent être omises et à quel moment (et les règles sont légèrement différentes de HTML 4.01, principalement pour clarifier à quel endroit appartiennent les éléments ambigus tels que les commentaires et les espaces)
La référence pertinente est http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags , et indique:
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 de tête peut être omise si l'élément est vide ou si la première chose à l'intérieur de l'élément de tête est un élément.
Une balise de fin d'élément de tête peut être omise si l'élément de tête n'est pas immédiatement suivi d'un caractère d'espacement 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 d'espacement ni 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 valide en HTML5 et sera 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 les spécifications, si vous souhaitez que cela soit différent, les balises </HEAD> et <BODY> ne peuvent pas être omises. (Bien que les balises <HEAD> et </BODY> correspondantes puissent toujours l'être)
Il est valide de les omettre en 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’existe aucun élément "obligatoire" ou "facultatif", car la syntaxe HTML5 est définie de manière plus vague. Par exemple, title:
L'élément title est un enfant requis dans la plupart des situations, mais lorsqu'un protocole de niveau supérieur fournit des informations de titre, par exemple, Dans la ligne Objet d'un courrier électronique lorsque HTML est utilisé comme format de création de courrier électronique, l'élément title peut être omis.
http://www.w3.org/TR/html5/semantics.html#the-title-element-
Ce n'est pas valide de les omettre dans le vrai XHTML5, bien que cela ne soit presque jamais utilisé (par opposition à XHTML qui agit comme HTML5).
Cependant, d’un point de vue pratique, vous voulez souvent que les navigateurs s’exécutent en "mode standard", afin de rendre le rendu HTML et CSS prédictible. Fournir un DOCTYPE et une arborescence HTML plus structurée garantira des résultats plus prévisibles entre navigateurs.
Il est vrai que les spécifications HTML permettent d’omettre certaines balises dans certains cas, mais il est généralement déconseillé de le faire.
Il a deux effets - cela rend la spécification plus complexe, ce qui complique la tâche des auteurs de navigateur pour écrire les implémentations correctes (comme le montre IE se tromper).
Cela rend la probabilité d'erreurs de navigation 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, même si la spécification ne dit pas que vous devez le faire, cela réduit les risques d'erreur, ce qui constitue 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 qu’elle 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 d'espacement ni 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 un é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 risque de ne pas être explicite, ce qui pourrait prêter à confusion.
Donc ça
<html>
<h1>hello</h1>
<script ... >
...
aboutit à l'élément de script étant un enfant de l'élément body, mais cela
<html>
<script ... >
<h1>hello</h1>
aurait pour conséquence que la balise de script soit un enfant de l'élément head.
Vous pourriez être explicite en faisant cela
<html>
<body>
<script ... >
<h1>hello</h1>
et quel que soit 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 du refactoring et du débogage du code. (Supposons, par exemple, que JS recherche le premier élément de script dans le corps; dans le deuxième extrait, il ne fonctionnerait plus).
En règle générale, il est toujours préférable d'être explicite à propos des choses que de laisser les choses ouvertes à l'interprétation. À cet égard, le format XHTML est préférable, car il vous oblige à être complètement explicite sur la structure de votre élément dans votre code, ce qui le simplifie et le rend donc moins sujet à une mauvaise interprétation.
Alors oui, vous pouvez les omettre et être techniquement valables, mais il est généralement déconseillé de le faire.
Firebug l'affiche correctement car votre navigateur corrige automatiquement le mauvais marquage. Ce comportement n'est spécifié nulle part et peut varier d'un navigateur à l'autre. Ces balises sont requises par le DOCTYPE que vous utilisez et ne doivent pas être omises.
Le élément html est l'élément racine de chaque page html. Si vous regardez la description de tous les autres éléments, vous y verrez où un élément peut être utilisé (et presque tous nécessitent une tête ou un corps).