Curso práctico de XHTML 1.0

A continuación vamos a ver,las diferencias que existen hoy en día entre el HTML que se escribe y el XHTML y,además veremos las novedades que introduce el XHTML respecto al HTML.

Lo más importante de la siguiente enumeración de diferencias y novedades es darnos cuenta que se producen porque el XHTML es una aplicación XML y, por tanto, que como mínimo se deben cumplir las reglas de buena formación que ya estudiamos en el capítulo 2.

  • Tomado como un todo, cumple la regla denominada "document"
  • Respeta todas las restricciones de buena formación dadas en la especificación.
  • Cada una de las entidades analizadas que se referencia directa o indirectamente en el documento está bien formada.

. Diferencias entre el HTML y el nuevo XHTML

Los nombres de elementos y atributos deben escribirse en minúsculas.

El XML es sensible a la utilización de mayúsculas y minúsculas, lo que significa que las elementos <LIBRO> y <libro> son diferentes según la especificación XML.

Y además si nos fijamos en las DTD que conforman el XHTML sus elementos y atributos están definidos en minúsculas; por tanto, las etiquetas del código XHTML deben estar siempre en minúsculas.

El siguiente código:

<BODY BgColor="#000000">

puede ser correcto en HTML pero en XHTML tiene que ser:

<body bgcolor="#000000">

Todos los valores de los atributos deben ir entrecomillados.

En HTML ya sabemos que es posible escribir expresiones del tipo:

<table border=2>

pero como hemos visto una de las reglas de buena formación del XML es la obligatoriedad de entrecomillar todos los atributos. Por tanto,la anterior expresión en XHTML tendría que ser:

<table border="2">

siendo las comillas tanto simples como dobles.

Todos los elementos "no vacíos" deben ir entre la etiqueta de principio y la etiqueta de final.

Con el XHTML se ha terminado la extendida constumbre del HTML de no cerrar las etiquetas con contenido. En HTML en algunos elementos podía omitirse la etiqueta de cierre,de tal manera que la apertura de los elementos que le sucedían implicaba dicho cierre. Esta omisión no está permitida en XHTML, y por tanto todos los elementos que no estén declarados en la DTD con EMPTY deben tener una etiqueta de cierre.

Por ejemlo, el siguiente código:

<p>Nombres:
  <ul>
    <li>Joaquin
    <li>Manuel
  </ul>

en XHTML tendremos que escribirlo:

<p>Nombres:</p>
  <ul>
    <li>Joaquin</li>
    <li>Manuel</li>
  <ul>

Todos los elementos deben estar anidados ordenadamente.

En HTML no hace falta tener especial cuidado en ordenar los anidamientos de las etiquetas (etiquetas dentro de otras etiquetas), siendo posible que existan solapamientos. Al igual que sucede con XML, en XHTML no se permiten tales libertades, debiendo tener especial cuidado en el orden en el que se realizan los anidamientos.

Por conseguiente la siguiente expresión que en HTML es correcta:

<p>Este texto <b>negrita<i> y cursiva</b></i></p>

en XHTML tendremos que escribirla de la siguiente manera:

<p>Este texto <b>negrita<i> y cursiva</i></b></p>

Minimización de los atributos.

El XML no soporta la minimización de atributos. Los pares atributo-valor deben escribirse en toda su extensión. Los nombres de atributos como compac. checked, etc. no pueden aparecer en elementos sin que sea especificado su valor.

El siguiente código:

<OPTION VALUE="valor" SELECTED>
<INPUT TYPE="tipo" CHECKED>
<DL COMPACT>

En XHTML debería escribirse:

<option value="valor" selected="selected">
<input type="tipo" checked="checked">
<dl compact="compact">

Los elementos "vacíos" deben llevar terminación.

Los elementos vacíos deben tener bien una etiqueta de cierre bien terminar su etiqueta de apertura con />.

Por ejemplo,expresiones del tipo <hr> <br> deberan escribirse en XHTML: <hr/> <br/>

. Novedades

Los documentos XHTML deben incluir una declaración de "tipo de documento."

Aunque esta norma ya existe en los documentos HTML (al ser aplicaciones SGML) la verdad es que se utiliza en muy pocas ocasiones.

En el XHTML su utilización es obligatoria, y es necesario que antes del elemento raíz exista una declaración DOCTYPE. El identificador público incluido en la declaración DOCTYPE a alguna de las tres siguientes DTD:strict,transitional y Frameset, siendo todas ellas unas aproximaciones, más o menos completas, a la especificación HTML 4. Su declaración y características más importantes son:

- strict

Se utiliza cuando se da formato a los textos a través de CSS (Cascading Style Sheets), o sea, cuando no se recurre a las etiquetas <font> etc, para controlar la forma en la que los navegadores muestran el contenido del documento.

La declaración del tipo de documento debe ser de la siguiente manera:

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">

- transitional

Se utiliza cuando no se describe la presentación de los documentos por medio de hojas de estilo en cascada, prefiriendo realizarlo a base de etiquetas. Es el sistema adecuado para cuando se desea facilitar el acceso a usuarios con navegadores sin posibilidades de tratamiento de CSS

