Etiquetas que dan significado y estructura semántica al contenido.
<header>
Semántica
Encabezado de sección o de la página completa. Puede haber
varios en un documento (uno por <article> o
<section>). Contiene típicamente logo, título y navegación.
No confundir con <head> — ese es para metadatos invisibles,
este es contenido visible.
<nav>
Semántica
Sección de navegación principal con enlaces. Los lectores de pantalla exponen los <nav> como landmarks y permiten saltar entre ellos. Un documento puede tener varios: navegación principal del sitio, breadcrumb, tabla de contenidos, paginación. No todos los grupos de enlaces necesitan <nav>: reservalo para bloques de navegación importantes. Si hay más de uno, añade aria-label para distinguirlos.
Cuando hay más de un <nav> en la página, añade aria-label="Navegación principal" a cada uno. Los lectores de pantalla listan todos los landmarks con su nombre para que el usuario pueda saltar directamente.
<search>
Semántica
Elemento landmark introducido en HTML 2023 que identifica semánticamente una región de búsqueda o filtrado. Es el equivalente HTML nativo de <div role="search">: los lectores de pantalla lo anuncian como región de búsqueda y los usuarios pueden saltar directamente a ella. Puede usarse múltiples veces — para búsqueda global del sitio, búsqueda dentro de una sección, filtros de productos, etc. Puede contener cualquier tipo de control: formularios, campos de texto, checkboxes o botones.
El soporte de <search> es universal en navegadores modernos desde 2023. Para proyectos que necesiten soporte en navegadores más antiguos, el fallback es <div role="search">, que es semánticamente equivalente.
<search>
<form action="/buscar">
<input type="search" name="q">
<button type="submit">Buscar</button>
</form>
</search><main>
Semántica
Contenido principal único de la página. Solo puede haber uno visible
por documento (hidden permite tener varios). Los lectores de pantalla y
el atajo de teclado en algunos navegadores saltan a él directamente. No puede estar
dentro de <article>, <aside>,
<header>, <footer> o <nav>.
<article>
Semántica
Contenido independiente y autocontenido: tiene sentido por sí solo
si se extrae del contexto. Pregunta: "¿tendría sentido en un feed RSS o en otro
sitio?" Si sí → <article>. Si no → <section>.
Puede tener su propio <header>, <footer> y
<h1>.
Contenido independiente del artículo...
<section>
Semántica
Sección temática con identidad propia — debe tener su
propio encabezado (h2–h6). Diferencia con
<article>: una sección es parte de un todo mayor; un artículo
es autónomo. Diferencia con <div>: section aparece en el outline
del documento; div no.
<section>
<h2>Título de sección</h2>
<p>Contenido relacionado...</p>
</section><aside>
Semántica
Contenido tangencialmente relacionado con el contenido principal que lo rodea: barras laterales, biografías del autor, bloques de publicidad, definiciones de glosario, notas al margen, cajas de "lectura relacionada". No es sinónimo de "columna lateral" en el diseño — su uso debe estar justificado semánticamente. Los lectores de pantalla exponen <aside> como landmark complementary, permitiendo saltar directamente a él o ignorarlo.
No uses <aside> simplemente porque algo está en la columna derecha. Si el contenido es parte esencial del flujo del documento, usa <section>. Si es completamente independiente y reutilizable, considera <article>.
<footer>
Semántica
Pie de página de su sección contenedora o del documento. Puede haber varios en un documento: uno global (pie del sitio con copyright, enlaces legales, redes sociales) y uno por <article> o <section> (fecha, autor, etiquetas). Cuando el <footer> está dentro de <body> directamente, el navegador le asigna el rol ARIA contentinfo. Dentro de <article>, no tiene rol landmark y es simplemente contenido de cierre.
El <footer> global no debe contener el elemento <main>. Si incluyes un formulario de suscripción o mapa en el pie, envuélvelos en sus propias secciones semánticas dentro del footer.
Estructura de Página — Playground
Interactivo
Activa o desactiva elementos semánticos y observa cómo cambia la estructura visual y el HTML generado. La combinación correcta mejora accesibilidad y SEO.
<hgroup>
Semántica
Agrupa un encabezado (h1–h6) con uno o más párrafos de subtítulo o eslogan. Solo el encabezado contribuye al outline del documento — los párrafos adicionales son texto de apoyo sin efecto en la jerarquía. Fue redefinido en HTML 2022 para este propósito específico. Útil en páginas de inicio, artículos y secciones donde el título principal tiene un subtítulo inseparable.
Usa <hgroup> cuando el subtítulo forma parte esencial del nombre del artículo o sección, no cuando es descripción independiente. Para descripciones separadas del encabezado, usa un <p> fuera del <hgroup>.
Subtítulo descriptivo del contenido
<details> / <summary>
Interactivo
Widget desplegable nativo sin JavaScript. <summary> es el texto visible del toggle — si se omite, el navegador usa "Detalles" por defecto. El contenido del <details> que no está en <summary> se muestra u oculta al hacer clic. El atributo open lo hace visible por defecto. Ideal para FAQs, acordeones simples, notas opcionales y configuraciones avanzadas.
openbooleanMuestra el contenido expandido por defecto al cargar la página
namestringGrupo de acordeón exclusivo: solo uno del grupo puede estar abierto a la vez (HTML 2023)
En 2023 se añadió el atributo name al elemento <details>. Todos los <details name="faq"> forman un acordeón donde al abrir uno se cierran los demás — sin JavaScript.
Este contenido está oculto por defecto y se muestra al hacer clic en el summary. ¡Sin JavaScript!
Este details tiene el atributo open por lo que
comienza expandido.
<dialog>
Interactivo
Modal nativo de HTML. show() abre no-modal; showModal()
abre modal real (backdrop, trampa de foco, cierra con Esc). Un
<form method="dialog"> dentro cierra el diálogo al enviarse.
La propiedad dialog.returnValue indica qué botón lo cerró. No requiere
librerías externas ni gestión manual del foco.
<template>
Web Components
Fragmento HTML inerte: no se renderiza, sus scripts no se ejecutan y sus imágenes no se descargan al cargar la página. Su contenido vive en un DocumentFragment accesible mediante template.content. Se usa con JavaScript para clonar e insertar instancias: template.content.cloneNode(true). Es la base de los Web Components junto con Custom Elements y Shadow DOM.
A diferencia de mantener HTML comentado o en strings de JavaScript, <template> es parseado por el navegador al cargar (detectando errores), pero no renderizado — lo mejor de ambos mundos para plantillas reutilizables.
<slot>
Web Components
Marcador de posición dentro del Shadow DOM de un Web Component. Permite proyectar ("distribuir") nodos del Light DOM (HTML del usuario) hacia posiciones específicas dentro del componente encapsulado. Un slot sin name es el slot por defecto que recibe todo el contenido no asignado. Los slots nombrados (<slot name="icon">) reciben exactamente el elemento con slot="icon".
namestringIdentifica el slot nombrado; el contenido con slot="nombre" se proyecta aquí
El contenido entre las etiquetas <slot></slot> es el fallback: se muestra si el usuario del componente no proporciona contenido para ese slot.
<!-- Dentro del Shadow DOM -->
<div class="card">
<slot name="title">Título default</slot>
<slot>Contenido default</slot>
</div>