sencilla - ¿Es necesario escribir HEAD, BODY y etiquetas HTML?
etiqueta head html (6)
¿Es necesario escribir etiquetas <html> , <head> y <body> ?
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:
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?
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, sobre todo para aclarar dónde pertenecen elementos ambiguos como comentarios y 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 espacial 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 guión o 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á así, 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" se analiza en realidad 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, las etiquetas </HEAD> y <BODY> no se pueden omitir. (Aunque las etiquetas <HEAD> y </BODY> todavía pueden ser)
Es cierto que las especificaciones de HTML permiten que ciertas etiquetas se omitan en ciertos casos, pero generalmente hacerlo no es aconsejable.
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 del navegador escribir las implementaciones correctas (como lo demuestra IE al obtener el error).
Esto aumenta la probabilidad de errores del navegador en estas partes de la especificación. Como autor del sitio web, puede evitar el problema al incluir estas etiquetas, por lo tanto, aunque la especificación no indique que debe hacerlo, al hacerlo se reducen las posibilidades de que las cosas vayan mal, lo cual es una buena práctica de ingeniería.
Además, la última especificación de 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 espacial o un comentario, excepto si lo primero dentro del elemento del cuerpo es un meta, enlace, guión, 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 el cuerpo y la cabeza, y el navegador luego 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 script sea un elemento secundario 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 principal.
Podrías ser explícito al hacer esto
<html>
<body>
<script ... >
<h1>hello</h1>
y luego, lo que sea que tengas primero, el guión o h1, ambos aparecerán predeciblemente en el elemento del cuerpo. Estas son cosas que son fáciles de pasar por alto mientras se refactoriza y depura código. (Digamos, por ejemplo, que 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 malinterpretaciones.
Entonces sí, puedes omitirlos y ser técnicamente válido, pero generalmente no es aconsejable hacerlo.
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 está definida de manera más vaga. Por ejemplo, title :
El elemento de título es un elemento 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 usa HTML como formato de autoría 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 casi nunca se usa (frente a XHTML-acting-like-HTML5).
Sin embargo, desde un punto de vista práctico, a menudo desea que los navegadores se ejecuten en "modo estándar", para que sea más previsible en la representación de HTML y CSS. Proporcionar un DOCTYPE y un árbol HTML más estructurado garantizará resultados de navegadores más predecibles.
Firebug muestra esto correctamente porque tu navegador resuelve automágicamente el marcado incorrecto por ti. Este comportamiento no se especifica en ningún lugar y puede variar de un navegador a otro. Esas etiquetas son requeridas por el DOCTYPE que está utilizando y no debe ser omitido.
El elemento html es el elemento raíz de cada página html. Si observa la descripción de todos los demás elementos, indica dónde se puede usar un elemento (y casi todos los elementos requieren cabeza o cuerpo).
La Guía de estilo de Google para HTML recomienda omitir todas las etiquetas opcionales.
Eso incluye <html> , <head> , <body> , <p> y <li> .
https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags
Para optimización de tamaño de archivo y fines de escaneo, considere omitir las etiquetas opcionales. La especificación HTML5 define qué etiquetas se pueden omitir.
(Este enfoque puede requerir un período de gracia para establecerse como una guía más amplia, ya que es significativamente diferente de lo que normalmente se enseña a los desarrolladores. 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.
La omisión de las etiquetas html , head y body está ciertamente permitida por las especificaciones de HTML. El motivo subyacente es que los navegadores siempre han intentado ser coherentes con las páginas web existentes, y las primeras versiones de HTML no definían esos elementos. Cuando HTML 2.0 primero lo hizo, se hizo de una manera que las etiquetas se deducen cuando falta.
A menudo me resulta conveniente omitir las etiquetas al crear prototipos y, especialmente, al escribir casos de prueba, ya que ayuda a mantener el marcado enfocado 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ías (y lo harías 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
Este error parece estar limitado a la etiqueta de inicio del form precede a cualquier contenido de texto y cualquier etiqueta de inicio del body .