La declaración del tipo de documento debe ser de la siguiente manera:

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-transitional.dtd">

- frameset

Se utiliza cuando los documentos incorporan cuadros.

La declaración del tipo de documento debe ser de la siguiente manera:

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

En todos los casos es evidente que el identificador del sistema puede ser modificado apropiadamente para reflejar convenciones de rango local.

El elemento raíz

El elemento raíz del documento XHTML debe ser <html> y en él debemos declarar el "namespace" usando el atributo xmlns. EL "namespace" para XHTML es: http://www.w3.org/1999/xhtml

Los elementos <script> y <style>

En XHTML, los elementos style y script se declaran como elementos con contenido #PCDATA. Pero en estos elementos se puede colocar todo tipo de código y,por tanto,los elementos <,y & serán tratados como comienzos de etiquetado, y entidades como &lt; y &amp; seran reconocidas como referencias a las entidades < y & respectivamente por el procesador XML. Englobar el contenido del elemento script y style dentro de una sección como CDATA evita el procesamiento de estas entidades.

Por tanto, lo que en HTML escribimos así:

<SCRIPT LANGUAGE="JavaScript">
  document.write("<p>Esto es una prueba</p>");
</SCRIPT>

En XHTML lo debemos escribir asi:

<script language="JavaScript">
<![CDATA[
  document.write("<p>Esto es una prueba</p>");
]]>
</script>

El único carácter que no está permitido dentro es el que indica el cierre de la marca CDATA, es decir,el código ]]>.

En muchos casos se puede evitar la utilización de las secciones CDATA, incluyendo los códigos en archivos externos y aplicando variantes similares a:

<script language="JavaScript" src="codigo.js"></script>
<link href="nombre_hoja_de_estilo.css"/>

. Algunos ejemplos

. Un pequeño documento XHTML valido

A continuación escribimos un documento XHTML sencillo, válido, que se ajuste a la strict.dtd.

Éste documento XHTML válido respecto de la strict.dtd

<?xml version="1.0"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sp">
  <head>
    <title>Los mejores buscadores</title>
  </head>
  <body>
	 <p>Los mejores buscadores:</p>	
    <p><a href="http://www.terra.es/">Terra</a>.</p>
	 <p><a href="http://www.altavista.com">Altavista</a></p>
  </body>
</html>

Hemos modificado el identificador del sistema para poder trabajar en local.

Para poder validar el documento no hace falta colocar en el mismo directorio la DTD xmlhtml1-strict.dtd y los ficheros de entidades a los que hace referencia.

<!--================ Character mnemonic entities -->

<!ENTITY % HTMLlat1 PUBLIC
   "-//W3C//ENTITIES Latin 1 for XHTML//EN"
   "xhtml-lat1.ent">
%HTMLlat1;

<!ENTITY % HTMLsymbol PUBLIC
   "-//W3C//ENTITIES Symbols for XHTML//EN"
   "xhtml-symbol.ent">
%HTMLsymbol;

<!ENTITY % HTMLspecial PUBLIC
   "-//W3C//ENTITIES Special for XHTML//EN"
   "xhtml-special.ent">
%HTMLspecial;

Una vez que tenemos todo esto en el mismo directorio no nos queda más que validar el documento con nuestro parser de XML:

pxml ejem_xhtml.htm

Fijaros cómo estamos trabajando con un documento HTML del cual podemos comprobar su validez con un parser XML. ¡¡Ventajas de trabajar con documentos XML¡¡

NOTA: Para validar el documento XML podéis utilizar cualquier parser de XML. XMLSoftware es una buena dirección para encontrar el que más se adapte a vuestro entorno.

. Obtener todos los enlaces de un documento XHTML

¿Cómo podríamos obtener una lista con todos los enlaces de un documento XHTML?

EL XHTML es una aplicación XML y, como tal, podemos utilizar las herramientas que normalmente utilizamos para trabajar con éste. Por tanto, podríamos hacer una XSLT que nos generase una página HTML con todos los enlaces del documento XHTML.

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet 
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:html="http://www.w3.org/1999/xhtml"
 exclude-result-prefixes="html">
 
<xsl:template match="html:html">
<html>
  <head>
  </head>
  <body>
  <p><b>Lista de enlaces de un documento XHTML</b></p>
  <ul>
   <xsl:for-each select="//html:a">
    <li>
     <a href="{@href}"><xsl:value-of select="."/></a>
    </li>
   </xsl:for-each>
  </ul>
  </body>
</html>
</xsl:template>
</xsl:stylesheet>

Código XSLT

Fijaros cómo en la XSLT debemos definir el "namespace" que utiliza el documento XHTML y le indicamos que no lo ponga en el documento de salida.

NOTA: Para más información sobre como combinar XML y XSLT para generar HTML os recomiendo visitar el artículo que sobre este tema escribimos hace unos meses.

El resultado (aplicado sobre el documento XHTML del ejercicio anterior) lo podéis ver en la página enlaces.htm.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO

¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.