XHTML INTRODUCCIÓN XHTML (eXtensible Hyper Text Markup Language) es una extensión del HTML, cuyo objetivo es adaptarse al proyecto W3C (World Wide Web Consortium).

W3C http://www.W3C.org

Se trata por tanto de hacer documentos Web donde la información y la forma de presentarla quedan claramente separadas, de modo que XHTML transmite la información que contiene un documento, dejando el aspecto a las Hojas de Estilo (CSS) y la interactividad o funcionalidad a JavaScript. Consiste en una sintaxis mucho más rígida que la de HTML de modo que todas las etiquetas o tag (entre paréntesis angulares) van siempre en minúscula, siempre hay una de apertura <etiqueta> y otra de cierre , aunque existen algunas con una sola etiqueta diferente <etiqueta />. Hay que tener en cuenta que muchas de las etiquetas se complementan con atributos.

REGLAS DEL XHTML 1. Un documento no puede tener etiquetas abiertas, deben ir acompañadas de su correspondiente etiqueta de cierre. 2. Las etiquetas que definen un único elemento deben cerrarse a sí mismas añadiendo al final de la misma un espacio y una barra /. Por ejemplo

---

. 3. Las diferentes etiquetas deben estar debidamente anidados, de forma que se cierre cada etiqueta en orden inverso al de apertura.

Estamos dentro de una celda

4. Todas las etiquetas y los atributos que las acompañan deben escribirse siempre en minúscula. 5. Los valores de los diferentes atributos de una etiqueta deben aparecer siempre entre comillas.

EL DOCUMENTO. La Declaración del Tipo del Documento (DTD) es obligatoria en XHTML. Y tenemos tres opciones de DTD: - Strict - Transitional - Frameset o Estricto (Strict). Se busca una estructura limpia y clara, dejando el aspecto y maquetación a las CSS (Hojas de Estilo). No se pueden usar etiquetas como o .

o Transicional (Transitional). Cuando lo que buscamos es describer la presentación de los documentos por medio de etiquetas. Es recomentdable cuando no hay posibilidad de utilizar CSS. Contiene todas las características del tipo Strict, pero añade características orientadas a la presentación.

o Marcos (Frameset). Se trata de una variante de la transicional, que permite la estructuración en marcos del documento.

La codificación por defecto de un documento es UNICODE UTF-8. Para evitar problemas con algunos caracteres en castellano, en la definición de sitios estrictos se recomienda usar la codificación ISO-8859-1.

Si el DTD no es estricto es recomendable incluir la siguiente meta: <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” />

En la etiqueta HTML es necesario indicar el lenguaje en el que está escrito el documento, por ejemplo:

Hay navegadores que no admiten estos atributos para el lenguaje, aunque no hay ningún problema al usarlos.

LA CABECERA DE LA PÁGINA. Se define entre las etiquetas y y va a contener información sobre el documento, toda ella opcional aunque al menos la primera no debería obviarse: - Título. - Vínculos a hojas de estilo o script. - Instrucciones meta con información sobre el documento. El título va entre las etiquetas . Se muestra en la página y también se utiliza para referirla cuando es localizada por cualquiera de los buscadores de Internet. Las etiquetas META aportan información sobre el sitio y sobre el autor de la página, orientada principalmente a los directorios y motores de búsqueda en la Red, así como algunas instrucciones de configuración del sitio. Carecen de etiqueta de cierre por lo que su formato es, <meta … /> . Algunos ejemplos del uso de meta los vemos a continuación: Definir el autor del documento

<meta name="author" content="Juan Pérez" />

Definir el programa con el que se ha creado el documento <meta name="generator" content="WordPress 2.4.4" />

Definir la codificación de caracteres del documento <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Definir el copyright del documento <meta name="copyright" content="misitio" />

Definir el comportamiento de los buscadores <meta name="robots" content="index, follow" />

Definir las palabras clave que definen el contenido del documento <meta name="keywords" content="diseño, css, hojas de estilos, web, html" />

Definir una breve descripción del sitio <meta name="description" content="Artículos sobre diseño web, usabilidad y accesibilidad" />

Finalmente otras etiquetas utilizadas en la cabecera de la página Web son: <script … />

La etiqueta permite enlazar con un archivo externo, como por ejemplo una hoja de estilo o también objetos:

