En este sencillo manual explicaremos como migrar de HTML a xHTML transitional 1.0
Antes de empezar explicaremos las típicas dudas que se presentan al leer un tutorial de este tipo.
¡En el número 1 de las dudas!
¿Para qué sirve validar una página y/o escribir un código correcto xHTML/HTML?
La gente suele “pasar” por completo de validar un código porque “si se ve perfectamente la web” Para que validarla, ¿no? Hay que tener en cuenta que no solo los humanos leen tu web, los buscadores también la leen y si hay código no valido es muy posible que no entiendan bien la web. Esto conlleva a una mala indexación en los buscadores y, a todos nos gusta que nos indexen bien, ¿no?
¿Qué es eso de transitional, strict etc..?
Es el tipo de DOCTYPE, el DOCTYPE es un encabezado que se usa en todos los documentos html y xhtml, y indica el tipo de página. Es importante especificar correctamente el doctype, ya que los validadores comprobaran el código de una u otra forma.
Hay 3 tipos de doctype:
Strict – Cuando indicamos este tipo de doctype estamos diciendo que vamos a separar el código del diseño, es decir, ¡nada de CSS en el xHTML! Desde luego la mejor opción aunque a veces es mas comoda la definición transitional por motivos de tiempo.
Transitional – Es la misma definicio que strict, pero, esta permitido usar CSS dentro del XHTML, esto se refiere a la etiqueta <style>
Frameset – La misma definición que transitional pero esta permitido el uso de <frameset> (POR DIOS LIBRARNOS DE LOS MARCOS NO LOS USEIS!!!)
Una vez aclarado todo esto, comenzamos el tutorial:
Todas las entidades/etiquetas y atributos van en minúsculas:
Está prohibido usar etiquetas así: <P>, <B>, <SPAN> TODAS deben ir en minúsculas
<p>, <b>, <span>
Todos los atributos van con comillas:
Está prohibido la siguiente sintaxis: <table width=300>, la sintaxis correcta es: <table width=”300”>
Todas las etiquetas han de cerrarse, hasta las que no van en pareja, es decir, cerraremos los <li> con </li> el <p> con </p> y por ejemplo las que van sin parejas como: <img> la cerraremos de la siguiente forma: <img src=”a.jpg” />, <br> la cerraremos asi: <br /> y el <input> lo cerraremos asi: <input type=”text” value=”x” />
Prohibido el uso de atributos cortos.
Cuando me refiero a atributos cortos, me refiero a: checked, readonly, disabled etc… Para usar estos atributos se deben especificar de la forma “larga”, es decir, <input type=”text” disabled=”disabled”> o <input type=”checkbox” name=”x” value=”no” checked=”checked”>
Necesaria la declaración del doctype (previamente nombrado):
Deberemos elegir uno de los doctype que comentamos antes (strict, transitional, framset) y colocar la declracion arriba de nuestra pagina XHTML
La declaración strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
La declaración Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Cuidado con los caracteres raros:
La recomendación del w3c es que usemos la forma extendida de los caracteres marcados como “raros” es decir acentos, ñ, &, / y demás, las formas extendidas las podemos encontrar por internet fácilmente, pero, os dejo algunas de ejemplo: & = & ñ = ñ á = á í = í etc…
Anidar correctamente las etiquetas.
Es decir cerrar las etiquetas correctamente:
<p><font size=”2”></p></font> es incorrecto, deberemos cerrar primero font y luego p, es decir, <p><font></font></p>
Con todas estas normas, un poco de lógica, el validador del w3c y un poco de paciencia se pueden crear páginas xHTML correctas. Todos salimos ganando:
Tu página es más fácil de indexar por los buscadores.
Si alguien tiene que modificar tu página en el futuro, le resultara más fácil.
Los visitantes no tendrán problemas de visualización independientemente de que navegador usen
Migrar de HTML a xHTML está en la categoría:
xHTML
