4.18 HTML5: ¿Por qué es importante escribir código correcto? (3/3)

4.18 HTML5: ¿Por qué es importante escribir código correcto? (3/3)

Objetivos:

En este vídeo se explica qué es el DOM (Document Object Model) y por qué es la razón por la que los navegadores muestran una página de diferentes formas cuando tiene un error.

En la primera parte de este videotutorial vimos las principales cuatro razones que pueden ocasionar que no se vea igual una página web en todos los navegadores. Vimos lo

importante que es escribir código HTML correcto para que una página web no se rompa.

En la segunda parte vimos cinco ejemplos sencillos que contenían errores que producían que una página web no se mostrase igual en todos los navegadores.

Las pruebas las realizamos en el sistema operativo Windows 7 con los cuatro navegadores web más comunes: Mozilla Firefox 3.6, Google Chrome 10, Internet Explorer 8 y Opera

11.

Al final, vimos que ante algunos errores los navegadores mostraban el mismo comportamiento, mientras que frente a otros errores había diferencias importantes en el

comportamiento.

¿A qué se debe este errático comportamiento de los navegadores frente a los errores de una página?

La clave está en el DOM, el Document Object Model. Con el DOM vamos a entender por qué una página web que tiene errores no se visualiza igual en todos los navegadores.

La mayoría de la gente que hace página web no tiene ni idea de qué es el DOM. Y los que sí lo conocen, suelen tener muchas lagunas o ideas erróneas sobre él.

El DOM es una recomendación del World Wide Web Consortium, el W3C, el consorcio internacional que produce recomendaciones para la Web.

En la traducción al castellano de la versión 3 de la especificación del DOM encontramos el apartado “¿Qué es el Modelo de Objetos del Documento?”, donde se nos define el

DOM:

El Modelo de Objetos del Documento (DOM) es una interfaz de programación de aplicaciones (API) para documentos válidos HTML y bien construidos XML. Define la estructura

lógica de los documentos y el modo en que se accede y manipula.

Y en otro punto de la especificación podemos leer:

En DOM, los documentos tienen una estructura lógica que es muy parecida a un árbol; para ser más preciso, es más bien como un "bosque" o una "arboleda", que puede contener

más de un árbol. Cada documento contiene cero o un nodo doctype, un nodo de elemento de documento, y cero o más comentarios o instrucciones de tratamiento; el elemento del

documento sirve como la raíz del árbol para el documento.

Con un ejemplo lo entenderemos mejor. Tenemos este fragmento de un documento HTML, que representa una tabla con dos filas y dos columnas.

El DOM es una representación en forma de árbol de una página web. Es sencilla, pero para su comprensión y uso correcto hace falta realizar un proceso de abstracción que

mucha gente es incapaz de realizar.

La representación en forma de árbol de este fragmento es la siguiente:

Los rectángulos representan nodos de tipo elemento, mientras que los óvalos representan nodos de tipo texto. La raíz del árbol es la etiqueta <table>, que contiene un sólo

hijo con la etiqueta <tbody>, el cual a su vez tiene dos hijos, los cuales a su vez también tienen dos hijos.

Una vez que sabemos qué es el DOM, que es el Document Object Model, vamos a aplicarlo para entender por qué una misma página web se visualiza de diferente forma en

diferentes navegadores.

Vamos a empezar con el ejemplo que ya vimos en la parte anterior de este videotutorial en el que se empleaba la etiqueta <span> con el atributo style y la propiedad font-

weight de CSS para mostrar el texto en negrita.

En este ejemplo, esta etiqueta <span> no se cierra en el párrafo y tampoco se cierra en el documento.

En Mozilla Firefox el efecto de la etiqueta <span> finaliza cuando termina el párrafo en la que se encuentra.

En Google Chrome podemos ver que la presentación de la página es igual que en Mozilla Firefox.

Pero en Internet Explorer aparecen diferencias y todo aparece en negrita hasta el final del documento.

Por último, Opera también se comporta igual que Internet Explorer y la etiqueta <span> que no se cierra actúa hasta el final del documento.

Para entender por qué los navegadores se comportan de diferente forma debemos comparar el DOM que construye cada navegador a partir del código HTML de la página.

Aquí podemos ver el DOM en Mozilla Firefox. Podemos ver como la etiqueta <span> que no está cerrada en el código HTML, el navegador la cierra automáticamente en este punto,

antes de que finalice el párrafo. Por ello, cuando se muestra la página, el texto de este párrafo sí que aparece en negrita, pero el siguiente no, porque la etiqueta <span>

ya ha sido cerrada antes.

Sin embargo, en Opera, el DOM que se construye es distinto. Como podemos ver aquí, como la etiqueta <span> no se ha cerrado en el código HTML, todo lo que aparece a

continuación se considera parte del contenido de la etiqueta <span> que no se ha cerrado. Por eso, todo el texto que aparece a continuación se muestra en negrita. Pero al

actuar de esta forma, se llega a una representación de la página que es inconsistente con la especificación oficial de HTML, ya que un párrafo de texto no puede contener

