El
estándar XHTML 1.0 incluye el 95% del estándar HTML 4.01, ya que
sólo añade pequeñas mejoras y modificaciones menores.
Afortunadamente, no es necesario leer las especificaciones y
recomendaciones oficiales de HTML para aprender a diseñar páginas
con HTML o XHTML. Las normas oficiales están escritas con un
lenguaje bastante formal y algunas secciones son difíciles de
comprender. Por ello, en los próximos capítulos se explica de forma
sencilla y con decenas de ejemplos la especificación oficial de
XHTML.
HTML
y XHTML
El
lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es
más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML
es descendiente directo del lenguaje SGML, mientras que XHTML lo es
del XML (que a su vez, también es descendiente de SGML).
Figura
1.1 Esquema
de la evolución de HTML y XHTML
Las
páginas y documentos creados con XHTML son muy similares a las
páginas y documentos HTML.
Las
discusiones sobre si HTML es mejor que XHTML o viceversa son
recurrentes en el ámbito de la creación de contenidos web, aunque
no existe una conclusión ampliamente aceptada.
Actualmente,
entre HTML 4.01 y XHTML 1.0, la mayoría de diseñadores escogen
XHTML. En un futuro cercano, si los diseñadores deben elegir entre
HTML 5 y XHTML 1.1 o XHTML 2.0, quizás la elección sea diferente.
Sintaxis de las etiquetas XHTML
El
lenguaje HTML original era muy permisivo en su sintaxis, por lo que
era posible escribir sus etiquetas y atributos de muchas formas
diferentes. Las etiquetas por ejemplo podían escribirse en
mayúsculas, en minúsculas e incluso combinando mayúsculas y
minúsculas. El valor de los atributos de las etiquetas se podían
indicar con y sin comillas (").
Además, el orden en el que se abrían y cerraban las
etiquetas
no era importante.
La
flexibilidad de HTML puede parecer un aspecto positivo, pero el
resultado final son páginas con un código HTML desordenado, difícil
de mantener y muy poco profesional. Afortunadamente, XHTML soluciona
estos problemas añadiendo ciertas normas en la forma de escribir las
etiquetas y atributos.
A
continuación se muestran las cinco restricciones básicas que
introduce XHTML respecto a HTML en la sintaxis de sus etiquetas:
1)
Las
etiquetas se tienen que cerrar de acuerdo a como se abren:
Ejemplo
correcto en XHTML:
<p>Este
es un párrafo con <a>un enlace</a></p>
Ejemplo
incorrecto en XHTML (pero correcto en HTML):
<p>Este
es un párrafo con <a>un enlace</p></a>
2)
Los
nombres de las etiquetas y atributos siempre se escriben en
minúsculas:
Ejemplo
correcto en XHTML:
<p>Este
es un párrafo con <a href="http://www.google.com">un
enlace</a></p>
Ejemplo
incorrecto en XHTML (pero correcto en HTML):
<P>Este
es un párrafo con <A HREF="http://www.google.com">un
enlace</A></P>
3)
El
valor de los atributos siempre se encierra con comillas:
Ejemplo
correcto en XHTML:
<p>Este
es un párrafo con <a href="http://www.google.com">un
enlace</a></p>
Ejemplo
incorrecto en XHTML (pero correcto en HTML):
<p>Este
es un párrafo con <a href=http://www.google.com>un
enlace</a></p>
4)
Los
atributos no se pueden comprimir:
Ejemplo
correcto en XHTML:
<dl
compact="compact">...</dl>
Ejemplo
incorrecto en XHTML (pero correcto en HTML):
<dl
compact>...</dl>
Este
tipo de atributos en los que el nombre coincide con su valor no son
muy habituales.
5)
Todas
las etiquetas deben cerrarse siempre:
La
mayoría de etiquetas HTML encierran un contenido de texto entre la
etiqueta de apertura y la etiqueta de cierre. Sin embargo, algunas
etiquetas especiales llamadas "etiquetas
vacías" no
necesitan encerrar ningún texto.
La
etiqueta <br>
por
ejemplo, se utiliza para indicar el comienzo de una nueva línea, tal
y como se verá más adelante. Por sus características, la etiqueta
<br>
nunca
encierra ningún contenido de texto.
Como
el estándar XHTML obliga a cerrar todas las etiquetas abiertas,
siempre que se incluya la etiqueta <br>
se
debería cerrar de forma seguida: <br></br>.
Para que el código resulte más cómodo de escribir, XHTML permite
en estos casos escribir de forma abreviada una etiqueta que se abre y
se cierra de forma consecutiva.
En
lugar de abrir y cerrar de forma consecutiva la etiqueta (<br></br>)
se puede utilizar la sintaxis <br/>
para
indicar que es una etiqueta vacía que se abre y se cierra en ese
mismo punto. En la forma compacta es habitual equivocarse con la
posición del carácter /.
Ejemplo
correcto en XHTML:
<br/>
Ejemplo
incorrecto en XHTML (pero correcto en HTML):
<br>
Además
de estas cinco restricciones básicas, XHTML incluye otros cambios
más avanzados respecto a HTML:
1.
Antes de acceder al valor de un atributo, se eliminan todos los
espacios en blanco que se encuentran antes y después del valor.
Además, se eliminan todos los espacios en blanco sobrantes dentro
del valor de un atributo. En otras palabras, si en el interior de un
atributo se incluyen varios espacios en blanco seguidos, se eliminan
todos salvo un único espacio en blanco utilizado para separar las
diferentes palabras.
2.
Como se explicará más adelante al hablar de la etiqueta <script>,
el código JavaScript debe encerrarse entre unas etiquetas especiales
(<![CDATA[
y
]]>)
para evitar que el navegador interprete de forma errónea caracteres
como &
y
<.
3.
Las páginas XHTML deben prescindir del atributo name
para
identificar de forma única a los elementos. En su lugar, siempre
debe utilizarse el atributo id.
De hecho, en la versión 1.0 del estándar XHTML, el atributo name
se
ha declarado obsoleto para las etiquetas a,
applet,
form,
frame,
iframe,
img
y
map.
Ejemplo:
Aunque
la etiqueta <script>
permite
enlazar código de varios lenguajes de programación, el uso habitual
de <script>
consiste
en enlazar un archivo JavaScript externo:
<head>
<script
type="text/javascript" src="http://www.ejemplo.com/js/
inicializar.js"></script>
</head>
El
atributo type
utilizado
habitualmente para los archivos JavaScript es "text/javascript".
El atributo src
es
equivalente al atributo href
de
los enlaces creados con la etiqueta <a>.
La URL indicada en el atributo src
puede
ser absoluta o relativa y externa o interna.
Además
de enlazar un archivo JavaScript externo, la misma etiqueta <script>
también
permite incluir en la página web un bloque de código JavaScript:
<html>
<head>
<script
type="text/javascript">
//<![CDATA[
window.onload
= function() { alert("La página se ha cargado completamente");
}
//]]>
</script>
</head>
<body>
...
</body>
</html>
Cuando
se incluye código JavaScript en la propia página XHTML, se debe
insertar dentro de una sección especial llamada CDATA.
Para ello, el código JavaScript se debe encerrar entre <![CDATA[
y
]]>.
Cuando
el navegador encuentra una sección de este tipo, no procesa su
contenido como si fuera XHTML y por tanto no tiene en cuenta los
posibles errores de validación de XHTML.
De
esta forma, se pueden construir páginas XHTML válidas y código
JavaScript correcto. En los capítulos posteriores se profundiza en
el concepto de validación de páginas XHTML. Los caracteres //
al
comienzo y al final de la sección CDATA
son
necesarios para los navegadores que no son capaces de procesar
correctamente estas secciones.
La
etiqueta <script>
(tanto
cuando enlaza, como cuando incluye directamente el código) puede
aparecer en cualquier parte del documento HTML, aunque normalmente se
incluye dentro de la cabecera de la página (<head>...</head>).
Reglas
para DTDs estrictos
El
texto no debe ser insertado directamente en el cuerpo (dentro de la
etiqueta body).
o
Incorrecto:
<body>Texto plano</body>
o
Correcto:
<body><span>Texto plano</span></body>
No
se deben insertar elementos de bloque dentro de elementos de línea.
o
Incorrecto:
<em><h2>Título</h2></em>
o
Correcto:
<h2><em>Título</em></h2>
DOCTYPE
El
estándar XHTML deriva de XML, por lo que comparte con el muchas de
sus normas y sintaxis. Uno de los conceptos fundamentales de XML es
la utilización del DTD o Document
Type Definition ("Definición
del Tipo de Documento").
Un
DTD es un documento que recoge el conjunto de normas y restricciones
que deben cumplir los documentos de un determinado tipo. Si por
ejemplo se define un DTD para los documentos relacionados con libros,
se puede fijar como norma que cada libro tenga un título y sólo
uno, que tenga uno o más autores, que la información sobre el
número de páginas pueda ser opcional, etc.
El
conjunto de normas, obligaciones y restricciones que se deben seguir
al crear un documento de un determinado tipo, se recogen en su
correspondiente DTD. El estándar XHTML define el DTD que deben
seguir las páginas y documentos XHTML. En este documento se definen
las etiquetas que se pueden utilizar, los atributos de cada etiqueta
y el tipo de valores que puede tener cada atributo.
En
realidad, la versión 1.0 del estándar de XHTML define tres DTD
diferentes. Para indicar el DTD utilizado al crear una determinada
página, se emplea una etiqueta especial llamada doctype.
La etiqueta doctype
es
el único elemento que se incluye fuera de la etiqueta <html>
de
la página. De hecho, la declaración del doctype
es
lo primero que se debe incluir en una página web, antes incluso que
la etiqueta
<html>.
Para
que una página XHTML
sea correcta y válida es imprescindible que incluya el
correspondiente doctype
que
indica el DTD utilizado. A continuación se muestran los tres DTD que
se pueden utilizar al crear páginas XHTML:
XHTML
1.0 Estricto
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Se
trata de la variante con las normas más estrictas y las
restricciones más severas. Las páginas web que incluyan este
doctype,
no pueden utilizar atributos relacionados con el aspecto de los
contenidos, por lo que requiere una separación total de código HTML
y estilos CSS.
XHTML
1.0 Transitorio
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Se
trata de una variante menos estricta que la anterior, ya que permite
el uso de algunos atributos HTML
relacionados con el aspecto de los elementos.
XHTML
1.0 Frameset
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Esta
última variante la utilizan las páginas que están formadas por
frames,
una práctica completamente desaconsejada y que hoy en día sólo
utilizan los sitios web obsoletos.
Si
no tienes claro el DTD que más te conviene, deberías utilizar el
XHTML 1.0 transitorio, ya que es más fácil crear páginas web
válidas. Si tienes conocimientos avanzados de XHTML, puedes
utilizar XHTML 1.0 estricto.
Por
otra parte, además del DOCTYPE
apropiado,
también es necesario que las páginas web indiquen el namespace
asociado.
Un namespace
en
un documento XML permite diferenciar las etiquetas y atributos que
pertenecen a cada lenguaje.
Si
en un mismo documento se mezclan etiquetas de dos o más lenguajes
derivados de XML
(XHTML
y SVG
por
ejemplo) y que tienen el mismo nombre, no se podría determinar a qué
lenguaje pertenece cada etiqueta y por tanto, no se podría
interpretar esa etiqueta o ese atributo. Los namespaces
se
indican mediante una URL.
El
namespace
que
utilizan todas las páginas XHTML
(independientemente de la versión y del DOCTYPE)
es http://www.w3.org/1999/xhtml
y
se indica de la siguiente manera:
<html
xmlns="http://www.w3.org/1999/xhtml">
...
</html>
De
esta forma, es habitual que las páginas XHTML comiencen con
el siguiente código:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" lang="es"
xml:lang="es">
Aunque
el código anterior es mucho más complicado que una simple etiqueta
<html>,
es imprescindible para que las páginas XHTML
creadas sean correctas y superen satisfactoriamente el proceso de
validación que se muestra en los capítulos siguientes.
Afortunadamente,
si utilizas un editor avanzado como Dreamweaver para crear las
páginas, todo el código anterior se incluye de forma automática.
Si creas las páginas a mano, sólo tienes que copiar y pegar ese
código en cada nueva página.
Documento
XHTML
La
estructura básica de cualquier página o documento XHTML válido
incluye al menos las siguientes etiquetas:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" lang="es"
xml:lang="es">
<head>
<title>...</title>
...
</head>
<body>
...
</body>
</html>
El
DOCTYPE
también
puede ser:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Cabecera
XHTML
Las
cabeceras HTML pueden llegar a ser muy grandes, ya que incluyen toda
la metainformación de la página y los enlaces a todos los recursos
externos (hojas de estilos CSS, archivos JavaScript y archivos
RSS).
<head>
<title>Título
de la página</title>
<meta
http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta
name="description" content="..." />
...
<meta
name="author" content="..." />
<style
type="text/css" media="screen,projection">
@import
'/css/archivo.css';
</style>
<link
rel="stylesheet" type="text/css"
href="/css/impresora.css" media="print" />
<link
rel="stylesheet" type="text/css"
href="/css/movil.css" media="handheld" />
<link
rel="shortcut icon" href="/favicon.ico"
type="image/ico" />
<link
rel="alternate" type="application/rss+xml"
title="..." href="/archivo_rss.xml" />
<script
type="text/javascript" src="/js/archivo.js"></script>
<style
type="text/css">
/*
Código CSS */
</style>
<script
type="text/javascript">
//<![CDATA[
// Código JavaScript
//]]>
</script>
</head>