¿Qué es HTML semántico?
HTML semántico se refiere al uso de etiquetas que describen claramente su propósito. Mejora la accesibilidad y facilita el mantenimiento del código.
Etiquetas comunes
Algunas etiquetas semánticas incluyen:
<header>: Encabezado de una página o sección<nav>: Contenedor de enlaces de navegación<main>: Contenido principal del documento<section>: Agrupación temática del contenido<article>: Contenido independiente, como entradas de blog<aside>: Contenido relacionado, como barras laterales<footer>: Información de pie de página<figure>: Contenedor para contenido gráfico<figcaption>: Descripción de una figura<mark>: Resalta texto importante<time>: Representa una hora o fecha<details>: Contenedor de detalles colapsables<summary>: Título de un bloque <details><dialog>: Cuadro de diálogo o ventana emergente<progress>: Barra de progreso<meter>: Medidor de un valor dentro de un rango<template>: Plantilla para contenido reutilizable<slot>: Marcador de posición para contenido dinámico<address>: Información de contacto<blockquote>: Cita de otro autor<cite>: Título de una obra<abbr>: Abreviatura o acrónimo
Ejemplos de uso:
<header>
<header>
<h1>Mi Sitio Web</h1>
</header>
<nav>
<nav>
<a href="index.html">Inicio</a>
<a href="contacto.html">Contacto</a>
</nav>
<main>
<main>
<h2>Contenido Principal</h2>
</main>
<section>
<section>
<h2>Noticias</h2>
<p>Últimas novedades del día.</p>
</section>
<article>
<article>
<h2>Reseña de un libro</h2>
<p>Excelente novela histórica...</p>
</article>
<aside>
<aside>
<p>Contenido relacionado como anuncios o enlaces útiles.</p>
</aside>
<footer>
<footer>
<p>Derechos reservados 2025</p>
</footer>
<figure> y <figcaption>
<figure>
<img src="paisaje.jpg" alt="Paisaje natural">
<figcaption>Un hermoso amanecer en la montaña</figcaption>
</figure>
<mark>
<p>Este es un texto <mark>importante</mark>.</p>
<time>
<p>Publicado el <time datetime="2025-05-23">23 de mayo de 2025</time>.</p>
<details> y <summary>
<details>
<summary>Ver más información</summary>
<p>Contenido adicional oculto hasta desplegar.</p>
</details>
<dialog>
<dialog open>
<p>Este es un cuadro de diálogo.</p>
</dialog>
<progress>
<progress value="70" max="100">70%</progress>
<meter>
<meter value="0.6">60%</meter>
<template>
<template id="card-template">
<div class="card">Contenido de tarjeta</div>
</template>
<slot>
<custom-element>
<slot>Contenido predeterminado</slot>
</custom-element>
<address>
<address>
Calle 123, Ciudad, País
<br>
Email: contacto@ejemplo.com
</address>
<blockquote> y <cite>
<blockquote cite="https://example.com">
La imaginación es más importante que el conocimiento.
<cite>Albert Einstein</cite>
</blockquote>
<abbr>
<p>El <abbr title="Hypertext Markup Language">HTML</abbr> es fundamental para la web.</p>