Curso Básico de XHTML. II
ESTRUCTURA DE UN DOCUMENTO XHTML
Se explican a continuación los elementos que componen la estructura de un documento web.
El DOCTYPE y la codificación
Para escribir un código XHTML válido, deberemos indicar al navegador el tipo de documento que va a abrir. La declaración del tipo de documento XHTML es obligatoria (DTD).
Las tres opciones de DTD son: Estricto (Strict), Transicional (Transitional) y Marcos (Frameset).
La declaración XHTML 1.0 Strict se utiliza cuando se quiere obtener una estructura limpia y clara dejando el aspecto y la maquetación a las CSS (Hojas de estilo). No está permitida la utilización de etiquetas tipo bgcolor o center, por ejemplo. Una de sus principales ventajas es conseguir páginas bien estructuradas y fácilmente configurables mediante CSS; sin embargo, existen aún demasiados problemas de incompatibilidad con ciertos navegadores.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional se utiliza cuando se describe la presentación de los documentos por medio de etiquetas. Es el sistema adecuado para cuando se desea facilitar el acceso a usuarios con navegadores sin posibilidades de tratamiento de CSS. Esta opción incluye todas las características de XHTML 1.0 Strict, pero añade características orientadas a la presentación.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset es una variante de la opción Transitional, que permite que el contenido del documento esté estructurado con marcos.
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>
La codificación por defecto de un documento es Unicode UTF-8. Para evitar conflictos con algunos caracteres del castellano, en la definición de sitios estrictos se recomienda usar la codificación ISO-8859-1.
<?xml version="1.0" encoding="iso-8859-1"?>
Si el DTD no es estricto, es recomendable incluir el correspondiente comando meta en vez de la instrucción anterior.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Elementos fundamentales
El resto del documento XHTML está definido por una etiqueta de inicio <html> y una de terminación </html>. Otras dos partes fundamentales de todo documento son la cabecera, comprendida entre las etiquetas <head> y </head>, y el cuerpo, entre <body> y </body>.
A la etiqueta html debemos indicarle el lenguaje en el que está escrito el documento. Así pues, si escribimos en castellano, el código sería el siguiente:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">
Los atributos de xmlns que determinan el lenguaje del documento (xml:lang=»sp» lang=»sp») no son admitidos por algunos navegadores; no obstante, no tiene ningún efecto negativo para aquellos que no lo soportan.
La cabecera
Como hemos comentado anteriormente, la cabecera de un documento viene delimitada por las etiquetas <head> y </head> respectivamente y contiene fundamentalmente información sobre el documento como el título, vínculos a hojas de estilo o scripts, instrucciones meta, etc. Todas ellas son opcionales, aunque el uso de la etiqueta title es obligatorio.
La etiqueta <title> es la encargada de especificar el título del documento. Éste se suele mostrar generalmente en la parte superior del navegador. También es utilizado como identificador en las listas de favoritos, también llamadas bookmarks.
<title>Este es el título de mi primera página web</title>
Otra etiqueta relacionada con la cabecera de un documento es <meta />, usada para incluir cualquier información relevante sobre la página. La especificación oficial de XHTML no define la lista de metadatos que se pueden incluir, por lo que las páginas tienen libertad absoluta para definir los metadatos que consideren oportunos.
Para todas las definiciones, la información se escribe usando pares nombre/valor. Los motores de búsqueda utilizan dicha información en los resultados de sus búsquedas para ofrecer un resumen del contenido de la página web.
Una buena utilización de las etiquetas meta permitirá que el documento tenga un mejor posicionamiento gracias a la información que obtendrán de ellas, los diferentes robots de los buscadores.
Para el primer supuesto se emplean atributos del tipo http-equiv y para el segundo del tipo name. En ambos casos, el valor a especificar se determina en el campo content.
A continuación se muestra un fragmento típico de etiquetas meta y después con detalle algunos de los meta más importantes.
<meta http-equiv="refresh" content="15" url="http://www.miweb.com/" />
<meta name="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Mi web. De todo para todos. La mejor" />
<meta http-equiv="Content-Language" content="ES-ES" />
<meta name="robot" content="index, follow" />
<meta name="author" content="Carlos Orós" />
<meta name="distribution" content="Global" />
<meta name="copyright" content="© Carlos Orós" />
- La etiqueta <meta http-equiv=»refresh» content=»segundos» url=»http://www.miweb.com» /> no se usa normalmente a no ser que queramos redireccionar de forma automática a otra URL transcurridos unos segundos. Es útil para redireccionar a los visitantes a una nueva página. Por ejemplo, cuando se cambia de dominio un portal y queremos que nuestros visitantes lleguen allí de forma automática.
- La etiqueta <meta name=»description» content=»descripción clave» /> es la encargada de facilitar la descripción de la web mediante frases. Deberán ser descriptivas, con sentido y sin abusar de la repetición de palabras.
- La etiqueta <meta name=»keywords» content=»palabras clave»/ > va a permitir relacionar los motores de búsqueda de los diferentes navegadores con la web. Deben ser palabras sueltas, con repetición mínima y separadas por comas.
- La etiqueta <meta name=»language» content=»es» /> indica el idioma en el que está escrita la página web. Muy importante porque los motores de búsqueda seleccionan los resultados en función del idioma que el usuario ha indicado en la petición de búsqueda.
- La etiqueta <meta name=»revisit-after» content=»tiempo» /> indica al motor de búsqueda el período de tiempo tras el cual debe revisar nuestra página. Lo normal es indicar entre 15 o 30 días.
- La etiqueta <meta name=»rating» content=»General» /> hace referencia a la clasificación del contenido de la página web. Si se especifica como general el motor de búsqueda interpreta que el contenido es para todos los públicos. En caso de marcarla como adultos los motores de búsqueda no la ofrecerán en sus resultados cuando haya filtros para menores de edad.
- La etiqueta <meta name=»author» content=»autor» /> indica el nombre de la persona o empresa que ha desarrollado el sitio web.
- La etiqueta <meta name=»owner» content=»Titular» /> se refiere a la persona, empresa o sociedad propietaria del sitio web.
- La etiqueta <meta name=»robot» content=»index, follow» /> indica a los motores de búsqueda si deben ofrecer o no esa página como parte de sus resultados y si deben o no incluir en sus registros los enlaces de dicha página. Si sustituimos index por noindex la página no será indexada por los motores de búsqueda. Al sustituir follow por nofollow el motor de búsqueda no seguirá los enlaces internos.
El cuerpo del documento
Como se comentó anteriormente, el cuerpo de un documento XHTML contiene el texto de la página que se va a presentar al usuario. Las etiquetas de inicio y fin son <body> y </body> respectivamente, y entre ellas, se debe situar todo el código fuente del documento.
Los atributos de presentación de la etiqueta body han sido desaprobados en XHTML Strict siendo válidos únicamente en la definición DTD Transitional. Téngalo en cuenta para evitar errores de validación en sus documentos.
Atributos body
Los atributos de la etiqueta body en su declaración Transitional permiten definir el fondo de la pantalla y los colores básicos del texto.
Los colores se pueden indicar de dos maneras diferentes: en formato hexadecimal o referenciados por su nombre preestablecido.
Si queremos indicar colores en formato hexadecimal, se deberá indicar la proporción de rojo, verde y azul correspondiente para formar el color deseado. Así pues, el valor RGB del color vendrá determinado por RR, GG y BB para los niveles de Rojo, Verde y Azul, con valores entre 0 y FF (de 0 a 255).
Visto esto, el número «#000000» correspondería al color negro, «#FF0000» al rojo, «#00FF00» al verde, «#0000FF» al azul, «#FFFFFF» al blanco y así hasta completar todas las posibilidades.
Sin embargo, es mucho más cómodo indicar el nombre del color en inglés, como black, teal, blue, navy, lime, white, purple, yellow, olive, red, marron, gray, fuchsia, green, silver, aqua, etc.
Visto esto, los atributos válidos para la etiqueta <body> son los siguientes:
- bgcolor =»#rrggbb o nombre del color» para indicar el color del fondo del documento.
- text =»#rrggbb o nombre del color» para especificar el color general del texto.
- link =»#rrggbb o nombre del color» para especificar el color del texto de los enlaces.
- vlink =»#rrggbb o nombre color» para indicar el color del texto de los enlaces ya visitados.
- alink =»#rrggbb o nombre color» para indicar el color en que se pondrá el texto del enlace en el momento de su activación.
- background =»nombre del archivo gráfico» para indicar el gráfico de fondo.
Comentarios
Para incluir comentarios dentro de nuestro código fuente, podemos utilizar la etiqueta <!– comentarios –>. Su utilización es más que recomendable en documentos extensos, ya que permite introducir anotaciones para revisiones posteriores del código. Se deberá evitar poner dos o más guiones adyacentes dentro de un comentario.
<!-- Esto es un comentario -->
<!-- Esto es otro comentario xhtml válido -- >
<!-- comentario html -- no válido -->
Al escribir código XHTML, los comentarios incorrectos darán lugar a que sus documentos no puedan ser mostrados.
Se muestra a continuación un código fuente de ejemplo XHTML Strict, que el lector puede guardar como plantilla para usarlo posteriormente (plantilla_xhtml.html).
Ejemplo 1. Plantilla XHTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo 1. Plantilla XHTML</title>
</head>
<body>
<!-- Contenido del documento -->
</body>
</html>
Extracto de mi libro «Guía XHTML, JavaScript y CSS. Ed. Ra-Ma. © 2011