Aprendizaje activo: Estudio del código permisivo
Es hora de estudiar la naturaleza permisiva del código HTML por nosotros mismos.
- En primer lugar, hagamos una copia de nuestro ejemplo-demo a depurar y guardémoslo de forma local. Está escrito para generar diversos errores que deberemos descubrir (se dice que el marcado de HTML está mal formado, en contraposición a un marcado bien formado).
- A continuación, abrámoslo en un navegador; veremos lo siguiente:
- No parece que esté bien; veamos el código fuente para ver qué podemos hacer (solo mostramos el contenido del <body>):
.png "carbon(103).png")
- Veamos qué problemas podemos descubrir:
- El elemento <p> y el <li> no tienen etiquetas de cierre. Si comprobamos el resultado, no parece que haya generado un efecto grave en la representación del lenguaje de marcado, porque es fácil deducir que donde un elemento acaba, debería comenzar otro.
- El primer elemento <strong> no tiene etiqueta de cierre. Este resulta ser un poco más problemático porque no es fácil deducir dónde se supone que termina el elemento. De hecho, el énfasis fuerte se ha aplicado al resto del texto.
- Esta sección está mal anidada: <strong>strong <em>strong emphasised?</strong> what is this?</em>. No es fácil de explicar la forma en que ha sido interpretado, debido al problema anterior.
- Al valor del atributo href le faltan las comillas de cierre. Esto parece haber causado el problema más grave: el enlace ha desaparecido totalmente.
- Ahora veamos lo que el navegador ha mostrado en contraposición al código fuente. Para ello podemos usar las herramientas de desarrollo del navegador. Si no estamos familiarizados con el uso de estas herramientas, echemos un vistazo rápido a Descubrir las herramientas de desarrollo del navegador, y luego continuaremos.
- En el inspector de objetos (DOM), puedes comprobar la apariencia de cada elemento:
- Vamos a explorar nuestro código en detalle con el inspector de objetos DOM para ver cómo el navegador ha arreglado nuestros errores de código HTML (lo hemos hecho con Firefox; otros navegadores modernos deberían conducir al mismo resultado):
- Se han añadido etiquetas de cierre a los párrafos y las líneas de las listas.
- Al no estar claro el final del elemento <strong>, el navegador lo ha aplicado individualmente a todos los bloques de texto siguientes, a cada uno le ha añadido su etiqueta strong propia, desde donde está ¡hasta el final del documento!
- El navegador ha arreglado el anidamiento incorrecto del modo siguiente:
.png "carbon(104).png")
- El enlace a cuyo atributo le faltan las comillas del final ha sido ignorado. La última lista la ha dejado como sigue:
.png "carbon(105).png")