Debemos organizar nuestra web en un conjunto coherente de páginas (estructura del website) y cada página debe tener una organización lógica de su contenido (estructura de cada página).

Estructura del sitio Web

Organiza el contenido del sitio web en un conjunto de páginas web que guarden una jerarquía lógica.

 

Ilustración 1. Menús. Primer nivel

La ilustración 1 muestra páginas de primer nivel o páginas "menú". Son páginas creadas directamente en la Portada y son páginas hijas de la portada. Muestran las principales secciones del Website, es decir, los grandes grupos desde dónde se dará acceso a los principales contenidos.

 

Ilustración 2. Contenido principal. Segundo nivel

La ilustración 2 muestra páginas de segundo nivel. Se trata de cuatro páginas que hemos creado en la página de primer nivel "Imágenes". Son páginas de "contenido". En este caso desarrollan, desde diferentes enfoques, el contenido de la página padre "imágenes".
Son las páginas que se muestran en los desplegables de los menús (cuando en configuración de página añadimos el "Título corto", y después actualizamos la Portada).

Estructura de cada página

Organiza el contenido de cada página mediante títulos sencillos, descriptivos (para saber qué información encontrarás en su sección), únicos (no incluyas en la misma página dos títulos con el mismo texto) y que guarden una jerarquía lógica.


Ilustración 3. Niveles de encabezado

La ilustración 3 muestra los 6 niveles de encabezado disponibles en el widget de texto.

 Debemos tener en cuenta que:

• El título de la página es un encabezado de nivel 1.
• La descripción de las página es un encabezado de nivel 2.
• El título de cada widget es un encabezado de nivel 2.

Piensa que el título de la página es el título de nivel 1, así que cada una de las grandes secciones en las que dividas su contenido puede tener un título de nivel 2; y dentro de estas, si tienen subsecciones, estarán precedidas de un título de nivel 3.

Hay que ser consistente en el uso de los encabezados y no dejar huecos en el orden: por ejemplo, es un error pasar de <h2> a <h4> sin utilizar <h3>. Para comprobar que se está haciendo un uso correcto de los encabezados existen varias herramientas, por ejemplo, la herramienta online WAVE. Web accessibility evaluation tool.