header nav main y footer
Estructure las regiones principales de una página con etiquetas semánticas
header nav main y footer es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Elementos landmark de HTML5
HTML5 introdujo elementos landmark que definen regiones de la página:
<header>— contenido introductorio o de navegación<nav>— enlaces de navegación<main>— contenido principal exclusivo de la página<footer>— información del pie de página
Sustituyen los <div> genéricos por una estructura con significado.
El elemento header
El elemento <header> contiene contenido introductorio:
<header>
<a href="/" class="logo">
<img src="logo.svg" alt="Company name">
</a>
<nav>...</nav>
<button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->El elemento nav
El elemento <nav> agrupa los enlaces de navegación:
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->Varios elementos nav
Una página puede tener varios elementos <nav>; etiquete cada uno:
<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->El elemento main
El elemento <main> identifica el contenido principal exclusivo de esta página:
<main id="main-content">
<h1>HTML5 Landmark Elements</h1>
<p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
- Only ONE main element per page
- Should not be a descendant of header, footer, aside, nav
- id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->El elemento footer
El elemento <footer> agrupa la información del pie de página:
<footer>
<p>© 2025 CoddyKit. All rights reserved.</p>
<nav aria-label="Footer navigation">
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
</nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->Estructura de la página
Una estructura semántica completa para una página:
<body>
<header>
<a href="/"><img src="logo.svg" alt="Site name"></a>
<nav aria-label="Main">...</nav>
</header>
<main id="main-content">
<h1>Page Title</h1>
<p>Primary content here.</p>
</main>
<aside>Related content</aside>
<footer>
<p>© 2025 Company</p>
</footer>
</body>Enlace para saltar la navegación
Añada un enlace para que los usuarios del teclado puedan saltar la navegación:
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>... navigation ...</header>
<main id="main-content" tabindex="-1">
<h1>Page Heading</h1>
</main>
/* CSS: */
.skip-link {
position: absolute; top: -100%;
background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }Roles landmark
Los elementos landmark de HTML5 se corresponden con roles landmark de ARIA:
<header>→role="banner"(solo a nivel de página)<nav>→role="navigation"<main>→role="main"<footer>→role="contentinfo"(solo a nivel de página)<aside>→role="complementary"
header y footer dentro de las secciones
Los elementos header y footer pueden aparecer dentro de <article> y <section>:
<article>
<header>
<h2>Article Title</h2>
<p>By Jane Smith | March 2024</p>
</header>
<p>Article content...</p>
<footer>
<p>Tags: HTML, CSS</p>
</footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->Errores habituales
Evite estos errores habituales con los elementos landmark semánticos:
- Usar
<nav>para cualquier grupo de enlaces - Incluir varios elementos
<main>en una misma página - Colocar
<main>dentro de<header>o<nav> - Usar
<footer>para contenido que no pertenece al pie de página
Comprobación rápida
¿Cuántos elementos main debe tener una página?
Resumen: header, nav, main y footer
Aspectos esenciales de los elementos landmark:
<header>— contenido introductorio; puede repetirse en cada sección<nav>— navegación principal; use aria-label si hay varios<main>— contenido principal exclusivo; exactamente uno por página<footer>— contenido del pie de página; puede repetirse en cada sección- Añada un enlace para saltar a
id="main-content"
Preguntas frecuentes
¿La lección «header nav main y footer» es gratis?
Sí — el texto completo de «header nav main y footer» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «header nav main y footer»?
Estructure las regiones principales de una página con etiquetas semánticas Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «header nav main y footer»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- header nav main y footer
- El elemento article: contenido independiente
- El elemento section frente a div
- time address y mark