La etiqueta <script … /> se utiliza para insertar código de otro lenguaje, normalmente se hace en forma de archivo externo: <script src="#" type="text/javascript">

EL CUERPO DE LA PÁGINA. Se define entre las etiquetas y y su contenido será el documento que muestre el navegador en pantalla. Su contenido puede ser texto, imágenes, enlaces, tablas, listas, etc. - Título. - Vínculos a hojas de estilo o script. - Instrucciones meta con información sobre el documento. UN PRIMER DOCUMENTO XHTML. Para navegar por la Red (Internet) es preciso utilizar unos programas llamados navegadores o browser, como Mozilla Firefox o Microsoft Explorer entre otros. Estos programas interpretan las etiquetas HTML (por extensión también las XHTML) de las páginas visitadas y muestran adecuadamente su contenido. Por tanto, podemos decir que los documentos HTML están hechos para ser visualizados en pantalla mediante los navegadores. Eso es para visualizarlos, pero a la hora de crearlos es preciso utilizar un editor, que puede ser un editor de texto plano (como el bloc de notas de Windows) o un editor Web (como HTML Kit), aunque también existen programas que permiten guardar cualquier documento como una página HTML (por ejemplo Microsoft Word, FrontPage, Dreamweaver, Componer, etc.), estos últimos suelen presentar un entorno de diseño bastante elaborado. En cualquier caso está claro que usaremos un programa para crear las páginas Web y otro para visualizarlas. Además hay que tener presente que cada objeto (imagen, animación, gráfico, sonido, etc. ) que queramos incluir en una página Web, debemos aportarlo como un archivo al que se hace referencia desde la página, por lo que lo habitual es crear una carpeta (o varias) cuyo contenido sean precisamente esos objetos que vamos a incluir en la página. Para crear nuestro primer documento XHTML, vamos a utilizar el siguiente ejemplo:

Título principal de la página

Primer documento XHTML. Hola mundo

Basta con seleccionar el código anterior y copiar, para a continuación abrir el editor en cuestión (por ejemplo Bloc de Notas de Windows) y pegarlo. Hay que tener en cuenta que el sangrado de líneas se pierde al copiarlo y que sólo lo utilizamos para facilitar la lectura a quienes lo usen, pero al navegador le da igual que vaya todo en una misma línea o sin ningún tipo de sangrado. De modo que si quieres hacer más legible el código de tus páginas tendrás que especificar los márgenes izquierdos de las líneas de forma manual. Una vez copiado el código es necesario guardarlo en un archivo con extensión HTML, y para ello debemos indicar dónde vamos a guardarlo, es decir, la carpeta de destino. Es preciso realizar esta acción con el máximo cuidado para posteriormente poder localizar el documento y poder

visualizarlo con el navegador. Si no sabemos dónde se ha guardado o con qué nombre se ha guardado, será compleja su localización. Por ello te recomiendo que eches un vistazo a la siguiente imagen y pongas atención a la hora de guardar el documento.

Una vez guardado, vamos a proceder a visualizarlo. Para ello basta con abrir cualquier carpeta y buscar la carpeta en la que hemos guardado el documento (en la imagen de ejemplo la carpeta es “Ejercicios HTML”). Una vez situados en esa carpeta sólo es preciso hacer doble clic sobre el archivo a visualizar (en nuestro ejemplo sería “primera.html”) y automáticamente se abrirá el navegador con la página que acabamos de crear. El resultado puedes verlo en la siguiente imagen.

Pero, ¿qué estamos viendo? Introduzcamos algunos comentarios en la imagen para aclarar un poco el resultado obtenido como una página Web.

Realmente no se parece en nada al código que hemos utilizado para su creación, pero este es su resultado en un navegador de Internet. Este será el proceso que debes seguir cada vez que vayas a crear una página Web o documento HTML: 1. Escribir el código en un editor texto. 2. Guardar el documento en un archivo con extensión “.html” en una carpeta conocida.

3. Visualizar en el navegador ese documento haciendo doble clic sobre el archivo. LA PLANTILLA DE DOCUMENTO. Lo ideal en estos casos es crear una plantilla para todos los documentos de modo que evitemos cometer errores al teclear y ganemos en rapidez de creación, sólo habrá que tener mucho cuidado a la hora de guardar para no perder la plantilla.

