> Manuales > Manual de XHTML

Tenemos que prestar especial atención al documento básico de XHTML, que tiene una serie de reglas importantes y etiquetas a tener en cuenta para que esté correctamente formado.

En el presente artículo del manual de XHTML vamos a explicar cómo realizar la estructura del documento básico XHTML, de modo que las personas puedan comenzar a usar ese lenguaje, por medio de la realización de una serie de pasos básicos en los que iremos incorporando las etiquetas más imprescindibles.

Al final del artículo tendremos un documento inicial, prácticamente vacío, pero que nos servirá como plantilla inicial para comenzar cualquier página realizada con el lenguaje XHTML.

Juego de caracteres

Tenemos que empezar definiendo el formato en el que se guardan los caracteres en el archivo. La codificación estándar utilizada en XHTML es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales, griegos, chinos, árabes, japoneses, coreanos…). Utilizando el juego de caracteres UTF-8 tendremos resueltas la mayoría de nuestras necesidades.

Si deseas utilizar UT8-8 tendrás que asegurarte que tu editor de textos guarda el archivo en formato Unicode (normalmente es una opción a elegir en el cuadro de diálogo de Guardar como). Pero si lo deseas, luego te diremos cómo utilizar otros juegos de caracteres también disponibles.

Para definir qué juego de caracteres se va a utilizar al guardar el archivo hay dos posibilidades: Al trabajar con documentos XML (sabemos que XHTML es un documento en formato XML) hay que escribir esto al inicio, como primera línea de tu archivo:

<?xml version ="1.0" encoding="UTF-8" ?>

Insistimos, la línea anterior tiene que aparecer al principio de todo el documento, pues es así como empiezan todos los documentos XML. Sin embargo, al escribir documentos HTML y XHTML hay otra manera posible de expresar el juego de caracteres,

Nota: En PHP esos caracteres "<?" sirven para comenzar un bloque de código PHP. La línea anterior, que tenía que aparecer al principio de todo el documento, antes que ninguna otra, puede dar problemas de interpretación si usas PHP. Para evitar problemas, es recomendable especificar la codificación del archivo en una etiqueta META.

La segunda posibilidad es omitir esa línea de comienzo del XML al principio y declarar la codificación dentro de la sección HEAD (ahora veremos cómo se hace eso). Si elegimos esto último, la línea a incluir dentro del HEAD sería:

<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />


Escoge la opción que quieras, pero sólo una. Por cierto, por motivos de espacio, la línea aparece cortada. No importa, porque el navegador interpreta los saltos de línea como si fueran espacios en blanco. En realidad podríamos escribir todo el archivo XHTML en una sola línea. O cada palabra en una línea diferente.

Como decíamos, es posible guardar tu archivo con otra codificación de caracteres. XHTML también lo permite y si trabajas en Windows el juego de caracteres por defecto que se utiliza es el Latin-1. Para ello simplemente tienes que especificar en tu etiqueta META que estás utilizando esa codificación, sustituyendo utf-8 por ISO-8859-1 (para Latin-1) o cualquier otro juego de caracteres que estés utilizando. Te quedaría así tu etiqueta:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

El DOCTYPE XHTML

Lo siguiente que toca es indicar el DOCTYPE. Se encarga de decirle al navegador qué contiene el archivo que está abriendo. Nosotros usaremos la especificación XHTML 1.0 Strict, que es esta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nota: El anterior doctype es de tipo XHTML estricto, pero podríamos elegir otros doctypes para XHTML, por ejemplo el transicional. Para más información y códigos de los diferentes doctypes, puedes leer el artículo Doctype de HTML.

Después del DOCTYPE tenemos a la cabecera y al cuerpo encerrado entre las etiquetas <html> y </html> .

El elemento raíz (HTML)

El resto de nuestro documento tiene que ir dentro de la etiqueta <html> . Pero en esa etiqueta debemos indicar una serie de cosas, como que nuestro documento es XHTML y qué lengua estamos usando. Si escribimos en castellano, nos quedaría así:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

Las letras "es" son el código ISO que representan al idioma "español".

La cabecera (HEAD)

La cabecera contiene información que no forma parte del contenido de la página en sí, como el título, vínculos a hojas de estilos CSS, información para robots de búsqueda, scripts, etc. Por ahora nos quedaremos sólo con el título de la página. La cabecera va encerrada entre <head> y </head> , mientras que para el título usamos la etiqueta <title> . El título de la web aparece en la barra de título de la ventana del navegador, es el nombre por defecto que aparece si añadimos a favoritos la página, etc.

Quedaría así:

<head>
<title>Título de la web</title>
</head>

Nota: El sangrado no es obligatorio, pero sí que viene muy bien para aclararnos con el código.

Otra cosa que quizás deberías incluir en la cabecera es la mencionada etiqueta META "Content-Type" para especificar el juego de caracteres. Luego veremos en el documento básico final cómo quedaría el HEAD con esa etiqueta para definir la codificación de caracteres del archivo.

El cuerpo (BODY)

Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body> , y que contiene toda la Información que de mostrará en el navegador. Quedaría así:

<body>
<p>Aquí va el cuerpo de la web</p>
</body>

Nota: Si te fijas, hemos colocado un párrafo dentro del cuerpo, porque en XHTML estricto no se pueden colocar textos directamente dentro del BODY, sin colocarlos dentro de alguna etiqueta. Es decir, una vez abierto el cuerpo, no podemos escribir texto tal cual, sino comenzar con alguna etiqueta XHTML y el texto colocarlo siempre dentro. Puedes utilizar cualquier etiqueta que te interese, como P o DIV, por poner unos ejemplos, pero el caso es colocar tus textos, u otros contenidos, dentro de cualquier tipo de contenedor.

La plantilla de nuestro documento básico XHTML

Recopilando todo lo visto en este artículo para la construcción del documento básico XHTML, nos quedaría algo como esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />

<title>Título de la web</title>

</head>

<body>
<p>Aquí va el contenido</p>
</body>

</html>

Guarda una copia en un archivo, que puedes llamar plantilla.html, para usos posteriores. Cualquier archivo XHTML que hagas podrá comenzar a partir de este documento básico.

Nota sobre el autor: Este artículo fue escrito originalmente por "Serviweb" en 2007. Posteriormente completado y actualizado en 2010 por Miguel Angel Alvarez, de DesarrolloWeb.com.

Serviweb

Diseño web Murcia

Manual