Creando un documento XHTML
Las reglas para crear un documento XHTML son simples. como es una adaptación de la versión HTML 4.01 (basada en SGML) al formato XML (también basado en SGML), la mayoría de las cosas no han cambiado. Sólo algunas nuevas reglas fueron implementadas que harán a los documentos compatibles con XML y algunos otros cambios pensados para hacer al lenguaje in poco más semántico.
La declaración XML
La declaración XML es una simple línea y define la versión y la codificación de caracteres que el documento utiliza. Debe ser declarada antes que nada en tu documento, aún antes que la declaración del tipo de documento (tag HTML !DOCTYPE).
<?xml version="1.0" encoding="UTF-8"?>
Declaración del tipo de documento (DTD)
La declaración del tipo de documento en documentos XHTML, debe ser declarada justo debajo de la declaración XML y debe especificar el tipo de documento que contiene. Los DTDs para documentos XHTML son cuatro y dependen de la versión que utilices:
XHTML 1.0: Strict, Transitional y Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">La declaración del nombre de espacio XML
La declaración del nombre de espacio XML es una simple URL y puede ser definida como valor del atributo "xmlns" en el tag html.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"></html>Reglas generales de XHTML 1.0
Esta lista de reglas debe ser considerada como una lista de diferencias entre HTML y XHTML. Si nunca antes has escrito documentos HTML, considera esta lista como una recomendación mientras lees los tutoriales HTML y la referencia HTML. De todos modos, encontrarás que estas recomendaciones están presentes en todo el sitio.
- Los elementos no vacíos deben cerrarse siempre. No hay cierre opciona en XHTML.
- Válido:
<p>Párrafo 1 1</p><p>Párrafo 2</p> - Inválido:
<p>Párrafo 1<p>Párrafo 2
- Válido:
- Los elementos vacíos deben ser cerrados correctamente. Para lograrlo puedes usar un cierre normal o puedes colocar una barra al final del tag de apertura (un espacio antes de la barra mejora la compatibilidad).
- Válido:
<img src="boton.jpg"></img><img src="boton.jpg" /> - Inválido:
<img src="boton.jpg">
- Válido:
- Los nombres de tags y atributos deben ir en minúsculas para encajar en la sensibilidad a maúsculas/minúsculas de XML (excepto por el tag HTML !DOCTYPE).
- Válido:
<a href="https://sites.google.com/site/dwebhtml/tutorials">Tutoriales</a> - Inválido:
<A Href="https://sites.google.com/site/dwebhtml/tutorials">Tutoriales</A>
- Válido:
- Los valores predefinidos de ciertos atributos deben ir en minúsculas debido a la sensibilidad a maúsculas/minúsculas de XML.
- Válido:
<input type="submit" /> - Inválido:
<input type="SUBMIT" />
- Válido:
- Los valores de los atributos debn ser correctamente encerrados entre comillas (simples o dobles). Las comillas no son opcionales en XHTML.
- Válido:
<span id="id1" class='importante'>Texto</span> - Inválido:
<span id=id1 class="importante'>Texto</span>
- Válido:
- Los atributos booleanos no pueden ser abreviados (usando solo el nombre del atributo sin ningún valor). Como valor se debe especificar el nombre del atributo mismo.
- Válido:
<button id="boton1" disabled="disabled">Ejecutar</button> - Inválido:
<button id="boton1" disabled>Ejecutar</button>
- Válido:
- Los elementos anidados deben establecer correctamente su orden jerárquico (el primero en abrirse es el último es cerrarse).
- Válido:
<span class="doble"><strong>Ejecutar</strong></span> - Inválido:
<span class="doble"><strong>Ejecutar</span></strong>
- Válido:
- Los elementos de bloque no pueden ser declarados como contenido de los elementos de línea.
- Válido:
<div class="doble"><span>Ejecutar</span></div> - Inválido:
<span><div class="doble">Ejecutar</div></span>
- Válido:
- Algunos elementos específicos no pueden ser declarados como contenido de otros elementos específicos.
- El elemento "a" no debe contener otros elementos "a".
- El elemento "pre" no debe contener ningún elemeto "img", "object", "big", "small", "sub" ó "sup".
- El elemento "button" no debe contener ningún elemento "input", "select", "textarea", "label", "button", "form", "fieldset", "iframe" ó "isindex".
- El elemento "label" no puede contener a otros elementos "label".
- El elemento "form" no puede contener a otros elementos "form".
- Todos los símbolo "&" (ampersand) debe ser escritos utilizando su nombre de entidad (&), aún en las URLs.
- Válido:
<a href="compraventa.php?id=1&sub=2">Compra & venta</a> - Inválido:
<a href="copraventa.php?id=1&sub=2">Compra & venta</a>
- Válido:
- Las referencias de caracteres son sensibles a mayúsculas/minúsculas.
- Válido:
á - á (for á) - Inválido:
á - &aAcuTe; (for á)
- Válido:
- El atributo "alt" debe siempre estar presente en el tag HTML img.
- Válido:
<img src="ave.jpg" alt="Un ave volando" /> - Inválido:
<img src="ave.jpg" />
- Válido:
- El texto comentado será completamente ignorado por un procesador XML, lo que significa que comentar scripts o código de estilos para "ocultarlos" de los navegadores antigüos será como eliminarlos. Por otra parte, si un script o código presenta el carácter "&" ó "<" éstos serán procesados por el procesador XML (como parte del documento HTML) pudiendo producir resultados indeseables. Para evitar este problema puedes elegir declararlos en un archivo externo o utilizar los bloques CDATA.
- Válido:
<style type="text/css">
<![CDATA[
p { color: blue; }
]]>
</style> - Inválido:
<style type="text/css">
<!--
p { color: blue; }
-->
</style>
- Válido:
- El atributo "name" ha sido formalmente desaprobado para los elementos "a", "applet", "form", "frame", "iframe", "img", y "map", y puede ser excluido en futuras versiones.
Reglas XHTML para DTDs estrictos
Además de aquellas declaradas previamente, los documentos XHTML estrictos (XHTML 1.0 Strict y XHTML 1.1) también deberían obedecer estas reglas.
- El texto no debe estar definido directamente como contenido del elemento HTML body en un documento. En cambio, puede insertarse en un párrafo, bloque div o cualquier otro elemento.
- Válido:
<body><p>Texto</p></body> - Inválido:
<body>Texto</body>
- Válido:
De XHTML 1.0 Strict a XHTML 1.1
Esta lista enumera las diferencias entre XHTML 1.0 Strict y XHTML 1.1.
- El atributo "lang" ha sido completamente reemplazado por el atributo "xml:lang".
- Valid:
<span xml:lang="es">Texto</span> - Invalid:
<span lang="es" xml:lang="es">Texto</span>
- Valid:
- El atributo "name" ha sido completamente reemplazado por el atributo "id" para los elementos "a" y "map".
- Valid:
<a id="marcador1">Marcador</a> - Invalid:
<a name="marcador1">Marcador</a>
- Valid:
- La colección de elementos "ruby" ha sido agregada. Ver más acerca de caracteres ruby.
Como puedes ver, XHTML 1.1 ya no es compatible con versiones anteriores debido a la imposibilidad de utilizar los atributos "name" y "lang". A menos que no precises utilizarlos, tu documento no será completamente compatible con HTML 4 y algunos agentes de usuario.
Compatibilidad
Aún cuando XHTML es compatible con su predecesor, algunas consideraciones deben tenerse en cuenta para hacerlo funcionar correctamente en algunos navegadores antigüos. A continuación se muestra una lista con los problemas de compatibilidad en XHTML 1.0 y sus respectivas soluciones.
- La declaración XML, así como el servir tus documentos como "application/xhtml+xml", puede provocar que algunos agentes de usuario lo identifiquen como desconocido en lugar de como HTML. Esto puede resultar en una representación errónea de tu documento. Para solucionar este problema deberías evitar el uso de la declaración XML y servir tus documentos como "text/html" a través de una declaración en el encabezado.
- Compatible:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - No compatible: <?xml version="1.0" encoding="UTF-8"?>
- Compatible:
- La forma abreviada de cerrar elementos vacíos debe esta separada del último atributo por un espacio. Los navegadores antigüos considerarán la barra como un atributo desconocido y simplemente lo ignorarán.
- Compatible:
<br /> - No compatible:
<br/>
- Compatible:
- La forma no abreviada de cerrar elementos vacíos puede causar que algunos agentes de usuario produzcan resultados inesperados. Usa la forma abreviada en su lugar.
- Compatible:
<br /> - No compatible:
<br></br>
- Compatible:
- Cualquier código de script u hoja de estilo que contenga caracteres como "&" ó "<" ó "]]>" ó "--" será procesado (como código XML) por un procesador XML, el cual también ignorará completamente el texto comentado (por ejemplo, "<!-- comentarios -->"). La mejor solución, dado que la sintaxis de los bloques CDATA puede ser irreconocible en navegadores antigüos, es declarar tanto scripts como código de hojas de estilos en archivos externos. Recuerda que para hacer referencia a estos archivos debes utilizar estas declaraciones en el encabezado de tu documento.
- Compatible:
<script type="text/javascript" src="comun.js"></script><link rel="stylesheet" type="text/css" href="predefinidos.css" /> - No compatible:
<style type="text/css">
<![CDATA[
p { color: blue; }
]]>
</style>
<script type="text/javascript">
<![CDATA[
var a = 1;
]]>
</style>
- Compatible:
- Múltiples espacios en blanco o quiebres de líneas entre los valores de los atributos pueden causar problemas en muchos navegadores. Evita utilizarlos, especialmente porque son innecesarios y hacen al código menos legible.
- El atributo "xml:lang" fue introducido en XHTML y está pensado para reemplazar al atributo "lang". Como algunos navegadores pueden no reconocerlo, utiliza ambos (el atributo "xml:lang" toma precedencia). Nota que en documentos XHTML 1.1 el atributo "lang" es completamente inválido, de modo que estos documentos no pueden 100% compatibles con aquellos agentes de usuario que no reconocen al atributo "xml:lang".
- Compatible:
<a href="es" lang="es" xml:lang="es"> - No compatible:
<a href="es" xml:lang="es">
- Compatible:
- En XML, las URIs que apuntan a marcadores en una página (por ejemplo, xhtml#compatibility) se refieren asu atributo "id" en lugar de referirse al atributo "name" (como en HTML 4). Entonces, para tener total compatibilidad (con HTML y XHTML), deberías especificar ambos atributos con el mismo valos. Nota que en XHTML 1.1 el atributo "name" ha sido eliminado para el elemento HTML a, así que no se podrá lograr una compatibilidad completa en este estándar.
- Compatible:
<a name="las-bases" id="las-bases"> - No compatible:
<a name="las-bases">
- Compatible:
- En XML, los caracteres permitidos para componer atributos "name" e "id" son más que los permitidos en HTML 4. Para construir nombre e ids compatibles, usa únicamente: letras de la A a la Z (mayúsculas y minúsculas), números del 0 al 9, guinones medios "-", guiones bajos "_", dos puntos ":" y puntos ".". El valor debe siempre comenzar con una letra.
- Compatible:
<a name="las- bases" id="las-bases"> - No compatible:
<a name="0-las;bases" id="0-las;bases">
- Compatible:
- El nombre de referencia de caracter ' (el apóstrofe) fue introducido en XML 1.0 y por lo tanto válido, pero para HTML 4 es irreconocible. Para lograr la compatibilidad con versiones anteriores usa la representación ' en su lugar.
- Compatible:
it's ok - No compatible:
it's ok
- Compatible:
Validación de documentos XHTML
siempre que quieras puedes revisar que tu documento XHTML (así como muchos otros documentos) para ver que tu arduo trabajo está 100% correcto. Puede hacer esto en servicio de validación del W3C, donde puedes elegir una validación por URL, por subida de archivo o por ingreso directo. cuando el resultado se muestre, la lista de errores y advertencias (si existen) te dirá qué y dónde corregir.