Título que va a encabezar la página.

Texto de la página organizado en párrafos.

Este será la estructura básica de cualquiera de los documentos HTML que hagamos, aunque evidentemente debe ser completada con nuevas etiquetas y el contenido que queremos mostrar en la página. A continuación veamos las diferentes opciones que tenemos para presentar el contenido de una página, que estará compuesto por texto, imágenes, enlaces, sonidos y cualquier otro objeto que se incluya. TIPOS DE TEXTO En una página Web o documento HTML el texto debe ser escaso, el exceso de texto aumenta el tamaño de las páginas y dificulta la comunicación y atractivo que se busca. Además es necesario distribuirlo en párrafos, listas o tablas, destacar partes de texto e incluso definir diferentes títulos. Las principales etiquetas XHTML relacionadas con el formato del texto, son las siguientes: Etiquetas de línea: mantienen el formato de la línea tras su uso. … Resalta el contenido en negrita. … Añade el atributo subrayado el contenido. … Añade el atributo cursiva al contenido. <strong> … Contenido al que se le quiere dar más fuerza. <em> … Agrega énfasis al contenido.

…

El texto se representa como una dirección … Destaca el texto como código <sup> … Superíndice <sub> … Subíndice Etiquetas de bloque: cuando se utilizan cambia de línea.

…

Definición de párrafo … Cita de textos … Texto entre comillas <pre> … Texto preformateado … Títulos, x varía de 1 a 6

LISTAS NUMERADAS Y CON VIÑETAS Una técnica muy utilizada en páginas Web es la utilización de listas de elementos enumerados, ya que de este modo se aclara la forma de mostrar la información y facilita la visualización de la página al mostrarla más estructurada. Hay varias formas de representar las listas en XHTML, pueden ser numeradas (ordenadas), de viñetas (desordenadas) o de definiciones.

Listas numeradas

1. …
   
   
   
   
   
   1. 2. 3. 4.
   
   
2. Manzana
3. Plátano
4. Naranja
5. Melón


Manzana Plátano Naranja Melón

Listas de viñetas
• …
  
  
  
  
  
  o o o o
  
  Listas de definiciones

  …
  
  

  Tomate

  Lechuga

  Aguacate

  Zanahoria

  
  
  Tomate Lechuga Aguacate Zanahoria
  
  

  Zumo

  Fruta exprimida

  Ensalada

  Verdura troceada

  
  
  Zumo
  
  Fruta exprimida Ensalada Verdura troceada
  
  Como podemos observar en los ejemplos del cuadro, la forma de representar la información es muy clara cuando se utilizan listas, especialmente en las definiciones no es preciso especificar cuál es el término y cuál la definición. Podemos utilizar el atributo type para cambiar el sistema de numeración de las listas ordenadas (los valores soportados por type son: A, a, I y 1, que es el que toma por defecto) y las viñetas en las listas desordenadas (los valores soportados son: cicle, disc y square). Sin embargo el cambio de estas propiedades son parte del diseño por lo que no sería correcto su uso en un documento strict. Más adelante veremos que con el uso de hojas de estilo CSS, podremos usar aún más tipos, y manteniendo la correcta separación del contenido y el diseño del documento.

  
  type="a">...

  type="A">...

type="I">... type="1">...

...

...

...

Una técnica muy interesante es el anidamiento de listas, en la que una lista puede ser un item de otra lista de cualquier otro tipo.

1. Agua mineral.
2. Café, té e infusiones
3. Refresco con o sin gas
4. Zumo de frutas.
5. Combinados:

   Sangría

   Vino, canela y frutas.

   Gazpacho

   Hortalizas trituradas.

   Batido

   
   
   1. 2. 3. 4. 5.
   
   Agua mineral. Café, té e infusiones Refresco con o sin gas Zumo de frutas. Combinados: Sangría Vino, canela y frutas. Gazpacho
   
   

   Leche, frutas y helados.

6. Aperitivos:
   • Cerveza.
   • Martini.
   • Tinto de verano.
   • Vinos:
     1. Ribera Duero.
     2. Rioja.
     3. Jerez.
     4. Cava
     5. Chacolí.
     6. Sidra.
     7. Lambrusco.
     8. Riveiro.

