HTML

<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 …

Publicado: 09/08/2025 Por: Juan Felipe Orozco Cortés
Ir al contenido Ir a comentarios Volver a guías
☰ Contenido de la guía ⌄

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.

Diagrama que muestra la disposición de header, main y footer en una página web.
Figura 1: Disposición estructural de Header, Main y Footer.

El Recibidor: La Etiqueta

En nuestra casa web, el

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

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

Si tu página fuera una película, la etiqueta

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

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

❌ No incluyas aquí el contenido repetido:
  • Logos y menús de navegación (eso va en el
    ).
  • Barras laterales con publicidad o enlaces (para eso existe
  • Información de copyright o enlaces generales del sitio (eso va en el
    ).

Código de ejemplo del Contenido Principal (main)

Estás viendo solo el 60% del contenido. Hazte Premium para acceder a la guía completa.

← Volver a Guías
Comunidad

Comentarios y valoraciones

No hay comentarios aún. ¡Sé el primero en opinar!