▷ Estructura de un SITIO WEB con ETIQUETAS ESTRUCTURALES
🧱 Estructura semántica en HTML5: Etiquetas estructurales y su importancia
En el articulo de Etiquetas DIV para estructurar un sitio web vimos como se debe estructurar un sitio web, sin embargo HTML5 introdujo etiquetas estructurales que permiten crear páginas web más ordenadas, legibles y accesibles. Estas etiquetas no solo ayudan a los desarrolladores a entender mejor el código, sino que también son fundamentales para SEO, accesibilidad y buenas prácticas en desarrollo web.
📌 ¿Qué son las etiquetas estructurales en HTML?
Son etiquetas semánticas que representan distintas secciones del contenido de una página. Al usarlas correctamente, estamos diciendo al navegador, a los motores de búsqueda y a los lectores de pantalla qué rol cumple cada parte del sitio.
🔹 Principales etiquetas estructurales
- <header> – Encabezado de una página o sección. Puede contener logos, menús, títulos, etc.
- <nav> – Área de navegación principal (menú).
- <main> – Contenido principal de la página (solo debe haber uno por documento).
- <section> – Agrupa contenido relacionado dentro de
<main>o<article>. - <article> – Contenido independiente o reutilizable, como posts o noticias.
- <aside> – Información complementaria, como barras laterales o widgets.
- <footer> – Pie de página, suele contener créditos, enlaces de contacto, redes, etc.
📄 Ejemplo de estructura semántica en HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi página con HTML5</title>
</head>
<body>
<header>
<h1>Mi sitio web</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Bienvenido</h2>
<p>Este es el contenido principal de la página.</p>
</section>
<article>
<h3>Noticia destacada</h3>
<p>Este artículo puede reutilizarse en otras secciones o páginas.</p>
</article>
<aside>
<h4>Publicidad o enlaces útiles</h4>
<p>Aquí puedes colocar widgets, enlaces o info adicional.</p>
</aside>
</main>
<footer>
<p>© 2025 - Mi sitio web - Todos los derechos reservados</p>
</footer>
</body>
</html>
📈 ¿Por qué es importante usar estas etiquetas?
- 🔍 SEO: Los motores de búsqueda entienden mejor la jerarquía y el contenido de tu sitio.
- ♿ Accesibilidad: Los lectores de pantalla guían mejor a personas con discapacidad visual.
- 👨💻 Legibilidad: El código se vuelve más limpio, ordenado y fácil de mantener.
- 🔧 Mejor mantenimiento: Facilita aplicar estilos y estructura desde CSS.
✅ Buenas prácticas al usar etiquetas estructurales
- Usa solo un
<main>por documento. - Evita abusar de
<div>si puedes usar etiquetas semánticas. - No pongas elementos no relacionados dentro de un
<section>. - Usa
<article>para entradas de blog, noticias, comentarios, etc.
En el siguiente video te muestro el uso de las etiquetas estructurales para el desarrollo de un sitio web.
🗨️ ¿Qué opinas?
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨
Comentarios