Ordenando la cabeza

19/jul/2011 5

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:

Comentarios

  1. Juan Jorquera [#]

    Jorge, respecto del ultimo punto (incluir los script), que sugieres ? es casi un estándar el colocarlos en el head, saludos!

  2. Jorge Epuñan [#]

    Juan: yo los uso dentro del <head> </head>, pero he visto ultimamente muchos desarrolladores que los incluyen al final antes del </body>. Pros y contras, las hay en ambas:
    – mientras las dejes dentro de <head> te aseguras que las funciones son cargadas antes que los botones, enlaces u otros elementos que las llaman, asi el sitio va a funcionar apenas comience a ser renderizado,
    – agregandolos al final del código es probable que el usuario ya utilice la página antes de terminar de ser interpretada por el browser, por lo que puede encontrarse con errores de funcionamiento si no las ha leído (aun).

    Ahora, con los frameworks de JS actuales puedes jugar con el DOM y al carga de tu script.

    Lectura: Yahoo: Best Practices for Speeding Up Your Web Site.

  3. VargasMolina [#]

    cabe señalar que al dejarlo al final y no completarse la carga suceden errores , esto sucede mas con usuarios con una conexión baja o pobre .

  4. Jordi Garrofer [#]

    hola Jorge: como podras comprobar tenemos una pagina web en la que colgamos videos y otras noticias. hace un año que funciona, nos la monto un compañero que ahora no esta con nosotros.
    tengo nociones para modificar algunas cosas pero Me gustaria poder hacer 2 cosas.
    La Primera es que los titulares de las noticias son muy grandes, creo que si fueran un poco mas pequeños estaria mucho mejor. No se como hacerlo.
    La segunda es que me gustaria que la gente me pudieran mandar email. En la cabezera pone el apartado de contacto pero no funciona.
    No se si es mucho trabajo, en todo podriamos empezar por el primero.
    Te agradezco tu colaboracion.
    Jordi.

  5. Agustín Amenabar [#]

    He descubierto que los navegadores leen primero los encabezados del documento, entre los cuales suele venir la codificación de los caracteres.
    Los servidores apache normalmente permiten agregar archivo .htaccess a la raíz del dominio, donde se pueden hacer ese tipo de ajustes.
    En su servidor local lo pueden cambiar en php.ini.
    Esta página por ejemplo venía con el siguiente encabezado para la codificación.
    ISO-8859-1,utf-8;q=0.7,*;q=0.3
    con el UTF-8 en el encabezado no es necesaria la declaración de charset en el head. Según la especificación de HTML5 es así y sospecho que la de 4 también.
    Hasta ahora no he tenido problemas con esa configuración.
    Corríjanme si estoy equivocado.

Responder a Jorge Epuñan ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab