Una página web tiene cinco partes principales. Son la cabecera, el menú de navegación, el contenido principal, la barra lateral (opcional) y el pie de página. El estándar HTML tiene una etiqueta para cada una, como header para la cabecera o main para el contenido que da sentido a la página.
Las partes de una página, de arriba abajo.
Casi todas las páginas siguen el mismo esquema. No es casualidad, porque el visitante ya sabe dónde buscar cada cosa y no tiene que pensar.
| Parte | Qué suele contener | Etiqueta HTML |
|---|---|---|
| Cabecera | Logotipo, menú y a veces un botón de contacto | header |
| Navegación | Enlaces a las secciones del sitio | nav |
| Contenido principal | Lo que da sentido a esa página concreta | main |
| Barra lateral | Información complementaria | aside |
| Pie de página | Datos de la empresa, enlaces legales y contacto | footer |
Usar la etiqueta correcta no se nota a simple vista. Sí lo notan los lectores de pantalla y los buscadores, que entienden mejor qué parte es cada bloque.
Cabecera.
El estándar HTML define la cabecera como un grupo de ayudas introductorias o de navegación. En la práctica es la franja superior que se repite en todas las páginas.
Debe dejar claro en un vistazo quién eres y cómo se contacta contigo. El logotipo enlaza al inicio. Si tu negocio vive del teléfono, ponlo aquí y que se pueda pulsar desde el móvil.
Menú de navegación.
El elemento nav agrupa los enlaces que llevan a otras páginas o a otras partes de la misma. Es el índice del sitio.
Mejor pocas opciones y con nombres que entienda el cliente. «Servicios» funciona mejor que «Qué hacemos por ti». En el móvil, el menú se recoge en un botón, pero las dos o tres opciones más usadas pueden quedar a la vista.
Las pautas de accesibilidad piden una forma de saltar los bloques que se repiten en cada página. Suele ser un enlace oculto, «Ir al contenido», que aparece al navegar con el teclado.
Contenido principal.
Es la parte que cambia de una página a otra. El estándar lo describe como el contenido dominante del documento, y solo debe haber uno visible por página.
En una página de servicio suele ordenarse así.
- Un título claro con lo que ofreces.
- Un párrafo que diga para quién es y qué resuelve.
- Las secciones con detalles, ejemplos y proyectos.
- Preguntas frecuentes.
- Una llamada a la acción para contactar.
Barra lateral.
La barra lateral muestra información relacionada, como artículos recientes o categorías de un blog. En el móvil acaba debajo del contenido, así que no pongas en ella nada imprescindible. Muchas webs de empresa ya no la usan en las páginas de servicio.
Pie de página.
El pie representa el cierre de su sección o de la página entera. Suele llevar autoría, enlaces relacionados y derechos de autor.
En España, además, es el sitio habitual del aviso legal. La LSSI obliga a ofrecer datos como el nombre, el domicilio, el contacto y el NIF de quien está detrás de la web. Junto a él van la política de privacidad y la de cookies, si las necesitas.
Estructura de una página web.
La estructura interna se ve en los títulos. Cada página tiene un único título principal (H1) y debajo los apartados (H2) y sus subapartados (H3). Si quitas el diseño y solo lees los títulos, debería entenderse de qué va la página.
Hay otro nivel de estructura, el del sitio. Es el árbol que une las páginas.
- Inicio, que reparte hacia el resto.
- Páginas de servicio, una por cada cosa que vendes.
- Proyectos o casos, que demuestran lo anterior.
- Blog, para responder dudas de los clientes.
- Contacto, al que se llega desde cualquier página en un clic.
Un buen árbol evita que una página quede huérfana, sin enlaces que lleguen a ella. Cómo se decide este árbol al empezar un proyecto lo explicamos en fases del diseño web.
Elementos de una página web.
Dentro de cada parte hay piezas más pequeñas. Estas son las que no deberían faltar.
| Elemento | Para qué sirve | Error habitual |
|---|---|---|
| Título del documento | Nombra la página en la pestaña y en Google | Repetir el mismo en todas las páginas |
| Título principal (H1) | Dice de qué va la página | Usar el logotipo como único título |
| Llamada a la acción | Guía al siguiente paso | Botones que dicen solo «Más información» |
| Imágenes | Muestran el producto o el equipo | Fotos pesadas y sin texto alternativo |
| Formulario | Recoge el contacto | Pedir más datos de los necesarios |
| Enlaces internos | Llevan a páginas relacionadas | Textos de enlace tipo «pincha aquí» |
El título del documento lo marca la etiqueta title, que representa el nombre de la página. Las pautas WCAG piden que cada página tenga un título que describa su tema o finalidad. Es también lo primero que lee alguien en los resultados de Google.
Si quieres ver cómo se escriben estas piezas en código, lo hacemos paso a paso en cómo hacer una página web con HTML. Si partes de cero, empieza por qué es una página web.
En OverFuture diseñamos cada página con su estructura antes de dibujar nada. Puedes ver nuestro enfoque en diseño web profesional.
Preguntas frecuentes.
Son cinco: cabecera, menú, contenido principal, barra lateral y pie. La barra lateral es la única que se puede omitir sin problema.
Los datos de la empresa y los enlaces al aviso legal, la privacidad y las cookies. También ayuda repetir el contacto.
No. La estructura ordena el contenido y el diseño decide cómo se ve. Una buena estructura sobrevive a varios rediseños.
