Introducción al XHTML

Introducción al XHTML

El Extensible Hypertext Markup Language, o simplemente XHTML para los amigos, es una reformulación de HTML 4.01 pensada como una aplicación del lenguaje XML. Es decir, XHTML es una versión de HTML, con los mismos elementos y atributos, pero basada en la sintaxis y estructura de XML.

Al principio, HTML fue creado para el intercambio de documentos científicos a través Internet. Sin embargo, a medida que la web evolucionaba y se expandía más allá del campo científico/universitario, los requisitos de los desarrolladores web también crecían. La necesidad de un lenguaje de marcado para páginas web, que sea fácilmente extensible por medio de módulos y además interoperable con otras aplicaciones de XML, dio como resultado a la creación de la especificación XHTML 1.0.

Usar XHTML por sobre HTML tiene muchas ventajas importantes. El World Wide Web Consortium, entidad que se encarga de desarrollar especificaciones sobre las tecnologías que construyen la WWW, afirma que:

  • XHTML es extensible. Esta es la principal ventaja sobre HTML. XHTML permite agregar nuevos elementos y atributos a través de la modularización, lo cual nos da la posibilidad de aprovechar las ventajas de otras tecnologías de desarrollo web, como MathML, y de las que se vayan a desarrollar en el futuro, como XForms.
  • XHTML es accesible. Debido a su énfasis en la estructura de un documento y no en su presentación, XHTML es un lenguaje que tiene como objetivo el poder ser interpretado por cualquier dispositivo capaz de leer XML, ya sea un navegador o un teléfono celular.

Luego de esta breve introducción, pasemos entonces a ver el esqueleto de un documento XHTML, explicado en detalle paso por paso.

Anatomía de un documento XHTML

Si tenemos presente la estructura de un documento HTML, nos daremos cuenta que son muy similares a los documentos XHTML; de hecho, en XHTML no se han agregado elementos adicionales. Sin embargo existen un par de requisitos, que aunque no son complicados de entender ni de aplicar para el que está empezando en el diseño de sitios web, tal vez impliquen un cambio de mentalidad drástico para aquel que viene maquetando en HTML.

A continuación mostraremos la mínima expresión de un documento XHTML, para luego enfocarnos en aquellas diferencias propias de este nuevo lenguaje de marcado.


1. <?xml version=”1.0″ encoding=”ISO-8859-1″?>
2. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
3. <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”>
4. <head>
5. <title>Documento simple en XHTML</title>
6. <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
7. </head>
8. <body>
9. <h1>Documento simple en XHTML</h1>
10.<hr />
11.<p>Este es nuestro <em>primer documento</em> en <acronym title=”Extensible Hypertext Markup Language”>XHTML</acronym>.</p>
12.</body>
13.</html>

Línea 1: La declaración XML. La primera línea indica al navegador que el documento que sigue está desarrollado conforme a la versión 1.0 de XML y que se basa en el juego de caracteres especificado en la norma ISO-8859-1. Es importante detenernos sobre este punto y aclarar que el World Wide Web Consortium recomienda, pero no obliga incluir ésta línea de código en todos nuestros documentos XHTML, puesto que está demostrado que muchos navegadores tienen problemas al momento de leer esta declaración, resultando en páginas que se muestran incorrectamente. Estos navegadores incluyen algunas versiones de los populares Internet Explorer y Netscape Navigator.

Es por esto que recomendamos no incluir esta declaración XML en nuestras páginas, por lo menos hasta que las versiones futuras de los navegadores más usados solucionen este problema. Un cuadro con información sobre los navegadores soportan esta declaración XML puede encontrarse en http://www.webstandards.org/learn/reference/prolog_problems.html.

Los lectores más despiertos se preguntarán entonces como especificaremos el tipo de contenido que estamos sirviendo y el juego de caracteres que usamos en nuestro documento XHTML. Para ello, agregamos la línea 6, la cual explicamos en detalle más adelante.

Línea 2: El DTD a usar. Un DTD o Document Type Definition, es simplemente una especificación de todos los elementos, atributos y entidades permitidos para un determinado tipo de documento XHTML o HTML. Esto significa que, según el DTD que estemos usando, tendremos a nuestra disposición un conjunto de elementos para usar al momento de codificar nuestras páginas web. Por ejemplo, el DTD de XHTML 1.0 en su versión estricta, elimina todos los elementos de presentación de un documento HTML. Esto quiere decir que sería inválido usar el elemento <center> en nuestros documentos XHTML con DTD estricto.