Hortalizas trituradas. Batido Leche, frutas helados. 6. Aperitivos: o Cerveza. o Martini. o Tinto de verano. o Vinos: 1. Ribera Duero. 2. Rioja. 3. Jerez. 4. Cava 5. Chacolí. 6. Sidra. 7. Lambrusco. 8. Riveiro.

Con la técnica de anidamiento podemos estructurar las páginas de modo que el usuario reciba información de la página antes incluso de leerla. TABLAS Otra forma de estructurar la información en las páginas es mediante el uso de tablas. Las tablas son una interesante herramienta para el marcado de información tabular, otros usos y abusos (como maquetación y diseño) se desaconsejan encarecidamente. De nuevo: mantener por separado, el diseño del contenido. Podemos representar tablas con o sin borde, con una fila, o una columna, o con varias de cada una de ellas. Incluso podemos crear tablas dentro del contenido de una celda de otra tabla, con lo que conseguimos representar tablas multidimensionales, que en determinadas situaciones puede ser especialmente útil. Tabla de una sola fila y varias columnas, con y sin borde:

Lunes.

Martes.

Miércoles.

Jueves.

Viernes.

Lunes.

Martes.

Miércoles.

Jueves.

Viernes.

Tabla de una sola columna y varias filas, con y sin borde:

Primer Trimestre.

Segundo Trimestre.

Tercer Trimestre.

Primer Trimestre. Segundo Trimestre. Tercer Trimestre.

Estos ejemplos son de una sola dimensión (una fila o una columna), pero evidentemente podemos construir tablas de dos dimensiones, por ejemplo el siguiente ejemplo muestra cuatro filas con seis columnas cada una de ellas, con borde sencillo:









Trimestres / Dias Lunes. Martes. Miércoles. Jueves. Viernes. Primer Trimestre. 1. 2. 3. 4. 5. Segundo Trimestre. 6. 7. 8. 9. 10. Tercer Trimestre. 11. 12. 13. 14. 15.

También es posible incluir tablas como contenido de una celda, de ese modo ganamos profundidad y simulamos múltiples dimensiones. En el siguiente ejemplo incluimos una tabla como contenido de las casillas 1, 10 y 12.

Trimestres / Dias	Lunes.	Martes.	Miércoles.	Jueves.	Viernes.
Primer Trimestre.	1. mañana. tarde. noche.	2.	3.	4.	5.
Segundo Trimestre.	6.	7.	8.	9.	10. mañana. tarde. noche.
Tercer Trimestre.	11.	12. F1 F1 F1 F2 F2 F2 F3 F3 F3	13.	14.	15.

C1. C2. C3. C1. C2. C3. C1. C2. C3.

IMÁGENES Además de texto, podemos incorporar al contenido de nuestros documentos XHTML archivos de imágenes que pueden contener fotografías, dibujos, diagramas, etc. Hay una seria discusión acerca de que formato de imágenes es conveniente utilizar para el empleo en la Web, que incluye temas variados y complejos cómo: algoritmos de compresión de imágenes, patentes, calidad, y compatibilidad. Existen tres formatos principales de imagen para su utilización en la Web (GIF, JPG y PNG), para conocer algo más de cada uno de ellos te recomiendo que consultes los siguientes artículos de la Wikipedia: • PNG. (Portable Network Graphics) formato gráfico basado en un algoritmo de compresión sin pérdida para mapas de bits no sujeto a patentes. • JPEG. (Joint Photographic Experts Group) es un algoritmo diseñado para comprimir imágenes con 24 bits de profundidad o en escala de grises.

•

GIF. (Compuserve GIF o Graphics Interchange Format) es un formato gráfico utilizado ampliamente en la World Wide Web, tanto para imágenes como para animaciones.

El elemento para insertar imágenes es img. Su principal atributo es src (source). Este atributo lleva como valor la dirección (relativa o absoluta) de la ubicación de la imagen. Ejemplo de uso de img:



