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

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

Objetivos:

En este vídeo se muestran algunos ejemplos de errores en el código HTML:

• Etiqueta <b> sin cerrar.
• Etiqueta <span> sin cerrar.
• Comillas del valor de un atributo sin cerrar (2 versiones).
• Valor del atributo size de la etiqueta "input" incorrecto.

En la primera parte de este videotutorial estuvimos viendo por qué muchos desarrolladores web se plantean alguna vez por qué una página web se ve bien en todos los navegadores pero no en alguno concreto.

Vimos las principales cuatro razones por las que una página web se puede visualizar de forma incorrecta en un navegador.

De estas cuatro razones, las tres primeras están fuera del control de los desarrolladores web. La última causa sí que depende de los desarrolladores web, de las personas que hacen las páginas web, y es la que vamos a tratar en este videotutorial.

Para demostrar por qué es importante escribir código HTML correcto, vamos a ver cinco ejemplos sencillos en los que se aíslan algunas situaciones de error típicas.

Las pruebas que vamos a ver a continuación se han realizado en Windows 7 con los cuatro navegadores web más comunes: Mozilla Firefox 3.6, Google Chrome 10, Internet Explorer 8 y Opera 11.

Veamos el primer ejemplo. Este es el código HTML de una página sencilla. En el segundo párrafo hay una etiqueta <b> de negrita que no ha sido cerrada al final del párrafo. En el tercer párrafo vuelve a aparecer la etiqueta <b> de negrita, pero esta vez sí que ha sido cerrada al final del párrafo. ¿Cómo se visualizará esta página en los diferentes navegadores?

Antes que nada, comprobemos que esta página realmente tiene un error. Para ello, vamos a usar el “HTML and markup validator del W3C”. Validamos la página web y el validador nos indica que la página tiene 6 errores. ¿6 errores? Si vemos el informe completo de validación, el primer error nos indica correctamente que existe alguna etiqueta que no ha sido cerrada. Pero el resto de errores son falsos y desaparecerán una vez que se haya corregido el primer error.

Veamos ahora como se visualiza la página en los diferentes navegadores.

En Mozilla Firefox, desde el punto de inicio de la etiqueta <b> que no se cierra hasta el final de la página, todo aparece en negrita.

Como ahora veremos, el resto de navegadores se comporta igual.

En Google Chrome comprobamos que ocurre lo mismo, toda la página se muestra en negrita.

Igual en Internet Explorer 8.

Y por último, vemos que la página se visualiza igual en Opera 11.

Por tanto, la conclusión a la que llegamos es que los navegadores, hasta que no se cierra la etiqueta <b> de negrita, su efecto continúa hasta el final de la página.

Veamos ahora otro ejemplo. A partir del ejemplo anterior, sustituimos la etiqueta <b> de negrita por la etiqueta <span> con el atributo style que incluye la propiedad font-weight de CSS para mostrar el texto en negrita.

No es exactamente lo mismo, pero un navegador web debería presentar esta página web igual que el ejemplo anterior, ya que el efecto visual que se consigue es el mismo.

Como podemos ver, en Mozilla Firefox hay un cambio importante respecto el ejemplo anterior: 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. El efecto de la etiqueta <span> finaliza cuando finaliza el párrafo y por tanto, el siguiente párrafo no aparece en negrita.

Pero en Internet Explorer aparecen diferencias y este navegador se comporta de forma similar a cómo lo hace en el ejemplo anterior y todo aparece en negrita hasta el final del documento.

Por último, Opera también se comporta igual que Internet Explorer y todo aparece en negrita.

Por tanto, en este ejemplo, Mozilla Firefox y Google Chrome tienen un comportamiento similar, la etiqueta <span> la cierra automáticamente cuando se llega al final del párrafo, mientras que Internet Explorer y Opera muestran la página de la misma forma, la etiqueta <span> no la cierran y su efecto actúa hasta el final de la página.

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

El editor de texto ya nos avisa de que hay un problema en el código HTML ya que a partir de este punto todo el código aparece pintado en verde, como si todo fuese el valor de un atributo.

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

La hoja de estilo CSS también es muy sencilla. Contiene solamente dos reglas, una para definir el tamaño y el tipo de letra de toda la página y otra 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, no hay página.

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.

Como podemos ver, por falta de una comilla puede desaparecer toda una página web. Desgraciadamente, mucha gente no le da importancia a errores como éste.

El siguiente 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, parece que el editor de textos cierra el atributo que no se había cerrado, el atributo rel, lo cierra correctamente en este punto. Esto puede ser una señal de lo que van a hacer los navegadores y de cómo van a interpretar esta página web.

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

Así es como se debería mostrar la página web si no tuviera el error del valor del atributo que no se cierra su comilla, vemos que el <div> se muestra con un color de fondo gris.

En Mozilla Firefox, el encabezado y el texto aparecen correctamente, con el tipo de letra y con el color adecuado. 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.

El comportamiento de los navegadores coincide con el comportamiento del editor de textos: este atributo, el atributo rel, se cierra en este punto y, por tanto, la etiqueta <div> se rompe y no se tiene en cuenta en la presentación de la página por el navegador.

Y llegamos al último ejemplo. En este ejemplo se muestra un formulario que contiene cuatro cuadros de texto. En tres de los cuadros de texto se incluye el atributo size para modificar el tamaño del cuadro de texto. En este atributo size se ha cometido un error: parece que pone “treinta”, pero en realidad pone “tres o”.

Como podemos ver aquí, cuando un cuadro de texto no tiene definido un tamaño con el atributo size, el valor por defecto es 20. En Mozilla Firefox, el valor “tres o” se interpreta como “tres”.

En Google Chrome se observa el mismo comportamiento que en Mozilla Firefox, el primer cuadro de texto tiene un tamaño 20, el segundo un tamaño 30 que es el que se indica en el código HTML, el tercer cuadro de texto tiene un tamaño 3, que es la interpretación de “tres o”, y el último cuadro de texto tiene un tamaño 3.

En Internet Explorer cambia la forma de interpretar el valor “tres o”. El navegador le asigna el valor por defecto que es 20, el navegador no reconoce este valor como válido y le asigna el valor por defecto.

Por último, en Opera se observa el mismo comportamiento que en Internet Explorer: al detectar un valor no correcto, se le asigna el valor por defecto.

Resumamos los cinco ejemplos que hemos visto.

En el ejemplo de la etiqueta <b> no cerrada, los cuatro navegadores se comportan de la misma forma. En el ejemplo de la etiqueta <span> no cerrada, Mozilla Firefox y Google Chrome muestran el mismo comportamiento, mientras que Microsoft Internet Explorer y Opera se comportan de igual forma. En el primer ejemplo de las comillas no cerradas, Firefox, Chrome e Internet Explorer muestran un comportamiento distinto, mientras que Opera muestra un comportamiento similar a Chrome. En el segundo ejemplo de las comillas no cerradas los cuatro navegadores muestran un comportamiento similar. Y en el último ejemplo, Firefox y Chrome muestran el mismo comportamiento, mientras que Microsoft Internet Explorer y Opera se comportan de igual forma.

¿A qué se debe este errático comportamiento de los navegadores? Lo veremos en la tercera y última parte de este videotutorial.