HTML
Cómo elegir elementos HTML según el significado y la función del contenido, usando semántica nativa sin reemplazar todo por section, article o roles ARIA.
HTML semántico utiliza el elemento que mejor representa el significado y la función del contenido.
<nav>...</nav>
<main>...</main>
<article>...</article>
<button>Guardar</button><h2>Proyectos recientes</h2>Es un encabezado aunque CSS lo muestre pequeño.
<strong>Error crítico</strong>Comunica importancia aunque no tenga negrilla.
<button type="button">Abrir filtros</button>Incluye comportamiento de foco y activación.
<div role="button" tabindex="0">Abrir filtros</div>Necesita reconstruir teclado, estados, disabled, foco y otros detalles.
Primera regla de ARIA: usa semántica nativa cuando exista un elemento apropiado.
<div class="card-layout">...</div>
<span class="price-value">$100</span>Son contenedores genéricos válidos cuando no existe un significado más específico o la agrupación es puramente técnica/visual.
No son “malos”; son neutros.
Una estructura puede utilizar muchos elementos semánticos y seguir siendo incorrecta:
<section>
<section>
<section>...</section>
</section>
</section>Cada sección debe representar una unidad temática real, normalmente con encabezado.
<nav aria-label="Principal">...</nav>
<nav aria-label="Proyectos">...</nav>Cuando existen varias regiones del mismo tipo, un nombre ayuda a distinguirlas.
No nombres cada section indiscriminadamente; demasiadas regiones pueden crear ruido.
button {
all: unset;
}Aunque el elemento conserva parte de su semántica, resetear estilos puede eliminar indicadores de foco o comportamiento visual esperado.
Semántica correcta no exime de diseñar estados accesibles.
Un componente React llamado Button no garantiza que renderice <button>.
<Button as="div">Guardar</Button>Inspecciona el HTML final. El nombre del componente no llega al navegador.
Utilizar encabezados, links, artículos y metadata ayuda a que sistemas comprendan el contenido, pero no existe una fórmula donde añadir tags garantice ranking.
La semántica debe reflejar el documento real.
HTML nativo aporta roles, estados y relaciones. Aun así necesitas:
<article>
<header>
<h2>DomiSys</h2>
<p>Sistema de gestión para negocios.</p>
</header>
<p>
Centraliza inventario, pedidos y operación diaria.
</p>
<footer>
<a href="/portfolio/domisys">Ver proyecto</a>
</footer>
</article>Cada elemento describe el rol del contenido dentro del artículo.
¿Cuándo es correcto utilizar un div?
Cuando la agrupación no tiene un significado semántico más específico, por ejemplo para layout, hooks de estilos o estructura técnica.
Encabezados y jerarquía estructura los temas del documento.