otros párrafos de texto.

En el siguiente ejemplo el error está en la etiqueta <link> que enlaza con una hoja de estilo que está en otro fichero. En esta etiqueta, el valor del atributo rel no tiene

la comilla de cierre.

La página es muy sencilla: contiene un encabezado y un párrafo de texto.

La hoja de estilo CSS también es muy sencilla. Contiene dos reglas, body y h1, para definir el tamaño y el tipo de letra de toda la página, y para definir el tipo de letra

y el color del encabezado.

¿Cómo se verá esta página?

En Mozilla Firefox parece que el error no produce ningún efecto negativo en la visualización de la página: el encabezado aparece con el tipo de letra Garamond y en color

rojo, y el resto del texto de la página aparece con el tipo de letra Verdana.

Sin embargo, en Google Chrome esto es lo que se muestra: absolutamente nada.

En Internet Explorer parece que la hoja de estilo CSS no se tiene en cuenta. Además, podemos ver que en la página aparece el código de la etiqueta <link>.

Y en Opera se vuelve a mostrar absolutamente nada.

Aquí tenemos el DOM que Mozilla Firefox construye a partir del código HTML. Como podemos ver, Firefox ha descartado el atributo rel que no tenía la comilla de cierre.

Además, se ha recuperado correctamente frente a este error y ha construido el árbol del documento como se esperaba.

En el caso de Google Chrome, el navegador descarta la etiqueta <link> y todo lo que aparece a continuación hasta el final de la página. Por eso la página aparece vacía

cuando se muestra.

En el caso de Internet Explorer, el navegador ha descartado toda la etiqueta <link> que estaba mal escrita y la ha movido al <body>, al cuerpo de la página, como podemos

ver aquí. Por eso se muestra en la página. Pero a diferencia de Google Chrome, Internet Explorer en algún momento (por ejemplo, al encontrar la etiqueta <body>) se ha

recuperado correctamente y muestra, de forma correcta, el resto de la página.

Por último, en el caso de Opera, podemos ver que el navegador asume que todo lo que aparece a continuación del atributo rel forma parte del valor del atributo, ya que no se

ha cerrado la comilla. Por eso, en la página no aparece nada, aparece vacía, todo forma parte del atributo rel, como podemos ver aquí.

El último ejemplo es una modificación del anterior, en el que se ha añadido una etiqueta <div> con un atributo id. Como podemos observar por el color verde del editor,

parece que el editor cierra esta comilla que no hemos cerrado en este punto. Y todo esto va a formar parte del valor del atributo. Esto es una señal de lo que van a hacer

los navegadores.

La hoja de estilo CSS es también la del ejemplo anterior, pero le hemos añadido esta regla “almohadilla contenido” para que el contenedor <div> se muestre con un color de

fondo gris.

En Mozilla Firefox, el encabezado y el texto aparecen correctamente. Sin embargo, el contenedor <div> no aparece con el color de fondo gris.

Como veremos a continuación, el resto de navegadores tienen el mismo comportamiento.

En Google Chrome, en Internet Explorer, y en Opera se muestra el mismo resultado.

Aquí tenemos el DOM, el árbol que construye Mozilla Firefox. Podemos ver que el navegador ha considerado que el valor del atributo rel va desde esta comilla hasta esta otra

comilla. Lo que viene a continuación lo ha transformado en un nuevo atributo, como podemos ver aquí, “contenido” se ha transformado en un nuevo atributo. Y a partir de ahí

ha seguido correctamente con la interpretación del código. La etiqueta <body> ha desaparecido, porque ha pasado a formar parte del atributo rel, pero el navegador la ha

incorporado al DOM automáticamente, ya que siempre debe existir. Como el <div> ha desaparecido, la página no se muestra con el color de fondo gris.

En Google Chrome, también parece que todo lo que aparece a continuación del atributo rel hasta la siguiente comilla lo ha considerado parte del valor del atributo.

“contenido” lo interpreta como un nuevo atributo de la etiqueta <link>, como podemos ver aquí. Y a partir de ahí el navegador se ha recuperado de forma correcta.

Internet Explorer hace algo parecido a Mozilla Firefox y Google Chrome y por eso la página se muestra igual. Podemos ver aquí como Internet Explorer, todo lo que viene a

continuación también lo mete en el valor del atributo rel hasta que se encuentra la comilla. Y “contenido” también lo ha transformado en un nuevo atributo de la etiqueta

<link>.

Y por último Opera también muestra un comportamiento similar, aquí tenemos el valor del atributo rel que vuelve a ser lo mismo y “contenido” también lo ha vuelto a

transformar en un atributo de la etiqueta <link> y a partir de este punto se ha recuperado correctamente en la presentación de la página web.

En resumen, hemos visto que la clave para entender los diferentes comportamientos de los navegadores es el DOM, el Document Object Model. Los navegadores construyen un

mismo DOM, un mismo árbol, a partir de un código HTML correcto, pero cuando el código contiene errores, cada navegador puede construir un árbol diferente.