Bien, en el primer capítulo de esta serie ya vimos cómo HTML creció con bases endebles, y por qué XHTML ha debido llegar al rescate. Ahora conoceremos los más fundamentales elementos que nos permitirán salir del "Lado Obscuro" del web y dirigirnos al camino pavimentado de XHTML.

1.- LOS 2 PASOS

Paso #1.- Indica el tipo de documento

Lo primero que debemos hacer para desarrollar un documento XHTML válido, es indicarle al navegador el tipo de documento que va a recibir. Actualmente existen tres tipos de documentos XHTML que podemos usar: Estricto, Transicional y Frameset. El primero de ellos implica que el documento en su totalidad se apega al 100% de las normas, el segundo permite omitir algunas de estas normas que aún son de uso común entre los desarrolladores, y la tercera… bueno, sinceramente no se para que la hicieron. No conozco ningun webmaster que se digne de serlo que use frames.

Para el objetivo de este artículo, usaremos el segundo. Ya llegará el tiempo de ponernos más estrictos, por el momento queremos disfrutar de esta transición. (¿vieron por qué lo de transicional?)

A continuación vemos la correcta aplicación de un DOCTYPE. Que debe ir al inicio de cualquier documento (lease página)

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Paso #2.- Verifica la codificación de acuerdo al documento

Bien, lo acepto, esto es parte del primer paso, pero quise ser más explícito con la importancia de la codificación

Siempre que el documento vaya a usar caracteres latinos (acentos y eñes) es necesario indicar una codificación compatible con los mismos. La codificación por default de XHTML es UTF-8, misma que tiene conflictos con algunos caracteres de uso común en nuestra lengua, por eso es importante asegurarse que la codificación sea iso-8859-1, como lo vimos en el ejemplo inicial

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

El tercer paso es apegarte a las reglas… a continuación te muestro 5 reglas básicas que cubren la mayor parte de los errores de un documento XHTML

2.- LAS 5 REGLAS

Regla #1.- Si no lo cierras, no sirve

regla1En XHTML no puede haber elementos sin cierre. Un <p> debe cerrarse con un </p>, un <li> debe cerrarse con un </li>, y así todos los elementos.

Aquellos que son independientes como <br>, <hr> y los <input>, deben cerrarse a si mismos de esta forma: <br />, <hr /> y <input />

Regla #2.- Anida de forma lógica

regla1Los elementos en un documento XHTML deben cerrarse en el orden inverso que fueron abiertos.

De tal forma que <div><p><strong> debe cerrarse en el orden <strong><p><div>. No puedes saltarte un cierre, eso convertiría tu documento en "Mal Formado", y fallaría su validación.

Regla #3.- No uses mayúsculas

regla1Tanto los nombres de las etiquetas como los nombres de los atributos deben escribirse en minúsculas.

Esto quiere decir que la siguiente etiqueta: <DIV CLASS="EncabezadoPrincipal"> es incorrecta, su forma correcta sería: <div class="EncabezadoPrincipal">, nota que el valor del atributo si puede tener mayúsculas, la regla se aplica para los nombres de las etiquetas y atributos, no para los valores o contenido de los mismos.

Regla #4.- Usa las comillas

regla1Todos los atributos de cualquier etiqueta deben encerrarse entre comillas.

La forma correcta de asignar valores a los atributos de una etiqueta es la siguiente: <img src="mi_imagen.gif" height="50" width="150" alt="Mi Foto">.

Regla #5.- No lo uses para diseñar

regla1Piensa en XHTML como el medio para organizar y estructurar tu documento, no como un medio para darle formato. Olvidate de los <font>, los <… background>, <…align>, etcétera. Más adelante veremos como los estándares nos dan una herramienta para cada cosa, y las hojas de estilo se presentan como una excelente forma de dar color y vida a un documento XHTML.

CONCLUSIONES

Si bien esto no es todo en cuanto a XHTML se refiere, es un excelente comienzo, y adoptar estas reglas (incluso cuando usamos HTML convencional) nos hará caminar hacia la estandarización.

A continuación te muestro un documento XHTML usado de forma estructural, validado por W3C como XHTML, y que cumple con la función de estructurar el contenido de forma lógica:

Página Manoloweb PHP5 Live Sin Estilos, solo XHTML

Y esta es EXACTAMENTE la misma página, con una hoja de estilos aplicada:
Página Manoloweb PHP5 con Estilos

Si bien es cierto que el diseño puede no gustarte, el objetivo es hacer notar como pueden separarse la estructura del diseño, y como un documento XHTML estándar puede darte multiples opciones de presentación.

En el siguiente artículo de la serie, definimos la Estandarización, abordamos el correcto uso de las etiquetas, analizando a detalle algunos de los malos usos que se han generalizado por causa de la des-estandarización.