<header>, <footer> y <main>: Estructurando el layout principal.
Al construir la estructura de una página web, tres de las piezas más importantes son el encabezado, el contenido principal y el pie de página. Piensa en ellas como la columna vertebral de tu documento. Son las primeras grandes vigas que pones al construir tu casa digital.
Usar correctamente <header>, <main> y <footer> no solo organiza tu código, sino que le da señales vitales a los motores de búsqueda como Google y a las tecnologías de asistencia para personas con discapacidad, mejorando drásticamente tu SEO y accesibilidad desde la base.
El Recibidor: La Etiqueta <header>
En nuestra casa web, el <header> es la fachada y el recibidor. Es la zona superior que da la bienvenida a tus visitantes y, por lo general, contiene el logo, el título principal del sitio y el menú de navegación principal (que a su vez iría dentro de una etiqueta <nav>).
🤔 Pregunta Clave: Para saber si usarlo, pregúntate: ¿Este contenido es la cabecera de toda la página o de una sección principal como un artículo? Si la respuesta es sí, esta es tu etiqueta.
⚠️ Error Común: Confundir header con head. Recuerda siempre: el header es lo que el usuario VE en la parte superior de la página. El head es una sección invisible con metadatos para el navegador.
Código de ejemplo del Encabezado Principal (header)
<header>
<img src="logo.png" alt="Mi Logo">
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
</header>El Protagonista: La Etiqueta <main>
Si tu página fuera una película, la etiqueta <main> sería el protagonista principal. Envuelve el contenido central y único de esa URL; es la razón específica por la que un usuario la visita, ya sea un artículo de blog, una lista de productos o un formulario de contacto.
📜 La Regla de Oro: Solo puede haber una etiqueta <main> visible por página. Piénsalo: una película solo tiene un protagonista. Esta regla asegura que el propósito de la página sea claro para todos.
Elementos que deben quedar FUERA de <main>
- Logos y menús de navegación (eso va en el <header>).
- Barras laterales con publicidad o enlaces (para eso existe <aside>).
- Información de copyright o enlaces generales del sitio (eso va en el <footer>).
Código de ejemplo del Contenido Principal (main)
Estás viendo solo el 60% del contenido. ¡Únete a la Membresía Premium! para acceder al contenido completo.
Comentarios y Valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!