El atributo alt, este debe explicar en palabras el contenido de la fotografía. Los navegadores basados en texto mostrarán el valor del atributo en vez de la imagen, otros para no videntes podrían leer y reproducir con un sintetizador el valor del atributo. Es muy recomendable su uso, ya que además si la imagen por cualquier motivo no puede ser mostrada, se presentará el valor de alt en su lugar. Un comportamiento similar presenta el atributo title, que muestra una pequeña etiqueta con el texto especificado, cuando el puntero se detiene sobre la imagen.
src="colores.png" alt="Colores para mezclar." title="Amarillo, Azul y Rojo" />

También es posible ajustar el tamaño de la imagen al contenido de la página cambiando los atributos de ancho (width) y alto (height).
src="colores.png" alt="Colores para mezclar." title="Amarillo, Azul y Rojo" width="100" height="100" />

Si se ausenta alguno de estos dos atributos, el otro se ajusta automáticamente, manteniendo el aspecto proporcionado de la imágen.
src="colores.png" alt="Colores para mezclar." title="Amarillo, Azul y Rojo" width="100" />

También podemos deformar una imagen forzando los valores de estos atributos.
src="colores.png" alt="Colores para mezclar." title="Amarillo, Azul y Rojo" width="300" height="100" />

El elemento img también soporta los atributos align (situación horizontal; izquierda, centrada o derecha) y valign (situación vertical; arriba, media o baja) aunque su uso no es recomendado, y es mejor utilizar la propiedad float de CSS. Sin embargo esta propiedad aún no es soportada por todos los navegadores.
src="colores.png" alt="Colores para mezclar." title="Amarillo, Azul y Rojo"




width="100" align="left" valign=”middle” /> src="colores.png" alt="Colores para mezclar." title="Amarillo, Azul y Rojo" width="100" align="right" valign=”top” /> src="colores.png" alt="Colores para mezclar." title="Amarillo, Azul y Rojo" width="100" align="center" valign=”middle” /> src="colores.png" alt="Colores para mezclar." title="Amarillo, Azul y Rojo" width="100" align="left" valign=”bootom” />

Es preferible utilizar el atributo style para acomodar las imágenes en nuestra página, porque presenta mayores posibilidades, entre ellas podemos destacar float para alineación: style=“float:left”

o también style=“float:right”

HIPERENLACES Los enlaces son los que hacen que naveguemos por la Web, es decir que vayamos saltando por diferentes páginas de un mismo sitio, o de sitios externos. La etiqueta utilizada para crear un vínculo es a (ancla o anclaje). No necesariamente un enlace apuntará a una página Web, puede por ejemplo apuntar a una imagen, a cualquier otro tipo de archivo, a un correo electrónico o incluso puede apuntar a hacia otros sectores de la misma página (previamente marcando estos sectores). Veamos un ejemplo sencillo: Ejemplo

En el navegador lo que veremos será: Ejemplo. La dirección http://www.misitio.com es el valor del atributo href, la palabra Ejemplo, encerrada entre y , es lo que suele llamarse el “anchor text” y es el contenido que será visible en el navegador. Para crear un enlace hacia un correo electrónico debemos apuntar en el valor del atributo href hacia una dirección de correo electrónico, pero es importante agregar al principio de la dirección el mailto: que vendría a representar el protocolo (http://, ftp://, etc). Ejemplo: Correo de ejemplo

Como en el caso anterior, veremos en nuestro navegador: Correo de ejemplo. Si prueban el enlace seguramente su navegador disparará el cliente de correo por defecto.

Si quieres saber más sobre que URLs puedes poner en el valor del atributo href puedes leer el artículo de la Wikipedia, Uniform Resource Locator. Muchas veces para enlaces entre páginas del mismo sitio y que tengan el mismo dominio, no hace falta utilizar enlaces absolutos. Por ejemplo si estamos en la página www.ejemplo.com y queremos enlazar con un documento que se encuentra en un subdirectorio a www.ejemplo.com/tema5/Apartado1.html podemos crear un enlace de la siguiente manera: Apartado 5.1

Hay que destacar que en este caso hacer enlaces absolutos (escribiendo la dirección completa) funcionará también. NOTA: Algunos buscadores recomiendan utilizar enlaces absolutos siempre que sea posible, para mejorar la indexación por parte de sus motores. También podemos crear marcas (algunos las llaman anclas) y enlaces para poder navegar en la misma página, sistema muy útil para crear un índice entre documentos largos. La marca se realiza mediante el atributo id o name de la etiqueta a:

