Pasar de HTML a XHTML

Actualizado el 30/11/2007 < > 13 Cometarios

Resúmen: Guía básica para pasar nuestros documentos de HTML a XHTML, un lenguaje de maquetación de páginas web más potente y con futuro.

Meneame Bitacoras

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 o 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 bien anidado<i></b></p>

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

<table align=center width=90% border=0>

Pero en XHTML debe ser:

<table align="center" width="90%" border="0">

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

<input type="hidden" value="9" name="pass">

<br>

<img src="imagen.jpg" alt="Imagen" title="Imagen" >

Pero en XHTML debe ser:

<input type="hidden" value="9" name="pass" />

<br />

<img src="imagen.jpg" alt="Imagen" title="Imagen" />

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:

<script language="JavaScript" type="text/javascript">

   <!--

   document.write("Hello World!");

   -->

   </script>

Pero en XHTML debe ser:

<script type="text/javascript">

   <![CDATA[

   document.write("Hello World!");

   ]]>

   </script>

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">
Meneame Bitacoras

Publicado el 30/11/2007, última actualización 30/11/2007.

Autor: mononeurona

URL: mononeurona.org

Añadir Comentario (Subir al texto)

13 Cometarios

  1. Elias Llanca

    Muy bueno el tutorial, como dicen los tiempos cambian, ahora HTML ya paso a ser historia. Pues con XHTML, Java, DHTMl, Etc… son la alternativa para una web mas vistosa y elegante…

    Cuelguen Tutoriales de ASP, PERL y CGI

    Chauu.. Hasta la Próxima

    Miércoles, 12 de diciembre 2007

  2. Verónica M.

    Tomo nota de tus sugerencias de tutoriales Elias ;) De ASP tienes un tutorial en la sección de manuales si te interesa.

    Saludos.

    Jueves, 13 de diciembre 2007

  3. crudosky

    Hola que tal soy novato en esto pero tengo una duda que tal vez para ustedes sea tonta si tengo una pagina web que hago con enlaces por ejemplo 10 enlaces pero despues quiero poner otro enlace como hago para que ese enlace salga en las 10 poginas sin estar poniendo en cada pagina el nuevo enlace espero haberme explicaco

    Miércoles, 26 de diciembre 2007

  4. ¿Qué es el XHTML Doctype?

    [...] parte fundamental de todas aquellas páginas que quieran cumplir los estándares, tanto HTML como XHTML. Esta declaración indica que versión de (X)HTML se usa en la página, de forma que los [...]

    Martes, 5 de enero 2010

  5. Estructura de páginas web: Marcado semántico de contenidos

    [...] documento HTML o XHTML debe contar con los siguientes [...]

    Viernes, 26 de febrero 2010

  6. triste

    Estoy triste por eso, cuando me meto al dreamweaver que es donde yo hago las paginas y le pongo xml que se supone que es lo mismo segun investigué, no sé si me equivoco, no me sale la vista de diseño, solo de código, y yo no soy programadora, soy diseñadora, qué hago ahora?

    Domingo, 28 de febrero 2010

  7. Herramientas para diseñadores web: Editores HTML

    [...] de diseño web y de programación, todos los centros de enseñanza inician el estudio de HTML, XHTML y CSS con este rudimentario método. Y la razón es que es el mejor método para conocer a fondo los [...]

    Lunes, 1 de marzo 2010

  8. Verónica M.

    No es lo mismo, deberías programar tus páginas en XHTML si quieres usar XML, consigues un marcado mucho más limpio y correcto que con HTML. La vista de diseño no te va a salir a no ser que que uses lo que te digo, XHTML o HTML.

    Saludos.

    Lunes, 1 de marzo 2010

  9. Consejos para ser un buen desarrollador web

    [...] pues te facilitarán la vida una vez que te hayas adentrado bastante en este mundo. El uso de XHTML creará en ti buenas costumbres que te pueden ayudar a manejar otros metalenguajes como XML, y [...]

    Viernes, 26 de marzo 2010

  10. HTML – XHTML Doctype o versión del documento de una página web

    [...] el CSS). Si haces tus páginas web basándote en esta versión de HTML te será mucho más fácil pasar a XHTML en un [...]

    Jueves, 8 de abril 2010

  11. Maquetación de páginas web: posición de las capas (primera parte)

    [...] código, con el que estaremos creando tres capas y una línea de texto. La capa 3 se encuentra anidada dentro de la capa [...]

    Miércoles, 21 de abril 2010

  12. HTML5, la tecnología que estaremos usando dentro de poco

    [...] Como en toda actualización, hay elementos de la versión anterior que han quedado fuera, tal es el caso de las etiquetas de estilo y alineado como font y center, ya que dichos elementos pasan a ser controlados totalmente por el CSS; aclarando que dicha practica viene manejándose desde la incursión del XHTML. [...]

    Martes, 1 de junio 2010

  13. emmanuel

    soy animador y diseñador estoy aprendiendo a realizar paginas web con esta pagina y alguna otra
    queria consultarles si es conveniente q siga viendo html o lo deje y practique con actionscrpt xhtml css gracias

    Sábado, 12 de junio 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios