Despabilando la Mononeurona ::

Despabilando la MonoNeurona::Internet es de todos [Inicio] [Regresar]

WWW \ Pasando de HTML a XHTML

Pasando de HTML a XHTML

Este artículo ha sido consultado en 1,215 ocasiones.

Actualmente asociamos Internet con las computadores y navegadores que se ejecutan en ellas, pero en el futuro cercano Internet estará en todos lados: los teléfonos celulares, la TV y el refrigerador: podremos revisar los precios y ofertas de cada producto de la despensa y solicitar una cotización entre diferentes supermercados, además podremos pedir una pizza o un boleto para el cine sin usar el teléfono.

Hacer esto es imposible con HTML, pues los costos por crear una página para cada tipo de dispositivo serían prohibitivos. La solución ideal radica en crear un sólo documento que sea limpio, estricto y estandárizado y que apartir de él se estructure de manera diferente para cada caso particular. Hacer esto es muy difícil, quizás imposible, con HTML, un lenguaje de marcación donde la exigencia en la codificación es de escaso nivel, además en él la mala estructuración y la redundancia son frecuentes. Usted dirá que este aumento en la exigencia implica un aumento en las horas de trabajo pero la verdad es que no es así, si usted crea un sitio XHTML+CSS logrará una agilidad en el diseño sorprendente: en 50 minutos de tocar los estilos CSS su sitio obtendrá un nuevo, mejor e irreconocible diseño. Del modo tradicional tendría que dedicarle a esta tarea quizás un par de días. Además, los sitios hechos con XHTML son más rápidos y poseen un despliegue más elegante.

Una (gran) motivación para pasar nuestro sitio a XHTML radica en que HTML (actualmente en la versión 4.0) no se desarrollará más. Existe un acuerdo para abandonarlo paulatinamente en beneficio de XHTML (Extensible Hyper Text Markup Language).

La diferencia principal entre HTML y XHTML es que el código de este último se sujeta a un tipo de reglas que se especifican en el DOCTYPE (tipo de documento) con el que inicia todo documento XHTML. Veamos uná página elemental de XHTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title> ::EL titulo </title>
</head>
<body>
<p>Este es mi primer XHTML !!</p>
<br />
</body>
</html>

La primera línea (xml version="1.0"...) no es obligatoria, algunos navegadores como el IE 4.5 para Mac y el Netscape 4.0 no despliegan bien el código con esta línea, pero realmente hay muy pocos navegadores de este tipo hoy día. Colocar esta línea o no, es su elección. Sin embargo, está línea le indica al navegador la codificación de la página, en este caso el iso-8859-1 señala que la página actual será desplegada usando los carácteres de Europa Occidental (que incluyen al español). ¡Puede teclear los acentos y las eñes sin necesidad de aacute;, eacute; ntilde; y demás etcéteras!

El documento xhtml1-transitional.dtd contiene los lineamientos que los tags deben seguir para que la página sea un documento válido. Esto es interesante pues XHTML nos permite crear nuestros propios tags para estructurar nuestra información según nuestras necesidades. Al iniciarnos con XHTML usaremos el Document Type Declaration ó DTD transitional, pues es un poco menos exigente en la marcación de los tags, sin embargo, cuando usted sienta que ya domina satisfactoriamente el XHTML, deberá pasarse al DTD strict.

La línea <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> indica el elemento root (raíz) de la página. Si usted ha usado Linux sabe que del root (/) parten los elementos del sistema. Los documentos XHTML también deben tener un lugar de donde partir. Además del elemento root, esta línea señala que todo lo que se desprenda de él, estará en español (es).

Escribiendo XHTML

Veamos las diferencias principales en la codificación de XHTML con respecto a HTML.

1.- Todos los tags en minúsculas. tanto los tags como sus atributos deben ir en minúsculas. En HTML podemos tener:

<P><B> Este es un parrafo </B></P>
<FORM ACTION=EDIT.PHP METHOD=POST>

Pero en XHTML debe ser:

<p><b> Este es un parrafo </b></p>
<form action="edit.php" method="post">

2.- Correcta anidación de los tags. En XHTML no podemos intercalar desordenadamente los tags. En HTML podemos tener:

<p> <i> <b> Código mal anidado <i> </b> </p>

Pero en XHTML debe ser:

<p> <b> <i> Código correctamente anidado <i> </b> </p>

3.- Todos los atributos llevan comillas dobles. En HTML podemos tener:

Pero en XHTML debe ser:

4.- Todo tag abierto se cierra. incluso los tag img, type (de los formularios) y br deben cerrarse. En HTML podemos tener:

Pero en XHTML debe ser:

Además de cerrarse, el tag img debe tener el atributo alt y title, alt es "alternative text" (para los navegadores Web textuales como lynx o Links). Mientras, title es el tooltip que se despliega cuando colocamos el cursor del ratón sobre la imagen.

5.- JavaScript dentro de tag CDATA. Los javascripts que van dentro del cuerpo de la página (no en el header) deben estar dentro del tag CDATA. En HTML podemos tener:

Pero en XHTML debe ser:

6.- Las anclas son IDs. Las anclas (anchor) que nos permiten navegar dentro una página grande, ya no son referenciadas por el tag a sino por el ID del elemento hacia el cual deseamos ir. En HTML podemos tener:

<a name=top> <img src=imagen.png> </a>

<a href="#top"> Ir arriba </a>

Pero en XHTML debe ser:

<img src="imagen.png" id="top" title="Imagen" alt="Imagen" /> </a>

<a href="#top"> Ir arriba </a>

7.- Los atributos deben ser explícitos. Los atributos deben tener un nombre y un valor sin reducirlos. En HTML podemos tener:

<input type="radio" value="2" checked>
<td nowrap> Texto </td>
<option value="m" selected>

Pero en XHTML debe ser:

<input type="radio" value="2" checked="checked">
<td nowrap="nowrap"> Texto </td>
<option value="m" selected="selected">

Última actualización: 2007-04-29 10:56:59-05