Apartado 1. Introducción.

Apartado 1. Introducción.

Algunos navegadores no reconocen el atributo id dentro de los hiperenlaces, por lo que se recomienda el uso de name para esta situación. Hemos establecido un ancla llamada punto1 a la altura del título Apartado1 ahora nos hará falta colocar un enlace desde otro sector de la página que apunte hacia esa ancla. Para esto:

Ir a la Introducción del tema.

Es preciso destacar la presencia de la almohadilla (#), para indicar que se trata de un enlace dentro del mismo documento. La etiqueta a tiene un atributo de importante valor semántico, title. Este atributo sirve para especificar una pequeña descripción del sitio al que estamos enlazando, en forma de pequeña etiqueta amarilla con el valor de este atributo cuando el usuario se detiene con el ratón sobre el enlace.

Ir a la Introducción.



EJERCICIOS: 1º/ Construye una página Web XHTML (TextoEj1TuNombre.html) con el texto de un diálogo, entre dos personajes que forman parte de un chiste. El título principal del chiste irá en

, el texto del narrador irá en texto normal (entre párrafos

), el de un personaje con

y el de otro con , (también dentro de párrafos). Al final debes firmar con tu nombre y apellidos dentro de la etiqueta . 2º/ Construir una página Web con código XHTML (ListaEj2TuNombre.html), con el título LISTAS en

, que construya tres listas, una de cada tipo: - Una ordenada con los diez libros que has leído, por orden de preferencia. El primero será el preferido. - Otra de viñetas con al menos cinco películas que has visto últimamente. - Y una con definiciones de utensilios que podemos encontrar habitualmente en la cocina, explicando cuál es su utilidad. Recuerda firmar con tu nombre y apellidos dentro de la etiqueta . 3º/ Crear un documento XHTML (TablaEj3TuNombre.html), con título GASTOS SEMANALES en

, que utilice una tabla de dos dimensiones para representar los gastos semanales que tienes, especificando imprescindibles y extras para cada día de la semana, puedes seguir el modelo del siguiente ejemplo: LUN MAR MIE JUE VIE SAB DOM Tipo 2 2 2 2 2 0 5 Imprescindibles 0 1 3 0 15 15 5 Extras Al pie del documento firma con tu nombre y apellidos dentro de la etiqueta . 4º/ Busca en Internet cinco imágenes relacionadas con el deporte (cualquier tipo de deporte) y crea una página Web (ImagenEj4TuNombre.html) en la que aparezca cada una de las imágenes dos veces, con diferentes tamaños y sin perder la proporcionalidad. Junto a cada imagen debe aparecer un texto comentando su contenido, utiliza para ello el atributo style en cada una de ellas. No olvides firmar con tu nombre y apellidos dentro de la etiqueta . 5º/ Construye un documento (IndiceEj5TuNombre.html) a modo de índice con enlaces a cada uno de los ejercicios anteriores y cinco enlaces de Internet a páginas relacionadas con vacaciones, pueden ser destinos turísticos, viajes, hoteles, etc. Cada enlace debe ir acompañado de un texto indicando qué podemos encontrar en el mismo o explicando para qué es útil. Firma con tu nombre y apellidos dentro de la etiqueta . 6º/ Crea un documento (TotalEj6TuNombre.html) que contemple todos los elementos utilizados en los ejercicios anteriores. El tema será la historia de España y mostrará una lista con cinco ítems, una tabla de dos dimensiones, dos imágenes, cinco enlaces y texto que explique lo que se pretende en cada uno de los citados elementos, debes utilizar al menos tres estilos diferentes sobre el texto. Firma con tu nombre y apellidos dentro de la etiqueta .

Enlaces sobre el tema en Internet: XHTML Manual XHTML http://manual-xhtml.blogspot.com/ XHTML Básico. Manual del SIDAR http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml-basic.html Guía Breve del XHTML. Del W3C http://www.sidar.org/recur/desdi/traduc/es/xhtml/xhtml-basic.html Guía de referencia XHTML. Del W3C http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/ Introducción a XHTML. LibrosWeb. http://www.librosweb.es/xhtml/ Validador XHTML. Para comprobar si una página cumple con las normas de código XHTML. http://validator.w3.org/