La verdad es que es muy fácil hacerlo. Las diferencias entre HTML y XHTML no son tantas ni tan grandes. Ahora bien, estamos hablando de “XHTML 1.0 Transitional“, que es el modelo más básico y diseñado específicamente para la gente que quiere cambiar pero no quiere remodelar todo el sistema. Hacer una página válida en XHTML Strict es mucho mas difícil.

Usar DOCTYPE

Es necesario especificar el DOCTYPE del documento. Para los novatos, el DOCTYPE especifica que tipo de HTML/XHTML que usa la página.

Ejemplo:

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

Mas DOCTYPES en las especificaciones de HTML (Strict, Loose, Frameset) y XHTML.

Especificar el xmlns

Viene de XML, es una cosa complicada del XML que no viene a cuanto ahora.

Ejemplo:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

Content-type correcto

XHTML se sirve con un Content-Type distinto a HTML. XHTML necesita XHTML+XML, así:

<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />

Etiquetas en minúscula

Todas las etiquetas de XHTML deben estar escritas en minúsculas.

Mal:

<P>texto en <STRONG>negrita</STRONG></P>

Bien:

<p>texto en <strong>negrita</strong></p>

Etiquetas anidadas correctamente

Las etiquetas y sus cierres deben estar en el orden correcto

Mal:

<p><strong>texto en negrita</p></strong>

Bien:

<p><strong>texto en negrita</strong></p>

Atributos con comillas

Los atributos de las etiquetas deben usar comillas

Mal:

<a href=pagina2.html>pagina2</a>

Bien:

<a href="pagina2.html">pagina2</a>

Etiquetas simples cerradas

Las etiquetas que no tengan cierre deben cerrarse.

Mal:

<img src="imagen.png"><br>

Bien:

<img src="imagen.png" /><br />

El espacio se deja porque algunos navegadores no lo interpretan bien si esta pegado a los atributos.

Cerrar todas las etiquetas

El cierre es obligatorio en todas la etiquetas. En HTML 4.01 se podía no cerrar etiquetas como <li> o <p> pero en XHTML es obligatorio.

Mal:

<ol>
<li>Item 1
<li>Item 2
</ol>
<p>Un párrafo
<p>Otro párrafo

Bien:

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<p>Un párrafo</p>
<p>Otro párrafo</p>

Ya’sta

A que no es tan dificil? A algunos les costará más que a otros (Frontpage escribe las etiquetas en mayusculas), pero los pasos para convertir a XHTML Transitional son muy fáciles y simples. Basicamente la regla general a seguir es ser más específicos y asegurarnos de que no haya nada que pueda confundir al navegador.

 

4 Responses to Como cambiar de HTML a XHTML

  1. Chavalina says:

    Muy buen artículo para los que, como yo, no tenemos muchas ganas de estudiar jejeje.

    Hoy estoy rediseñando mi sitio con planes de hacerlo validar XHTML y me ha servido de mucho tu explicación, clara y completa, sin rodeos, lo estoy siguiendo para aclararme un poco.

  2. pablo says:

    Gracias por tu artículo
    Tienes alguna idea de como detectar automáticamente etiquetas no cerradas?
    Me refiero a un parser php
    Gracias

  3. Hermann says:

    PHP viene con un parser para XML que para el caso te sirve: http://uk.php.net/xml

  4. ely says:

    muy pero muy birn, te felicito, sigue publicando!
    :)

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Set your Twitter account name in your settings to use the TwitterBar Section.