Se estudiarán paso a paso las reglas para escribir documentos XHTML (lenguaje de marcas hipertextual extensible), mientras se mostrará qué sintaxis HTML (lenguaje de marcas hipertextual) representan una violación del estándar XHTML. También daremos una idea de la procedencia de XHTML y de por qué se suscitó la necesidad para este cambio. Finalmente, aprenderás a escribir código XHTML y a revisar si tu código es válido (es decir, obedece al estándar).
HTML nació en 1980 como un proyecto de Tim Berners-Lee basado en el concepto de hipertexto, que ayudaría a investigadores a compartir información en forma de documentos sobre Internet. Fue implementado más tarde en 1989 en la CERN(organización europea para la investigación nuclear), el nodo más grande en Europa. Desde allí, HTML comenzó su evolución que no está aún concluida, pasando por las versiones 2.0, 3.2, 4.0 y 4.01, todas ellas basadas en SGML (lenguaje de etiquetado estándar generalizado: un metalenguaje usado para crear otros lenguajes como sublenguajes del mismo).
Por otro lado, XML (lenguaje de marcas extensible) es también un metalenguaje (usado para crear otros lenguajes) y es también un sublenguaje de SGML, diseñado para ser más simple de procesar. En estos días, XML es ampliamente utilizado en diferentes formas para construir documentos y organizar información (por ejemplo, RSS (redifusión realmente simple), Atom, etc.) ya que provee una forma estándar de lograrlo que es más fácil de procesar que SGML.
En el año 2000, XHTML es recomendado por el World Wide Web Consortium (W3C) como la nueva versión estándar de HTML basada en XML en lugar de SGML. De esta forma, podemos considerar a XHTML como el resultado de mezclar HTML y XML. Hecho esto, todos los beneficios de XML son ahora heredados por HTML lo que lo hace más fácil de procesar, y por lo tanto estar disponible en más plataformas con capacidades de procesamiento reducidas (por ejemplo, PDAs (asistente digital personal) y teléfonos celulares).
Otro motivo para actualizar las versiones de HTML y para la creación del W3C es el reestablecimiento del propósito original de HTML como un lenguaje semántico. Desde que fue implementado, muchos fabricantes de navegadores comenzaron a transformar el estándar con el objeto de agregarle más funcionalidad. Esto lo convirtió lentamente en un lenguaje más visual que semántico, lo que inspiró al W3C a crear nuevos estándares pensados para revertir este efecto y retornarlo a su origen semántico. XHTML 1.1 es la más reciente de estas actualizaciones pero hay más por venir.
Las reglas a seguir para crear un documento XHTML son simples. Al ser una adaptación de la versión 4.01 de HTML (basada en SGML) al formato XML (también basado en SGML), la mayoría de las características no han cambiado. Solamente unas pocas nuevas reglas fueron implementadas que harán al documento compatible con XML y algunos otros cambios pensados para transformar al lenguaje en uno semántico.
La declaración XML es una simple línea y define la versión de XML y la codificación de caracteres que el documento utiliza. Debe ser declarada antes que cualquier cosa en el documento, incluso antes que la declaración de tipo del documento (tag HTML !DOCTYPE).
<?xml version="1.0" encoding="UTF-8"?>
La declaración del tipo de documento no es solamente utilizada por documentos XHTML, sino por cualquier tipo de documento. En todo caso deberías usar el DTD correcto a través del tag HTML !DOCTYPE. Los DTDs para documentos XHTML son cuatro y dependen de la versión que uses:
XHTML 1.0: Strict, Transitional y Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
La declaración de nombre de espacio XML es una simple URL (localizador uniforme de recursos) y puede ser definida como el valor del atributo "xmlns" para el tag html.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="en">
</html>
Esta lista de reglas debe ser considerada como una lista de diferencias entre HTML y XHTML.
Los tags no vacíos deben ser cerrados siempre. No hay cierre opcional en XHTML.
Válido: <p>Párrafo</p>
Inválido: <p>Párrafo
Los tag vacíos deben ser correctamente cerrados. Para lograr esto puedes usar un cierre normal o puedes cerrar el tag poniendo un espacio seguido de una barra al final del tag de apertura.
Válido: <img src="boton.jpg"></img><img src="boton.jpg" />
Inválido: <img src="boton.jpg">
Los nombres de tags y atributos deben ser escritos en minúsculas para adaptarse a la sensibilidad a mayúsculas/minúsculas de XML (con la excepción del tag HTML !DOCTYPE).
Válido: <a href="http://www.htmlquick.com/es/tutorials.html">Texto ancla</a>
Inválido: <A Href="http://www.htmlquick.com/es/tutorials.html">Texto ancla</A>
Los valores predefinidos de algunos atributos deben estar en minúsculas debido a la sensibilidad a mayúsculas/minúsculas de XML.
Válido: <input type="submit" />
Inválido: <input type="SUBMIT" />
Los valores de los atributos deben ser adecuadamente encerrados entre comillas (simples o dobles). Las comillas no son opcionales en XHTML.
Válido: <span id="id1" class='importante'>Texto</span>
Inválido: <span class=importante>Texto</span>
Los atributos booleanos no pueden ser abreviados (usando solo el nombre del atributo). Como valor debes especificar el nombre del atributo.
Válido: <button id="boton1" disabled="disabled">Ejecutar</button>
Inválido: <button id="boton1" disabled>Ejecutar</button>
Los elementos anidados deben obedecer correctamente su orden jerárquico.
Válido: <span class="doble"><b>Ejecutar</b></span>
Inválido: <span class="doble"><b>Ejecutar</span></b>
Los elementos de bloque no pueden ser declarados como contenido de los elementos de línea.
Válido: <div class="doble"><b>Ejecutar</b></div>
Inválido: <b><div class="doble">Ejecutar</div></b>
Algunos elementos específicos no pueden ser declarados como contenido de otros elementos específicos.
El elemento "a" no debe contener otros elementos "a".
El elemento "pre" no debe contener otros elementos "img", "object", "big", "small", "sub" o "sup".
El elemento "button" no debe contener otros elementos "input", "select", "textarea", "label", "button", "form", "fieldset", "iframe" o "isindex".
El elemento "label" no debe contener otros elementos "label".
El elemento "form" no debe contener otros elementos "form".
Todos los símbolos "&" deben ser escritos usando el nombre de entidad (&), aún en URLs.
Válido: <a href="compraventa.php?id=1&sub=2">Compra & venta</a>
Inválido: <a href="compraventa.php?id=1&sub=2">Compra & venta</a>
Las referencias de entidad de caracteres son sensibilidad a cambios en mayúsculas/minúsculas de acuerdo a la regla de XML.
Válido: á - á (para á)
Inválido: á - &aAcuTe; (para á)
El atributo "alt" debe estar siempre presente en el tag HTML img.
Válido: <img src="pajaro.jpg" alt="Un pájaro volando"></img>
Inválido: <img src="pajaro.jpg"></img>
El texto comentado será completamente ignorado por un procesador XML, lo que significa que comentar scripts o códigos de estilo para "ocultarlos" de los navegadores antiguos será igual a borrarlos. Si el script o código de estilo contiene un carácter "&" ó "<", éstos serán procesados por el procesador XML. Para evitar este inconveniente puedes elegir entre declararlos en archivos externos o utilizar el bloque CDATA.
Válido:
<style type="text/css">
<![CDATA[
p { color: blue; }
]]>
</style>
Inválido:
<style type="text/css">
<!--
p { color: blue; }
-->
</style>
El atributo "name" ha sido formalmente desaprobado para los elementos a, applet, form, frame, iframe, img, y map, y puede ser excluido en futuras versiones.
En adición a aquellas declaradas anteriormente, los documentos estrictos de XHTML (XHTML 1.0 Strict y XHTML 1.1) deben seguir estas reglas.
El texto no debe ser definido directamente en el cuerpo del documento (tag HTML body). En lugar de ello, insértalo dentro de un párrafo, de un bloque div o de algún otro elemento.
Válido: <body><p>Texto</p></body>
Inválido: <body>Texto</body>
Aún cuando XHTML es compatible con sus versiones previas, algunas consideraciones deben ser tomadas para hacer que funcionen en algunos agentes de usuario viejos. A continuación se listan los problemas de compatibilidad en XHTML 1.0 y sus soluciones.
La declaración XML puede causar que algunos agentes de usuario identifiquen tu documento como irreconocible en lugar de HTML. Esto puede resultar en una mala representación de tu documento. Para resolver este problema deberías evitar el uso de la declaración XML y, como la codificación de caracteres de los documentos XML es especificada en esta, reemplazarla con una declaración meta en el encabezado:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
El cierre abreviado para elementos vacíos debería escribirse con un espacio antes de la barra final. Navegadores viejos considerarán a esta barra como un atributo no identificado y simplemente la ignorarán.
Compatible: <br />
No compatible: <br/>
La forma no abreviada para elementos vacíos puede causar que algunos agentes de usuario produzcan resultados inesperados. Usa la la forma abreviada.
Compatible: <br />
No compatible: <br></br>
Cualquier script o código de hojas de estilos que contenga caracteres como "&" ó "<" ó "]]>" ó "--" será procesador por un procesador XML, el cual también ignorará completamente el texto comentado (por ejemplo, "<!-- comentario -->"). La mejor solución, dado que los bloques CDATA pueden resultar una sintaxis irreconocible en navegadores viejos, es declarar los scripts y código de hojas de estilos en archivos externos. Recuerda que para apuntar a estos archivos debes usar estas declaraciones en el encabezado de tu documento:
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="common.js"></script>
Múltiples espacios en blanco y saltos de línea en medio de los valores de los atributos pueden causar problemas en muchos agentes de usuario. Evita su uso, especialmente debido a que no son necesarios.
El atributo "xml:lang" es introducido en XHTML y se propone reemplazar al atributo "lang". Dado que algunos agentes de usuario pueden no reconocer este nuevo atributo usa ambos para compatibilidad (el atributo "xml:lang" toma precedencia).
Compatible: <a href="es.html" lang="es" xml:lang="es">
No compatible: <a href="es.html" xml:lang="es">
En XML, las URIs apuntando a bookmarks en una página (por ejemplo, xhtml.html#compatibility) se refieren a atributos "id" en lugar de atributos "name" como en HTML 4. De modo que para lograr una completa compatibilidad con versiones anteriores y actuales (con HTML y XHTML) deberías especificar ambos atributos con el mismo valor.
Compatible: <a name="lo-basico" id="lo-basico">
No compatible: <a name="lo-basico">
En XML, los caracteres disponibles para componer atributos "name" e "id" son más que aquellos permitidos en HTML 4. para construir nombres e ids compatibles, usa unicamente: letras de la A a la Z (Mayúsculas y minúsculas), números del 0 al 9, guiones "-", guiones bajos "_", dos puntos ":" y puntos "." (El valor debería empezar siempre con una letra).
Compatible: <a name="lo-basico" id="lo-basico">
No compatible: <a name="0-lo;basico" id="0-lo;basico">
La referencia de caracter nombrada ' (el apóstrofe) es introducida en XML 1.0 y por lo tanto válida, pero para HTML 4 es irreconocible. Para lograr compatibilidad usa la representación ' en su lugar.
Compatible: it's ok
No compatible: it's ok
Esta lista enumera las diferencias entre XHTML 1.0 Strict y XHTML 1.1.
El atributo "lang" ha sido completamente reemplazado por el atributo "xml:lang".
Válido: <span xml:lang="es">Texto</span>
Inválido: <span lang="es" xml:lang="es">Texto</span>
El atributo "name" ha sido completamente reemplazado por el atributo "id" para los elementos "a" y "map".
Válido: <a id="bookmark1">Texto ancla</a>
Inválido: <a name="bookmark1">Texto ancla</a>
La colección de elementos "ruby" ha sido agregada. Lee más acerca de anotaciones Ruby
Como has de notar, XHTML 1.1 ya no es compatioble con las versiones anteriores dada la imposibilidad de usar los atributos "name" y "lang". A menos que no tengas la necesidad de utilizarlos, tu documento no será completamente compatible con HTML 4 y con ciertos agentes de usuario.
Puedes siempre validar tus documentos XHTML (así como muchos otros documentos) para revisar que tu arduo esfuerzo es 100% correcto. Puedes hacerlo usando el servicio de validación de etiquetados de W3C donde puedes elegir entre validar por URL, por subida de archivo o por entrada directa. Cuando el resultado es mostrado, la lista de errores y advertencias (si existen) te dejarán ver qué y dónde corregir.