Esta declaración del DTD a usar en una página web, no es específica de XHTML; con HTML también debíamos especificar uno. Existen varias versiones de DTDs para XHTML, e incluso también podríamos crear un DTD propio para luego utilizar en nuestros documentos. El World Wide Web Consortium, define 3 tipos de DTDs, los cuales son:

  • Strict. Es el DTD más rígido que podemos usar. En este DTD, todos los elementos de presentación , como <font> o <center>, son eliminados y por consiguiente no es posible utilizarlos en nuestros documentos. Por lo tanto, para controlar los elementos de presentación de nuestro documento, como la asignación de colores y el posicionamiento de elementos, deberemos utilizar CSS. La línea que especifica que un documento XHTML es estricto, es la siguiente:

    < !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
  • Transitional. Es un DTD un poco más flexible que el anterior. Contiene algunos elementos de presentación, por ejemplo, el elemento <center>. Está pensando para aquellos desarrolladores que están haciendo el cambio hacia un DTD estricto, pero que todavía no tienen suficiente experiencia con CSS. Si deseamos especificar que nuestro documento XHTML es del tipo transicional, deberemos introducir la siguiente línea:

    < !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  • Frameset. Es el DTD que debemos incluir cuando estamos creando sitios web que incluirán frames o marcos. Para ello, la declaración DOCTYPE es la siguiente:

    < !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Ahora bien, ya vimos que tenemos varios sabores de DTDs en XHTML. La pregunta del millón es, ¿Cuál deberíamos usar para nuestros sitios web? Aquel que nos asegure en un 100% la premisa de separación del contenido de un sitio de su presentación. Recordemos: El concepto clave detrás de todas estas nuevas tecnologías de desarrollo web es la separación del contenido de su presentación. Es por esto que el único DTD que nos garantiza alcanzar esta premisa, es el de XHTML estricto, el cual no incluye ningún elemento de presentación en su especificación, obligando a que todo el aspecto visual de nuestra web sea necesariamente controlable utilizando CSS.

Volviendo a nuestro ejemplo, a través de la declaración DOCTYPE en la línea 2, especificamos que el documento usará los elementos, atributos y entidades declarados en el DTD de XHTML 1.0 estricto. Recordemos que esta declaración DOCTYPE es sensible a mayúsculas y minúsculas y que además debe ir en la primera línea de nuestro documento, después de la declaración XML (si es que la estamos usando).

Línea 3: El elemento . En XHTML, ahora el elemento raíz requiere que especifiquemos obligatoriamente de:

  • El espacio nominal de los elementos. En XML, evitamos la ambigüedad en los nombres de los elementos usados agrupándolos en espacios nominales. Al especificar el atributo xmlns apuntando al espacio nominal de XHTML le decimos al navegador que los elementos que siguen son de XHTML y no de otro lenguaje basado en XML, como por ejemplo MathML.
  • El idioma. A través de la combinación de atributos xml:lang (propio de XML) y lang (propio de HTML), definiremos el idioma en el cual está escrito el texto de nuestro documento, en nuestro caso, español.

Línea 6: El tipo de documento y el conjunto de caracteres usado. Como habíamos nombrado anteriormente, la declaración XML nos servía para especificar el conjunto de caracteres usado por un documento. Pero recordemos que al incluir esta línea de código, también llamada el XML prolog, nos llevaba a tener problemas con la mayoría de los navegadores, por lo que decidimos omitirla. Ahora bien, ¿cómo le decimos entonces al navegador el juego de caracteres que estamos usando en nuestro documento? Es aquí en donde entra en escena el meta tag http-equiv, el cual especifica el tipo de contenido que estamos sirviendo (en nuestro caso text/html) y además el juego de caracteres usado (ISO-8859-1). Es importante recordar que si no vamos a poner la declaración XML de la línea 1, deberemos especificar obligatoriamente el tipo de contenido del documento y el juego de caracteres del mismo a través de este meta tag.

