Ordenando la cabeza

19/Jul/2011 339

Muchas veces nos esforzamos en tener el código más limpio y pulcro posible, pero no nos fijamos en lo que sucede dentro del <head></head>. Es una parte vital, donde se define el comportamiento de toda la página web. Pero primero, debemos entender cómo el browser lee una página web.

Cuando un navegador comienza a parsear una página, comienza a leer desde el encabezado, claro. Si la respuesta del encabezado del content-type especifica un atributo charset, esos bytes pueden ser interpretados inmediatamente como texto utilizando el encoding determinado. Sin embargo, si una declaración charset no está presente, el browser comienza a escanear los bytes de de respuesta del cuerpo, buscando por algún marcador unicode ó algún elemento dentro del meta http-equiv que especifique el charset. Cuando lo encuentra el parser vuelve a leer el documento para asegurarse que lo anterior sea leído correctamente. Ahora, si una declaración de charset no está definido, el browser está obligado a autodetectar el encoding dependiendo del contenido, lo que puede provocar errores de caracteres o en la página misma.

Luego, son leídos el título, favicon y los estilos (<link>) los que deben estar en concordancia con el charset definido anteriormente.

Finalmente, el orden ideal propuesto por la mayoría de los navegadores modernos es el siguiente:

<doctype>
<html>
      <head>
         <meta http-equiv content-type charset>
         <title>
         <link rel="alternate" />
         <link rel="shortcut icon" />
         <link rel="stylesheet" type="text/css" />

Parece obvio, pero no muchas veces se cumple.


No incluí <script></script> intencionalmente ya que existen escuelas que dicen que es mejor incluirlos abajo del código de tu página, antes del </body>, lo que no valida en el código HTML pero acelera la carga de los elementos del DOM y deja para el final la carga de los scripts. Mejor lo dejo a criterio de cada desarrollador.

Links:

CSSLab