comparte el articulo 

Estructura básica de un documento XHTML

Actualizado el 05/12/2011 < > 0 Comentarios

Resumen: Estudiamos la manera en que comúnmente estructuraremos nuestros documentos XHTML, definiendo para que sirve y que función cumple cada parte.

En el anterior capítulo vimos la sintaxis XHTML, ahora continuamos con la estructura básica de documentos.

En la parte superior del código siempre debemos tener una declaración para definir el tipo de documento que estamos por desplegar. Esta es una regla implementada por XHTML por lo que antes no se solía utilizar y se debe de tener en consideración si queremos tener una estructura apegada al estándar.

Después de definir el tipo de documento empieza la codificación del contenido, en primer lugar utilizamos el elemento “html” para indicar el inicio de nuestra página web, después dentro de este elemento habrá otros dos que llevarán por nombre “head” y “body”, de los cuales el primero de ellos se encargará de definir y dar información general sobre el contenido del documento XHTML, mientras que el segundo se utilizará para depositar todo el contenido que será visible por el usuario al momento de acceder al sitio.

Para poder tener una página con XHTML válido debemos de cumplir con una serie de elementos estructurales básicos, los cuales deben encajar en un esquema que luce más o menos de esta manera:

< !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" xml:lang="en" >
    < head >
        < title >Título de la Página< /title >
    < /head >
    < body >
        <!-- Contenido -->
    < /body >
< /html >

Declaraciones

Antes de profundizar en la codificación de un sitio hay un paso preliminar que siempre debemos tener en cuenta, la declaración de un tipo de documento. Como ya mencionamos, la necesidad de elegir un “doctype” es algo de implementación relativamente reciente, y ese adjetivo que le damos es tan relativo que esta a punto de ya no ser considerado como tal, puesto que ya han pasado varios años desde que los “doctype” llegaron al mundo del diseño web, sin embargo muchos seguimos encasillándolos como algo nuevo por el hecho de que pocos diseñadores les dan relevancia, incluso existen algunos que ni siquiera los conoce, lo que hace que en muchas ocasiones su uso se omita o se demerite su importancia.

Una declaración de tipo de documento permite que el navegador sepa qué versión de XHTML que esté utilizando, así como el idioma principal que también debe ser declarado, además de incluir el tipo de archivo y el conjunto de caracteres del documento. Esto puede sonar un poco complicado, pero todo se puede realizar con unas cuantas líneas de código en la parte superior de la página.

Si no especificamos un tipo de documento, el código HTML simplemente no será válido y el navegador se encargará de mostrar el contenido de la manera que le plazca, puesto que asumirá que no tienes idea de como quieres que se muestre tu información y utilizará tu código arbitrariamente.

En XHTML existen tres tipos de declaraciones para un documento, de las cuales sólo podemos elegir una para nuestro código y se debe hacer en base a la clasificación que le damos a nuestro contenido. De estas tres, la mejor declaración que podemos utilizar actualmente es el tipo estricto (strict), ya que se apega más a lo que buscamos con XHTML, una completa estandarización.

Los otros dos tipos son transicional (transitional) y marcos (frameset), los cuales se deben usar en menor medida y sólo cuando sean completamente necesarios, y si es posible trata de evitarlos completamente. El tipo transicional sólo te malacostumbrará a tener código HTML que no se apega al estándar, ya que como su nombre lo dice se utiliza para la transición entre una versión antigua de HTML hacia XHTML, mientras que el tipo marcos únicamente sirve si vamos a manejar elementos de tipo “frame” los cuales están declarados como completamente obsoletos.

Como ya dijimos esta declaración siempre debe de ir al inicio del documento, la razón por la que se debe posicionar ahí no esta relacionada a la estética ni mucho menos a un capricho, simplemente si no lo hacemos así la declaración no funcionará.

La manera en que nuestra declaración lucirá en código es la siguiente:

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

Como se puede ver especificamos que la versión de XHTML que estamos usando es la 1.0, si bien existen otras versiones posteriores en este manual nos apegaremos a la versión “1.0″ por su estabilidad en navegadores.

Tenga en cuenta que la declaración DOCTYPE no sigue ninguna de las reglas de sintaxis que acabamos de aprender a escribir en el artículo anterior, es por ello que es mejor no pensar en esta declaración como parte del código HTML, si no más bien estudiarla como un apéndice del código.

Idioma del contenido

Además de definir el tipo de contenido que expondremos en el documento, también es necesario especificar el idioma principal en el que escribiremos. Para ello podemos optar por una cabecera HTTP (HyperText Transfer Protocol) o por el atributo “xml:lang” que se expone dentro de la etiqueta de apertura “html”.

Aunque este paso no es estrictamente necesario para que la página funcione, es una consideración para mejorar la accesibilidad del sitio, así de esta manera el usuario podrá tener una mejor experiencia y no encontrarse con problemas de codificación.

El uso del atributo “xml:lang” resulta mucho más sencillo y semántico, por lo que lo recomendamos como la mejor opción a elegir. Su valor estará representado por la abreviación del idioma que escogimos, si por ejemplo el idioma principal de nuestra página será el Español, entonces el valor que recibirá el atributo será “es”, mientras que si es el inglés utilizaremos “en”.

La declaración completa de un documento cuyo contenido estará principalmente redactado en inglés, luciría de la siguiente manera:

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

Una vez definido un idioma principal, se puede presentar el caso de necesitar presentar contenido en algún otro idioma, para esta situación se puede utilizar el mismo atributo con las etiquetas de tipo “span”, así podremos mostrar los caracteres de la cadena de manera adecuada.

Html, head y body

Después de terminar nuestro bloque de declaraciones, podemos empezar a desarrollar el código que estructurará nuestro contenido. Justo después de las líneas que establecen el tipo de documento, encontramos a la etiqueta html, considerado el elemento raíz, este nos servirá para especificar que el documento que estamos a punto de codificar es HTML.

El primer elemento contenido dentro de la etiqueta “html” es la llamada cabecera, identificada por la etiqueta “head” y que se encarga de contener información relativa al documento, tal es el caso de la etiqueta “title” que se coloca dentro de la cabecera para mostrar el título de la página que se mostrará en la barra superior de la ventana del navegador.

Otras etiquetas que pueden ser utilizadas dentro del elemento “head”, son “link” que define un enlace a un recurso externo, como un archivo o un icono de acceso directo, “meta” que proporciona información y meta-data sobre la página HTML, “base” que define la ubicación de la base de los enlaces de una página, “style” que se utiliza para definir la ubicación específica del CSS y “script” utilizado para definir la ubicación de archivos con secuencias comandos JavaScript.

Después de tener bien definida la estructura de “head”, pasamos a declarar al elemento “body” el cual tendrá como función mostrar todo el contenido que es visible por el usuario, por ello dentro de él se puede la mayoría de las etiquetas con las que cuenta XHTML y generalmente se encuentra estructurado mediante el uso de etiquetas “div” y “span”.

Publicado el 02/12/2011, última actualización 05/12/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras