10.2 Estructura semántica de una página (header, nav, main, footer)
Una correcta estructura semántica mejora la accesibilidad, el SEO y facilita el mantenimiento. A continuación profundizamos en cada una de las cuatro etiquetas principales y veremos ejemplos comentados.
1. Elemento <header>
El <header> define la cabecera de una sección o de la página completa. Suele incluir:
- Logo o título principal
- Eslogan o subtítulo
- Elementos de contacto o búsqueda
- En ocasiones, navegación secundaria
Puede repetirse dentro de secciones (<article>, <section>), pero sólo una vez para la página madre.
MiSitio Web
2. Elemento <nav>
El <nav> agrupa enlaces de navegación. Existen dos tipos:
- Navegación principal (menú global)
- Navegación secundaria (enlaces locales dentro de una sección)
Siempre conviene usar listas (<ul>) y, si son menús complejos, proporcionar un atributo aria-label descriptivo.
3. Elemento <main>
El <main> contiene el contenido principal de la página. Sus características:
- Sólo debe haber uno por documento.
- No puede incluir cabeceras (
<header>), pie de página (<footer>) ni barras laterales (<nav>). - Los lectores de pantalla pueden saltar directamente al
<main>.
Bienvenidos a MiSitio
En esta sección encontrarás una visión general de nuestros servicios.
Últimos artículos
Título del artículo 1
Extracto del artículo 1…
Leer másTítulo del artículo 2
Extracto del artículo 2…
Leer más
4. Elemento <footer>
El <footer> se utiliza para el pie de página de la sección o del documento. Suele incluir:
- Información de autor o copyright.
- Enlaces a políticas (privacidad, términos).
- Redes sociales o contacto.
5. Ejemplo completo de estructura semántica
MiSitio Web
Bienvenidos
Descripción de la página y llamada a la acción.
Nuestros servicios
- Desarrollo web
- Diseño gráfico
- Marketing digital
Deja una respuesta
Lo siento, debes estar conectado para publicar un comentario.