PDF de programación - XHTML

XHTML

XHTML y CSS

Índice de contenido
XHTML.................................................................................................................................................. 1
Introducción........................................................................................................................................... 2
Ventajas............................................................................................................................................. 2
Inconvenientes................................................................................................................................... 2
Cosas a tener en cuenta para generar código XHTML......................................................................... 3
Etiquetas............................................................................................................................................ 3
Atributos............................................................................................................................................. 4
Declaración del tipo de documento.................................................................................................... 5
Declaración de nombre de espacio XML....................................................................................... 6
Reglas XHTML para DTDs estrictos.................................................................................................. 6
XHTML 1.1............................................................................................................................................ 7
Documentos Estrictamente Conformes............................................................................................. 7
El Tipo de Documento XHTML 1.1.................................................................................................... 8
XHTML 2.0.......................................................................................................................................... 10
Compatibilidad hacía atrás........................................................................................................... 10
Validación XML obligatoria........................................................................................................... 10
Adiós Hx y DIV, hola SECTION y H............................................................................................. 10
Role.............................................................................................................................................. 11
XFrames: Vuelven los marcos..................................................................................................... 11
HREF extendido: Todo puede ser un enlace............................................................................... 11
XML includes................................................................................................................................ 11
OBJECT ...................................................................................................................................... 12
Atributo ALT................................................................................................................................. 12
Cambios en HR y BR................................................................................................................... 12
Apéndice I : Tags y atributos desaprobados en HTML....................................................................... 13

1

XHTML y CSS

Introducción

XML (lenguaje de marcas extensible) es también un metalenguaje (usado para crear otros
lenguajes) y es también un sublenguaje de SGML, diseñado para ser más simple de procesar. En
estos días, XML es ampliamente utilizado en diferentes formas para construir documentos y
organizar información (por ejemplo, RSS (redifusión realmente simple), Atom, etc.) ya que provee
una forma estándar de lograrlo que es más fácil de procesar que SGML.

En el año 2000, XHTML es recomendado por el World Wide Web Consortium (W3C) como la nueva
versión estándar de HTML basada en XML en lugar de SGML. De esta forma, podemos considerar a
XHTML como el resultado de mezclar HTML y XML. Hecho esto, todos los beneficios de XML son
ahora heredados por HTML lo que lo hace más fácil de procesar, y por lo tanto estar disponible en
más plataformas con capacidades de procesamiento reducidas (por ejemplo, PDAs (asistente digital
personal) y teléfonos celulares).

Ventajas

Las principales ventajas del XHTML sobre otros formatos son:

• Compatibilidad parcial con navegadores antiguos: la información se visualiza, aunque sin

formato. Cabe apuntar que el XHTML 1.0 fue diseñado expresamente para ser mostrado en
navegadores que soportan HTML de base.

• Un mismo documento puede adoptar diseños radicalmente distintos en diferentes

dispositivos, pudiendo incluso escogerse entre varios diseños para un mismo medio.

• Facilidad de edición directa del código y de mantenimiento.

• Formato abierto, compatible con los nuevos estándares que actualmente está desarrollando el

W3C como recomendación para futuros agentes de usuario o navegadores.

• Los documentos escritos conforme a XHTML 1.0 pueden potencialmente presentar mejor

rendimiento en las actuales herramientas web que aquellos escritos conforme a HTML..

Inconvenientes

• Algunos navegadores antiguos no son totalmente compatibles con los estándares, lo que

hace que las páginas no siempre se muestren correctamente. Esto cada vez es menos
problemático, al ir cayendo en desuso.

• Muchas herramientas de diseño web aún no producen código XHTML correcto.

2

XHTML y CSS
Cosas a tener en cuenta para generar código
XHTML

Etiquetas

•

•

•

•

Las etiquetas no vacías deben ser cerradas siempre. No hay cierre opcional en XHTML.

o Válido: <p>Párrafo</p>
o

Inválido: <p>Párrafo

Las etiquetas vacías deben ser correctamente cerradas. Para lograr esto puedes usar un
cierre normal o puedes cerrar la etiqueta poniendo un espacio seguido de una barra al final
del tag de apertura.

