El orden en la estructura de un sitio web es tan importante como el estado de orden en que se encuentre una habitación. Al comienzo, cuando los muebles y objetos que se encuentran en la habitación son escasos, no nos ocasionará mayores dificultades encontrar y emplear cualquiera de los objetos que hay en ella. Sin embargo, en la medida que la cantidad de objetos que se encuentren en la habitación crezca, las dificultades serán cada vez mayores hasta que sea prácticamente imposible acceder o utilizar un objeto.

Lo mismo sucede con las páginas web. Cuando los sitios son pequeños, la falta de una estructura ordenada posiblemente pueda pasar desapercibida o los inconvenientes originados sean menores. Pero a medida que el sitio crece, la aparición de nuevos archivos, contenidos, secciones, formularios, etc., hará haciendo cada vez más compleja la funcionalidad del sitio.

Sin embargo, es posible hacer una planificación de la estructura del sitio web desde los inicios, de forma que el crecimiento del mismo se haga en forma ordenada y sin generar dificultades, tanto a los usuarios como al webmaster.

Marcado semántico de los contenidos

Si observamos un libro, veremos en él una estructura lógica ordenada del contenido del mismo. Esto se consigue mediante la aplicación de algunos elementos que permiten al editor hacer que los contenidos se vean en un determinado orden que facilita el acceso a los mismos por parte de los lectores.

Del mismo modo, las páginas web se encuentran escritas en lenguaje HTML, que tiene una serie de etiquetas que permiten clasificar y ordenar en diferentes niveles y estructuras al contenido. Esto es lo que denominamos el marcado semántico de los contenidos.

La aplicación de etiquetas HTML en los contenidos, mucho más allá de su utilidad desde el punto de vista estético, tiene la finalidad fundamental de permitir ordenar los contenidos. Así por ejemplo, la posibilidad de aplicar elementos como título1, título2, título3, párrafos, listas, etc.:

<h1>Título principal o de primera magnitud</h1>
<h2>Título secundario o de segunda magnitud</h2>
<h3>Título de tercera magnitud</h3>
<p><em>Párrafo</em> o división de texto que termina en un punto y aparte, es decir, diferente de la oración o enunciado que termina en un punto y seguido. Un <strong>Párrafo</strong>, como es este caso, puede estar formado por varias oraciones.</p>
<ul>Lista sin orden
<li>Ningún ítem se encuentra numerado</li>
<li>Se emplea cuando el contenido no tiene por que tener un orden determinado</li>
</ul>
<ol>Lista ordenada
<li>Todos los ítems aparecen numerados</li>
<li>Se usa cuando el contenido debe tener un orden determinado</li>
</ol>

El orden que se impone a través de las diferentes etiquetas HTML corresponde a una jerarquización de los diferentes contenidos. Así por ejemplo, la frase contenida en una etiqueta h1 es la más importante de todo el contenido, ya que define al contenido mismo, por ser su título. El HTML fue pensado desde su origen como una herramienta para jerarquizar los contenidos web. En el ejemplo anterior, vemos un código HTML donde se ha dado una jerarquización a textos de ejemplo. El resultado es el siguiente, en el que se ve como diferentes partes del contenido adquieren diferentes jerarquías gracias al empleo de las etiquetas HTML:

Título principal o de primera magnitud

Título secundario de segunda magnitud

Título de tercera magnitud

Párrafo o división de texto que termina en un punto y aparte, es decir, diferente de la oración o enunciado que termina en un punto y seguido. Un párrafo, como es este caso, puede estar formado por varias oraciones diferentes.

Lista sin orden
• Cada ítem no se encuentra numerado
• Se emplea cuando el contenido no tiene por qué tener un orden determinado

Lista ordenada
1. Los ítems aparecen numerados
2. Se usa cuanto el contenido tiene un orden específico

Esta jerarquización, además de facilitar la lectura de los contenidos por parte de los usuarios, posibilita a los motores de búsqueda encontrar la información más relevante para clasificar y ordenar la página web, lo que tiene gran importancia para el posicionamiento de la misma.

Estructura del documento HTML o XHTML

Cada documento HTML o XHTML debe contar con los siguientes elementos:

• Estructura del documento en HTML (<head>, <body>, <div>, <span>, <p>, etc.)
• Contenido del documento (principalmente textos, pero también imágenes, videos, música, etc., que se encuentran alojados en el propio sitio).
• Marcado semántico de los contenidos, para dar jerarquía a cada uno de los contenidos, darle una estructura determinada y transmitir un significado lógico.
• Presentación visual de los contenidos (empleando hojas de estilo en cascada o CSS), para que los contenidos luzcan de una forma determinada.
• Enlaces a otros contenidos, propios de la página o externos.
• Aplicación de elementos interactivos en otros lenguajes (javascript, ajax, php, asp, etc.).

Estructura del documento

Todo documento HTML o XHTML está dividido en dos partes fundamentales. Esta división es invisible para los usuarios, los que reciben únicamente lo que se encuentra contenido en una de estas divisiones. La primera es el encabezado, que se encuentra enmarcado por las etiquetas <head> y </head>, cuyo contenido no es visible para los usuarios, pero que representa una parte fundamental para el correcto funcionamiento del sitio, ya que tiene toda la información necesaria para los navegadores y los motores de búsqueda.

En el encabezado de la página se declara la norma de código en la que se encuentra escrito el documento (HTML o XHTML, la versión de los mismos, si su aplicación es estricta o transicional, etc.), el tipo de dispositivo para el cual fue creado (navegador web, teléfono móvil, iPod), contiene el título del documento, los enlaces a las hojas de estilo o la hoja de estilo en si, enlaces a scripts o los scripts mismos en otros lenguajes de programación, además de otras informaciones importantes para los navegadores o los motores de búsqueda, como el lenguaje de los contenidos (español, inglés, etc.), descripción, palabras clave, etc.

El cuerpo del documento es donde se encuentra la parte visible del mismo, o sea, donde se encuentran los contenidos destinados a los usuarios del sitio. Es en el cuerpo del documento donde se produce la estructuración del contenido mediante el empleo de las etiquetas HTML. Además de la jerarquización de los contenidos, se realiza aquí, mediante el empleo de CSS, la estructuración visual de la página y la presentación visual de los contenidos, es decir, dónde y cómo se verán cada uno de los contenidos.

Marcado semántico del contenido

Cuando el diseñador toma los contenidos y los introduce en el cuerpo del documento, mediante el empleo de etiquetas HTML o XHTML marca la estructura del contenido y jerarquiza los mismos.

Mediante el empleo de las etiquetas h1, h2, h3, etc., podrá establecer títulos y diferentes grados de subtitulado para cada una de las secciones del texto. Mediante el empleo de la etiqueta <p> hará las divisiones necesarias en el texto, y dará énfasis a las partes más importantes del mismo mediante el uso de etiquetas elaboradas para esa finalidad, como <strong> y <em>.

La estructuración semántica del contenido tiene una importancia crucial, tanto en la presentación del contenido como en la optimización para los motores de búsqueda, por lo que debe ser cuidadosamente planificada y elaborada.