¿Es necesario escribir etiquetas HEAD, BODY y HTML?

194

¿Es necesario para escribir <html>, <head>y <body>las etiquetas?

Por ejemplo, puedo hacer una página así:

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

Y Firebug separa correctamente la cabeza y el cuerpo: ingrese la descripción de la imagen aquí

La validación de W3C dice que es válida.

Pero rara vez veo esta práctica en la web.

¿Hay alguna razón para escribir estas etiquetas?

html tags Larry Cinnabar
fuente
55
El validador HTML5 en html5.validator.nu requiere la titleetiqueta. Este es el documento más pequeño que considera válido:<!DOCTYPE html> <title>A</title>
bonh

Respuestas:

142

La omisión de los html, heady body las etiquetas es, sin duda permitido por las especificaciones de HTML. La razón subyacente es que los navegadores siempre han tratado de ser coherentes con las páginas web existentes, y las primeras versiones de HTML no definieron esos elementos. Cuando HTML2,0 primero lo hizo, se hizo de una manera que las etiquetas serían inferidas cuando faltan.

A menudo me parece conveniente omitir las etiquetas al crear prototipos y especialmente al escribir casos de prueba, ya que ayuda a mantener el marcado centrado en la prueba en cuestión. El proceso de inferencia debe crear los elementos exactamente de la manera que se ve en Firebug, y los navegadores son bastante consistentes al hacerlo.

Pero...

IE tiene al menos un error conocido en esta área. Incluso IE9 exhibe esto. Supongamos que el marcado es este:

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

Debería (y lo hace en otros navegadores) obtener un DOM que se vea así:

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

Pero en IE obtienes esto:

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

Véalo usted mismo.

Este error parece estar limitado a la formetiqueta de inicio que precede a cualquier contenido de texto y a cualquier bodyetiqueta de inicio.

Alohci
fuente
55
HTML 1.0 definió HTML, HEAD y BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt
Liza Daly
66
@Liza - Bueno, es discutible si ese documento define HTML 1.0, pero estoy corregido, que los elementos son anteriores a HTML 2.0. Gracias. Sin embargo, consulte w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… de 1992. Los elementos no existen en ese momento.
Alohci
1
Este error parece no afectar a Internet Explorer 11 (también
probé
2
@Justin - Esas restricciones son en gran medida técnicas y normalmente no le afectarán. Entonces, sí, si le importa a su página si un nodo de comentario o un espacio en blanco aparece justo antes del elemento de encabezado o justo dentro de él (el JS de la página podría depender de él), entonces debe identificar explícitamente la etiqueta de inicio para hacer que la relación sea correcta . Pero si no es así (y aún no he escrito una página HTML donde lo haga), la etiqueta de la cabecera se deducirá en algún lugar sensible y puede omitirla con seguridad. Del mismo modo para las otras etiquetas html, head y body.
Alohci
3
@Justin Esta respuesta parece tener bastante idea ya que la pregunta es "¿Es necesario escribir etiquetas HEAD, BODY y HTML?" no si es o no una buena práctica. Las convenciones tienden a cambiar ... solo eche un vistazo a la guía de estilo de Google ... es una convención que establece que debe omitir estas etiquetas ... :-)
Potherca
77

La Guía de estilo de Google para HTML recomienda omitir todas las etiquetas opcionales.
Que incluye <html>, <head>, <body>, <p>y <li>.

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

Para propósitos de optimización del tamaño de archivo y escaneo, considere omitir etiquetas opcionales. La especificación HTML5 define qué etiquetas se pueden omitir.

(Este enfoque puede requerir que se establezca un período de gracia como una guía más amplia, ya que es significativamente diferente de lo que generalmente se enseña a los desarrolladores web. Por razones de coherencia y simplicidad, es mejor omitir todas las etiquetas opcionales, no solo una selección).

<!-- 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
fuente
2
Ejemplo de incompatibilidad: la herramienta de recarga en vivo que uso para el desarrollo web (puer) inserta automáticamente un script en la cabeza. Sin por fin la etiqueta <head>, no funciona.
Offirmo
@Offirmo ¿Qué demonios es eso?
Ken Sharp
@KenSharp LiveReload herramientas dev web por lo general de trabajo mediante la inserción de un código de páginas servidas, así: <script src="http://localhost:35729/livereload.js"></script>. Para las plantillas exóticas, no entienden dónde deben insertar su código.
Offirmo
1
@Offirmo La documentación de livereload indica que usted mismo debe agregar ese script a las páginas de sus clientes. Quizás estás usando una biblioteca mágica que lo hace por ti. Esa debería ser la fuente de la dificultad que está teniendo.
kequc
77
Omitir todas las etiquetas posibles es un centavo y una tontería. El ahorro de ancho de banda es un pequeño porcentaje (especialmente porque la mayoría de las conexiones se autocomprimen), mientras que las posibilidades de error humano en los casos extremos son altas (considere autores, editores e incluso escritores de analizadores HTML). También es más difícil encontrar errores (debido al cambio en la entropía).
TextGeek
48

Contrariamente a la nota de @Liza Daly sobre HTML5, esa especificación es bastante específica sobre qué etiquetas se pueden omitir y cuándo (y las reglas son un poco diferentes de HTML 4.01, principalmente para aclarar dónde pertenecen elementos ambiguos como los comentarios y los espacios en blanco)

La referencia relevante es http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags , y dice:

  • La etiqueta de inicio de un elemento html puede omitirse si lo primero dentro del elemento html no es un comentario.

  • La etiqueta final de un elemento html puede omitirse si el elemento html no es seguido inmediatamente por un comentario.

  • La etiqueta de inicio de un elemento principal puede omitirse si el elemento está vacío, o si lo primero dentro del elemento principal es un elemento.

  • La etiqueta final de un elemento principal puede omitirse si el elemento principal no es seguido inmediatamente por un carácter de espacio o un comentario.

  • La etiqueta de inicio de un elemento del cuerpo puede omitirse si el elemento está vacío, o si lo primero dentro del elemento del cuerpo no es un carácter de espacio o un comentario, excepto si lo primero dentro del elemento del cuerpo es un script o un elemento de estilo.

  • La etiqueta final de un elemento del cuerpo puede omitirse si el elemento del cuerpo no es seguido inmediatamente por un comentario.

Por lo tanto, su ejemplo es HTML5 válido y se analizaría de esta manera, con las etiquetas html, head y body en sus posiciones implícitas:

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

Tenga en cuenta que el comentario "este script estará en la cabeza" en realidad se analiza como parte del cuerpo, aunque el script en sí es parte de la cabeza. De acuerdo con la especificación, si desea que sea diferente, entonces las etiquetas </HEAD>y <BODY>no pueden omitirse. (Aunque las etiquetas correspondientes <HEAD>y </BODY>todavía pueden ser)

Ian Clelland
fuente
15

Es válido omitirlos 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, no hay elementos "obligatorios" u "opcionales" exactamente, ya que la sintaxis HTML5 se define más libremente. Por ejemplo title:

El elemento de título es un elemento secundario obligatorio en la mayoría de las situaciones, pero cuando un protocolo de nivel superior proporciona información de título, por ejemplo, en la línea Asunto de un correo electrónico cuando se utiliza HTML como formato de creación de correo electrónico, el elemento de título puede omitirse .

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

No es válido omitirlos en XHTML5 verdadero, aunque eso casi nunca se usa (frente a HTML5 que actúa como XHTML).

Sin embargo, desde un punto de vista práctico, a menudo desea que los navegadores se ejecuten en "modo estándar", para la previsibilidad en la representación de HTML y CSS. Proporcionar un DOCTYPE y un árbol HTML más estructurado garantizará resultados más predecibles entre navegadores.

Liza Daly
fuente
13
No confunda elementos con etiquetas. Vea los comentarios de cHao en otra parte de esta página. Para html, heady body, los elementos son obligatorios, pero las etiquetas son opcionales.
Alohci
En realidad estás equivocado en el último bit. La omisión de etiquetas es una función de SGML DTD, todos los navegadores que admiten el análisis SGML (es decir, todos los navegadores) también admiten la omisión de etiquetas. La razón por la que no puede hacerlo en XHTML5 es porque es XML, no SGML. XML es demasiado tonto para inferir elementos.
OdraEncoded
@OdraEncoded ¿Puede proporcionar verificación para su estado de cuenta, por favor? No creo que ese sea el caso (ver el Estándar HTML ).
Cepillo de dientes
@OdraEncoded: cerca, pero no del todo cierto. La omisión de etiquetas es una característica opcional para los analizadores SGML (aunque la mayoría lo admite), tal como se define en ISO 8879. Casi todos los analizadores HTML lo admiten, aunque 'html.parse' de Python parece no hacerlo (consulte stackoverflow.com/questions/29954170/… )
TextGeek
14

Es cierto que las especificaciones HTML permiten que se omitan ciertas etiquetas en ciertos casos, pero generalmente no es aconsejable hacerlo.

