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

Question

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

est-il nécessaire d'écrire <html> , <head> et <body> tags?

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 Firebugg sépare correctement la tête et le corps: enter image description here

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 étiquettes?

169

html html5

demandé sur Larry Cinnabar 2011-04-13 01:46:03

6 réponses

score 129 · Answer 1

omettant les html , head , et body tags est certainement autorisé par les spécifications HTML. La raison sous-jacente est que les navigateurs ont toujours cherché à être cohérent avec les pages Web existantes, et les versions très anciennes de HTML n'ont pas défini ces éléments. Quand HTML ~~2.0~~ a fait pour la première fois, il a été fait d'une manière que les étiquettes seraient déduites en cas de manque.

je trouve souvent qu'il est commode de les omettre les tags lors du prototypage et surtout lors de l'écriture de cas de test car il permet de garder le mark-up concentré 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érentes.

mais...

IE a au moins un bug connu dans ce domaine. Même IE9 montre ceci. Supposons que la marge soit la suivante:

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

vous devriez (et ce 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 balise de démarrage form précédant tout contenu de texte et toute balise de démarrage body .

score 61 · Answer 2

le guide de Style de Google pour HTML recommande d'omettre toutes les balises optionnelles.

Cela inclut: <html> , <head> , <body> , <p> et <li> .

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

pour l'optimisation de la taille des fichiers et la scannabilité, considérer omettre les étiquettes optionnelles. La spécification HTML5 définit ce que tags être omis.

(cette approche peut exiger qu'un délai de grâce soit ligne directrice car il est très différent de ce que les développeurs web sont généralement enseigné. Pour des raisons de cohérence et de simplicité, c'est mieux servi en omettant toutes les balises facultatives, non seulement une sélection.)

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


<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

score 43 · Answer 3

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

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

html élément de la balise de début peut être omis 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.
l'étiquette 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 tête l'étiquette d'extrémité de l'élément peut être omise si l'élément de tête n'est pas immédiatement suivi d'un caractère d'espace ou d'un commentaire.
l'étiquette de départ d'un élément de corps peut être omise si l'élément est vide, ou si la première chose à l'intérieur de l'élément de corps n'est pas un caractère d'espace ou un commentaire, sauf si la première chose à l'intérieur de l'élément de corps est un élément de script ou de style.
l'étiquette d'extrémité d'un élément de corps peut être omise si le corps de l'élément n'est pas immédiatement suivi d'un commentaire.

donc votre exemple est valide HTML5, 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 "this script will be in head" est en fait interprété comme faisant partie du corps, bien que le script lui-même fasse partie de la tête. Selon la spécification, si vous voulez être différent, puis le Les étiquettes </HEAD> et <BODY> ne peuvent pas être omises. (Bien que les étiquettes correspondantes <HEAD> et </BODY> puissent encore être)

score 14 · Answer 4

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

dans HTML5, il n'y a pas exactement d'éléments" requis "ou" optionnels", car la syntaxe HTML5 est définie de façon plus vague. Par exemple, title :

l'élément titre est un enfant requis dans la plupart des situations, mais lorsqu'un protocole de niveau supérieur fournit des informations sur le titre, par exemple dans la ligne D'objet d'un courriel lorsque HTML est utilisé comme format de création d'un courriel, l'élément titre peut être omis.

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

il n'est pas valide de les omettre dans true XHTML5, bien que cela ne soit presque jamais utilisé (versus XHTML-acting-like-HTML5).

cependant, d'un point de vue pratique, vous voulez souvent navigateurs à exécuter en " mode standard," pour la prévisibilité dans le rendu HTML et CSS. Fournir un DOCTYPE et une arborescence HTML plus structurée garantira des résultats plus prévisibles entre les navigateurs.

score 12 · Answer 5

il est vrai que les spécifications HTML permettent d'omettre certaines balises dans certains cas, mais généralement le faire est imprudent.

il a deux effets - il rend la spécification plus complexe, ce qui à son tour rend plus difficile pour les auteurs de navigateur à écrire des implémentations correctes (comme démontré par IE obtenir tort).

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 étiquettes-donc, bien que le spec ne dit pas que vous devez, le faire réduit les chances que les choses vont mal, ce qui est une bonne pratique d'ingénierie.

qui plus est, la dernière spécification HTML 5.1 WG dit actuellement (gardez à l'esprit qu'il s'agit d'un travail en cours et qui pourrait encore changer).

l'étiquette de départ d'un élément de corps peut être omise si l'élément est vide, ou si la première chose à l'intérieur de l'élément de corps n'est pas un caractère d'espace ou un commentaire, sauf si le première chose à l'intérieur de l'élément de corps est une meta, link, script, style, ou un élément du modèle.

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

C'est un peu subtile. 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 être source de confusion.

donc ceci

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

se traduit par l'élément script étant un enfant de l'élément du corps, mais ce

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

aurait pour résultat que la balise script serait un enfant de l'élément head.

Vous pourriez être explicite en faisant cela,

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

et puis celui que vous avez en premier, le script ou le h1, ils apparaîtront tous les deux, de façon prévisible dans l'élément de corps. Ce sont des choses qui sont facilement passer à côté de tout refonte et débogage du code. (par exemple, vous avez JS qui est à la recherche du premier élément de script dans le corps - dans le second morceau il cesserait de fonctionner).

en règle générale, il est toujours préférable d'être explicite au sujet des choses plutôt que de laisser les choses ouvertes à l'interprétation. À cet égard, XHTML est mieux 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 susceptible d'être mal interprété.

Donc, oui, vous pouvez les omettre et techniquement valable, mais il est généralement déconseillé de le faire.

score 0 · Answer 6

Firebug le montre correctement car votre navigateur corrige automatiquement le mauvais balisage pour vous. 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.

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

Las etiquetas más populares

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

6 réponses