tierra de nómadas - tallerWeb

Migración a XHTML

Introducción

XHTML no es sólo la reformulación de HTML 4.0 como aplicación XML, sino también el primer paso en la creación de una familia de tipos de documentos que pretende sistematizar el lenguaje para dar soporte a cualquier dispositivo, a partir de su modularización, de manera que, dependiendo de las características y necesidades de cada plataforma (ordenadores, televisores, consolas de juego, lectores de voz, dispositivos de mano, teléfonos, etc.), se dé soporte para más o menos módulos.

Para el desarrollador de páginas web, su utilización constituye, hoy por hoy, la solución más aceptable, dado que mantiene la compatibilidad con HTML (realmente las diferencias con este lenguaje son mínimas) al mismo tiempo que permanece abierto a futuras mejoras. Este documento pretende enumerar los cambios y novedades más importantes, que en la mayoría de los casos serán suficientes para adaptarse al nuevo estándar sin despeinarse. Para un estudio más detallado será imprescindible acudir a las fuentes:

• XHTML 1.1.
• XHTML 1.0.
• Modularización de XHTML.

Corrección gramatical

Esta es la madre del cordero, y significa que los documentos deben estar bien formados. Debemos anidar los elementos correctamente, es decir, el solapamiento ya no está permitido:

Ejemplo incorrecto (solapamiento):

<p>Este lenguaje es <strong>más estricto que el anterior. </p></strong>

Ejemplo correcto (anidamiento):

<p>Este lenguaje es <strong>más estricto que el anterior. </strong></p>

Pese a que en XML cualquier anidamiento está permitido, debido a la naturaleza y propósito de XHTML hay cosas que están prohibidas, como la inclusión de un elemento a dentro de otro elemento a, o la situación de un elemento de bloque dentro de un elemento de línea:

Ejemplos incorrectos en XHTML (pero intrínsecamente correctos según XML):

<a href="una.html">No se puede anidar un elemento a <a href="otra.html">dentro de otro</a></a>
<em>Esto es un elemento en línea, por lo que no puede contener a <p>un elemento en bloque</p>, por muy correcto que sea gramaticalmente</em>

La minúscula es bella

XML es sensible al uso de minúsculas y mayúsculas, lo cual provoca que, por ejemplo, un elemento p sea distinto a P. Por tanto se ha optado por las minúsculas en los nombres de todos los elementos y también en los de sus atributos. Esto es, probablemente, lo más fácil de asimilar, pero también lo más difícil de cambiar en documentos que ya estén creados aplicando la vieja costumbre de escribir las etiquetas en mayúsculas.

Ejemplos incorrectos:

<FORM ACTION="/utiles/formmail.php" METHOD="Post" onSubmit="return Chequear(this);">
<form action="/utiles/formmail.php" method="Post" onSubmit="return Chequear(this);">

Ejemplo correcto:

<form action="/utiles/formmail.php" method="Post" onsubmit="return Chequear(this);">

Todo lo que se abre se debe cerrar

En HTML, el cierre de ciertos elementos, como p, td o li, era opcional. En XHTML el cierre es obligatorio.

Ejemplo incorrecto:

<p>Esto es un párrafo.<p>Y esto es otro párrafo.

Ejemplo correcto:

<p>Esto es un párrafo.</p><p>Y esto es otro párrafo.</p>

Un caso especial es el de los elementos vacíos, como img, br o meta, es decir, todos aquellos que tienen prohibida la etiqueta de cierre en HTML. En XHTML hay que optar por incluir la etiqueta de cierre o bien por terminar la etiqueta con />. La primera opción es incompatible con ciertos navegadores, por lo cual no es demasiado recomendable. La segunda opción es correctamente interpretada siempre que se incluya un espacio antes del carácter de cierre.

Ejemplos incorrectos:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style/default.css" type="text/css">
esto es una línea <br>y esto otra
<img src="imagen.png" alt="paisaje">

Ejemplos correctos:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style/default.css" type="text/css" />
esto es una línea <br />y esto otra
<img src="imagen.png" alt="paisaje" />

Valores de los atributos

Los valores de los atributos deben ir entre comillas dobles, ya sean numéricos o texto.

Ejemplo incorrecto:

<img src=imagen.png width=256 height=192 alt=paisaje />

Ejemplo correcto:

<img src="imagen.png" width="256" height="192" alt="paisaje" />

Cuando el valor de un atributo contenga un carácter &, debe expresarse como una referencia a la entidad de tipo carácter.

Ejemplo incorrecto:

<a href="utiles/gestion.php?param1=R&param2=5">

Ejemplo correcto:

<a href="utiles/gestion.php?param1=R&amp;param2=5">

Queda prohibido minimizar atributos

En HTML, algunos atributos, como checked o selected, podían minimizarse cuando su valor sólo podía ser verdadero o falso. En ese caso bastaba con poner el nombre del atributo si era verdadero u omitirlo si era falso. En XHTML la pareja atributo-valor debe especificarse siempre.

Ejemplo incorrecto:

<input type="radio" name="Opcion" value="Si" checked />

Ejemplo correcto:

<input type="radio" name="Opcion" value="Si" checked="checked" />

Identificadores y nombres

El atributo name y el atributo id se utilizan para identificar fragmentos de información. En XML, los identificadores de fragmentos son del tipo id, por lo cual se recomienda utilizar este último, recordando que su valor debe ser único e irrepetible dentro de cada elemento.

Como el proceso de formularios no reconoce el atributo id se aconseja incluir tanto name como id en los elementos de formulario. En los demás elementos, a, applet, frame, iframe, img y map, el atributo name queda prohibido.

Scripts y estilos

La costumbre, hasta ahora muy recomendable, de ocultar el contenido de los elementos script y style entre comentarios no tiene validez en las aplicaciones basadas en XML. Además, éstos se declaran como elementos con contenido #PCDATA. Por todo esto se forma un galimatías en el que < y & se considerarían comienzos de etiquetado, y las entidades &lt; y &amp; serían realmente referencias a las entidades < y & respectivamente. Se puede evitar el procesamiento de las entidades encerrando el contenido del elemento en una sección CDATA.

Ejemplo:

<script>
<![CDATA[
 //contenido no procesado del script.
]]>
</script>

Sin embargo, esta técnica no es amigable con algunos navegadores, por lo que no se recomienda salvo para entornos muy controlados. La mejor opción es usar documentos externos para incluir el estilo y los scripts, algo que, dicho sea de paso, es mucho más cómodo.

En conclusión

Debido a que no es mi intención aburrir a las ovejas, este documento sólo ha incidido en lo más significativo, pero se incluye un anexo técnico con datos más rigurosos sobre temas concretos (elementos y atributos desaprobados, definición de tipos de documento y modularización).

Comentarios

Estás en: tierra de nómadas > tallerWeb > Migración a XHTML.