Tiene dos efectos: hace que la especificación sea más compleja, lo que a su vez hace que sea más difícil para los autores de navegadores escribir implementaciones correctas (como demostró que IE lo hizo mal).

Esto hace que la probabilidad de errores del navegador en estas partes de la especificación sea alta. Como autor de un sitio web, puede evitar el problema al incluir estas etiquetas, por lo que, aunque la especificación no dice que tiene que hacerlo, reduce la posibilidad de que las cosas salgan mal, lo cual es una buena práctica de ingeniería.

Además, la última especificación HTML 5.1 WG dice actualmente (tenga en cuenta que es un trabajo en progreso y aún puede cambiar).

La etiqueta de inicio de un elemento del cuerpo puede omitirse si el elemento está vacío, o si lo primero dentro del elemento del cuerpo no es un carácter de espacio o un comentario, excepto si lo primero dentro del elemento del cuerpo es un meta, enlace, script, estilo o elemento de plantilla.

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

Esto es un poco sutil. Puede omitir cuerpo y cabeza, y el navegador deducirá dónde deben insertarse esos elementos. Esto conlleva el riesgo de no ser explícito, lo que podría causar confusión.

Así que esto

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

da como resultado que el elemento de script sea hijo del elemento body, pero esto

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

daría como resultado que la etiqueta del script sea un elemento secundario del elemento head.

Podrías ser explícito al hacer esto

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

y luego, lo que tenga primero, el script o el h1, ambos aparecerán, previsiblemente, en el elemento del cuerpo. Estas son cosas que son fáciles de pasar por alto al refactorizar y depurar código. (por ejemplo, tiene JS que está buscando el primer elemento de script en el cuerpo; en el segundo fragmento dejaría de funcionar).

Como regla general, ser explícito sobre las cosas siempre es mejor que dejar las cosas abiertas a la interpretación. En este sentido, XHTML es mejor porque te obliga a ser completamente explícito sobre la estructura de tu elemento en tu código, lo que lo hace más simple y, por lo tanto, menos propenso a malinterpretar.

Entonces sí, puede omitirlos y ser técnicamente válido, pero generalmente no es prudente hacerlo.

Peter Bagnall
fuente
1
IE se equivoca porque a los autores no les importan los estándares. Es su culpa si no funciona correctamente. Los estándares están definidos, por lo que deben asegurarse de que IE trabaje con ellos.
Ken Sharp
3
@KenSharp No estoy en desacuerdo, pero hasta que pueda obligar a todos sus clientes a no usarlo, estamos un poco atrapados con él. Por lo tanto, es mejor escribir código que sea completamente inequívoco en lugar de confiar en que todo funcione como debería.
Peter Bagnall
1
Los usuarios se han visto obligados a deshacerse de IE durante años por no cumplir. Nadie espera que los usuarios continúen usando IE6, incluso si la gente todavía está instalando Windows XP. No podemos esperar admitir Windows 3.1 para siempre tampoco. Error de nivel 8 de OSI.
Ken Sharp
1
Exactamente qué etiquetas se pueden omitir y exactamente dónde, también varía según la versión HTML. Esa también parece ser una buena razón para evitarlos (a excepción de los casos más obvios, comunes y consistentes).
TextGeek
@TextGeek <!DOCTYPE html>.
Det.
-2

Firebug muestra esto correctamente porque su navegador corrige automáticamente el marcado incorrecto por usted. Este comportamiento no se especifica en ninguna parte y puede (variará) de un navegador a otro. Esas etiquetas son requeridas por el DOCTYPE que está utilizando y no deben omitirse.

El elemento html es el elemento raíz de cada página html. Si nos fijamos en la descripción de todos los demás elementos, dice dónde se puede usar un elemento (y casi todos los elementos requieren cabeza o cuerpo).

Halfdan
fuente
Entonces, ¿puede no ser un navegador cruzado?
Larry Cinnabar
55
en otras palabras, una mala práctica que arroja resultados indefinidos.
Randy
3
@Innuendo El hecho de que algo sea grande no significa que esté bien organizado.
Demian Brecht
2
Como una apelación a la autoridad, me parece poco convincente. google.com también es HTML no válido. No significa que el tuyo deba serlo.
Rein Henrichs
17
Los elementos deben existir. Nada dice que las etiquetas hacen. HTML sin etiquetas html / head / body es, de hecho, válido siempre que no aparezca ningún elemento donde no debería. ( <title>después de un <p></p>, por ejemplo.)
cHao