Líneas 9, 10 y 11: Diferencias con HTML. XHTML heredó de XML dos características interesantes, que a simple vista lo hacen parecer más estricto que HTML:

  • El documento XHTML debe ser válido. Incluyendo la declaración DTD que deseemos, y limitándonos a sólo los elementos especificados en ese DTD, cumpliremos fácilmente con este requisito. De cualquier manera, podemos comprobar si nuestro documento es válido con la herramienta de validación provista por el World Wide Web Consortium, explicada en detalle mas adelante.
  • El documento XHTML debe estar bien formado. Esto quiere decir que debemos abrir y cerrar los elementos de manera correcta y en orden. Un ejemplo de dos líneas de código XHTML mal formadas:
    <p>Este es nuestro <em>primer documento.</p></em>
    <p>Este es nuestro <em>primer documento.</em>
    Y a continuación, la misma línea de código respetando esta restricción de XHTML (Noten que el primer elemento en abrirse es siempre el último en cerrarse):
    <p>Este es nuestro <em>primer documento.</em></p>

    Por otro lado, XHTML requiere que todos aquellos elementos que no tienen contenido, como <img /> o <hr />, deben cerrarse agregando una barra invertida al final. Por ejemplo, a continuación pueden ver el elemento <img /> en XHTML (noten el espacio obligatorio entre el nombre del elemento y la barra invertida):

    <img src="mi-imagen.png" alt="Mi imagen" />

Además de lo nombrado anteriormente, un documento XHTML:

  • Tiene sus elementos y atributos escritos en minúsculas. Recordemos, XHTML es una aplicación de XML, el cual es sensible a las mayúsculas y minúsculas, por lo tanto, el elemento <p> no es lo mismo que el elemento <P>.
  • Encierra los atributos de sus elementos entre comillas. Todos los atributos necesariamente deben ir entre comillas, incluso aquellos que son numéricos. Ejemplo:

    <acronym title="Extensible Hypertext Markup Language">XHTML</acronym>
    <td colspan=”2″>

  • No soporta minimización de atributos. En HTML, el siguiente código es válido:
    <option selected>
    En cambio, en XHTML, los atributos de un elemento deben ser escritos completamente, por lo cual, la línea anterior en XHTML quedaría como:
    <option selected="selected">

Como vemos, la estructura de un documento XHTML puede parecer, al principio, más estricta que la de un documento HTML. Esto es debido a que XHTML, al ser una aplicación de XML, hereda de este lenguaje su énfasis en la estructura del documento. La idea detrás de estas restricciones es que, una vez que tenemos la estructura de un documento bien formada, ya sea XML o XHTML, cualquier parser o navegador podrá entender el significado del mismo.

Validando nuestro código XHTML

Por validación entendemos la acción de verificar que nuestro documento XHTML cumpla con la sintaxis estándar especificada en un DTD. Ahora bien, si al parecer, una página web se muestra correctamente en un navegador, incluso sin especificar un DTD, ¿porqué entonces debemos validar nuestros documentos? Daremos dos razones que pueden ayudar a entender la necesidad de la validación:

  • Lo que uno está viendo no es lo que otros ven. Tal vez nuestro sitio web puede estar mostrándose correctamente cuando lo probamos con nuestro navegador preferido, pero en la práctica, muchos navegadores interpretan un sitio de maneras diferentes. El único modo de asegurarnos que nuestro sitio web será mostrado de la forma en que deseamos en todos los agentes de usuario disponibles, es a través de la validación de nuestro código XHTML.
  • Evitar el Quirks Mode. Por definición, cuando el navegador no encuentra una línea de código especificando un DTD a usar en el documento, entra en un estado que se llama Quirks Mode. En este estado, el navegador interpreta que la página web puede contener cualquier conjunto de elementos HTML y XHTML, desde elementos correctos hasta incorrectos, y por lo tanto, cambia su motor de renderizado de páginas al de corrección de errores. Este modo a “prueba de fallos” tiene varias deficiencias, una de ellas, es que hace más lento el proceso de carga de una página web, debido a que el navegador tiene que ir corrigiendo el código a medida que lee la página.

La validación de nuestros documentos XHTML se realiza a través de una herramienta de libre acceso, provista por el W3C, y disponible en http://validator.w3.org/. Simplemente ingresaremos la URL del sitio a verificar en un formulario, o bien, subiremos el archivo XHTML desde nuestra PC. Una vez especificada la fuente, la herramienta procesa el documento y devuelve la cantidad de errores encontrados, junto con una pequeña explicación de los mismos y la forma de corregirlos.

Conclusión

Aunque XHTML puede resultar un tanto estricto al principio, el proceso de conversión de HTML a XHTML no es complicado. Existen herramientas de libre uso, como HTML Tidy (ver recuadro “Herramientas útiles”) que “limpian” el código HTML, simplificando la conversión de grandes sitios y páginas web.

El mundo actual de desarrollo de soluciones pensadas para la web, nos muestra una clara tendencia hacia la estandarización y hacia al uso de XML como lenguaje universal de definición de datos. El lenguaje por defecto de marcado para páginas web, HTML, fue repensando con miras hacia XML. En nosotros radica aprovechar todo su potencial.