Diseño y Semántica en HTML
Las etiquetas semánticas permiten estructurar el contenido de manera lógica y accesible, mejorando la experiencia del usuario y el posicionamiento web.
Contenedores generales (<div>, <span>)
Se usan para agrupar contenido y aplicar estilos o scripts sin aportar significado semántico:
<div class="contenedor">
<span>Texto resaltado</span>
</div>Secciones semánticas principales (<header>, <footer>, <main>, <nav>)
<header>Encabezado de la página</header>
<nav>Menú de navegación</nav>
<main>Contenido principal</main>
<footer>Pie de página</footer>Organización de contenido (<section>, <article>, <aside>)
<section>
<h2>Sección principal</h2>
<article>
<h3>Artículo</h3>
<p>Contenido del artículo.</p>
</article>
<aside>
Información complementaria o anuncios
</aside>
</section>Elementos interactivos (<details>, <summary>)
<details>
<summary>Más información</summary>
<p>Contenido adicional que se puede mostrar u ocultar.</p>
</details>Diálogos modales (<dialog>)
<dialog id="modal">
<p>Este es un diálogo modal.</p>
<button onclick="document.getElementById('modal').close()">Cerrar</button>
</dialog>Diseño responsivo y layout
Las etiquetas semánticas facilitan el diseño adaptable a diferentes dispositivos y la organización lógica del layout.
<header>Encabezado</header>
<nav>Menú</nav>
<main>
<section>Contenido principal</section>
<aside>Barra lateral</aside>
</main>
<footer>Pie de página</footer>Resumen
- Usar etiquetas semánticas para estructurar el contenido:
<header>,<nav>,<main>,<footer>. - Organizar contenido con
<section>,<article>y<aside>. - Agregar elementos interactivos con
<details>y<summary>. - Implementar diálogos modales con
<dialog>. - Facilitar el diseño responsivo mediante la correcta estructura semántica.