o Válido: <img src="boton.jpg"></img><img src="boton.jpg" />
o

Inválido: <img src="boton.jpg">

Los nombres de etiquetas y atributos deben ser escritos en minúsculas para adaptarse a la
sensibilidad a mayúsculas/minúsculas de XML (con la excepción del tag HTML !DOCTYPE).

o Válido: <a href="http://www.ua.es/es/index.html">Texto ancla</a>
o

Inválido: <A Href=" http://www.ua.es/es/index.html">Texto ancla</A>

Los elementos anidados deben obedecer correctamente su orden jerárquico. (el que se abre
último, debe cerrarse primero)

o Válido: <span class="doble"><b>Ejecutar</b></span>
Inválido: <span class="doble"><b>Ejecutar</span></b>
o

• Algunos elementos específicos no pueden ser declarados como contenido de otros elementos

específicos.

o El elemento "a" no debe contener otros elementos "a".
o El elemento "pre" no debe contener otros elementos "img", "object", "big", "small", "sub"

o "sup".

o El elemento "button" no debe contener otros elementos "input", "select", "textarea",

"label", "button", "form", "fieldset", "iframe" o "isindex".

o El elemento "label" no debe contener otros elementos "label".
o El elemento "form" no debe contener otros elementos "form".

• Todos los símbolos "&" deben ser escritos usando el nombre de entidad (&amp;), aún en

URLs.

o Válido: <a href="compraventa.php?id=1&amp;sub=2">Compra &amp; venta</a>
o

Inválido: <a href="compraventa.php?id=1&sub=2">Compra & venta</a>

3

XHTML y CSS

•

Las referencias de entidad de caracteres son sensibles a cambios en mayúsculas/minúsculas
de acuerdo a la regla de XML.

o Válido: &#xE1; - &aacute; (para á)
Inválido: &#XE1; - &aAcuTe; (para á)
o

• El texto comentado será completamente ignorado por un procesador XML, lo que significa
que comentar scripts o códigos de estilo para "ocultarlos" de los navegadores antiguos será
igual a borrarlos. Si el script o código de estilo contiene un carácter "&" ó "<", éstos serán
procesados por el procesador XML. Para evitar este inconveniente puedes elegir entre
declararlos en archivos externos o utilizar el bloque CDATA.

o Válido:

<style type="text/css">
<![CDATA[
p { color: blue; }
]]>
</style>
Inválido:
<style type="text/css">
<!--
p { color: blue; }
-->
</style>

o

•

Los atributos desaprobados en HTML 4.01 no forman parte de XHTML (ver Apéndice I).

Inválido: <font color="#0000FF">Blue text</font>

o
o Válido: <span style="color: #0000FF;">Blue text</span>

Atributos

•

•

•

Los valores predefinidos de algunos atributos deben estar en minúsculas debido a la
sensibilidad a mayúsculas/minúsculas de XML.

o Válido: <input type="submit" />
Inválido: <input type="SUBMIT" />
o

Los valores de los atributos deben ser adecuadamente encerrados entre comillas (simples o
dobles). Las comillas no son opcionales en XHTML.

o Válido: <span id="id1" class='importante'>Texto</span>
o

Inválido: <span class=importante>Texto</span>

Los atributos booleanos no pueden ser abreviados (usando solo el nombre del atributo).
Como valor debes especificar el nombre del atributo.

o Válido: <button id=”boton1” disabled=”disabled”>Ejecutar</button>
o

Inválido: <button id=”boton1” disabled>Ejecutar</button>

4

En el siguiente ejemplo mostramos una definición de la etiqueta HTML button, compatible con
código XHTML, con los atributos: "id", "disabled" (booleano) y "tabindex".

<button id="okbutton" disabled="disabled" tabindex="4">Ok</button>

XHTML y CSS

• El atributo "alt" debe estar siempre presente en la etiqueta HTML img.

o Válido: <img src="pajaro.jpg" alt="Un pájaro volando"></img>
o

Inválido: <img src="pajaro.jpg"></img>

• 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.

Declaración del tipo de documento

Al escribir código XHTML hay dos cosas por considerar. La pri