Tanto si estás empezando en el desarrollo web como si ya llevas tiempo creando sitios, hay un concepto fundamental que puede mejorar drásticamente tu código: la estructura semántica.
Al construir una página web, piensa que es como construir una casa. No levantas las paredes al azar. Empiezas con una base sólida y una estructura clara. En HTML, tres de las "vigas" estructurales más importantes son <header>, <main> y <footer>.
Usarlas correctamente no solo organiza tu código, sino que envía señales vitales a los motores de búsqueda como Google y a las tecnologías de asistencia para personas con discapacidad. Esto se traduce en un mejor SEO y accesibilidad desde la base.
Vamos a desglosarlas.
🏠 El Recibidor: La Etiqueta <header>
En nuestra casa digital, el <header> es la fachada y el recibidor. Es la zona superior que da la bienvenida a tus visitantes. Típicamente, contiene:
- El logo.
- El título principal del sitio.
- El menú de navegación principal (que a su vez debería ir dentro de una etiqueta
<nav>).
🔑 Pregunta Clave: Para saber si usar un <header>, 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: No confundas <header> con <head>.
-
<header>es lo que el usuario VE en la parte superior de la página. -
<head>es la sección invisible con metadatos para el navegador (como el título de la página, el set de caracteres y los enlaces a los archivos CSS).
Ejemplo rápido:
<header>
<img src="logo.png" alt="Logo de Mi Sitio Increíble">
<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. Envuelve el contenido central y único de esa URL específica. Es la razón por la que un usuario visita la página, 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 una trama principal. Esta regla asegura que el propósito de la página sea claro tanto para las máquinas como para los humanos.
¿Qué debería quedar FUERA de ?
Cualquier contenido que se repita en varias páginas de tu sitio no pertenece aquí.
❌ Logos y menús de navegación (eso va en el <header>).
❌ Barras laterales con publicidad o enlaces relacionados (para eso existe <aside>).
❌ Información de copyright o enlaces generales del sitio (eso va en el <footer>).
Ejemplo rápido:
<main>
<h1>El Artículo Más Importante que Leerás Hoy</h1>
<p>Este es el contenido único que hace especial a esta página. Todos los párrafos, imágenes e ideas centrales viven dentro de la etiqueta main.</p>
<article>
<h2>Una sección del artículo</h2>
<p>Más detalles aquí...</p>
</article>
</main>
💎 Los Cimientos: La Etiqueta
(El resto de esta sección está disponible en la guía completa).
Este artículo cubre los conceptos básicos de y . En la guía completa, también profundizamos en la etiqueta , explicando para qué sirve, qué contenido debe incluir y cómo completa la estructura fundamental de tu página.
Si quieres dominar estos conceptos y ver un ejemplo completo que une las tres etiquetas, echa un vistazo a la guía completa en mi blog.
👉 Lee la Guía Completa en TuCodigoCotidiano
https://tucodigocotidiano.yarumaltech.com/leer_guias/guia/30/
¡Gracias por leer! Déjame un comentario si tienes alguna pregunta o si tú también cometías el error de confundir con . ¡A todos nos ha pasado! 👇
Top comments (0)