HTML
Diferencias y casos de uso de section, article, search y address para representar secciones temáticas, contenido independiente, búsqueda e información de contacto.
Representa una sección temática del documento, normalmente identificada por un encabezado.
<section aria-labelledby="process-title">
<h2 id="process-title">Mi proceso de trabajo</h2>
<p>...</p>
</section>Utiliza section cuando el contenido forma una parte reconocible del índice o estructura de la página.
<section class="grid-wrapper">...</section>Si solo existe para layout y no representa un tema, utiliza div.
Tampoco necesitas envolver cada heading en section si la jerarquía ya es clara y el contenedor no aporta.
Representa una composición completa o reutilizable que podría distribuirse o comprenderse de forma relativamente independiente.
<article>
<h2>DomiSys</h2>
<p>Sistema de gestión para negocios.</p>
<a href="/portfolio/domisys">Ver proyecto</a>
</article>Casos comunes:
<article>
<h1>Cómo diseñar una API</h1>
<section aria-labelledby="comments-title">
<h2 id="comments-title">Comentarios</h2>
<article>
<h3>Comentario de Ana</h3>
<p>...</p>
</article>
</section>
</article>El article interno representa contenido relacionado con el article exterior, pero todavía independiente como comentario.
Pregunta:
¿Es una parte temática del documento?
→ section
¿Tiene sentido como unidad independiente o distribuible?
→ articleNo existe una prueba mecánica perfecta; decide según el contenido.
Section y article normalmente deberían tener un heading que permita identificar su propósito.
Puede haber excepciones por contenido generado o estructuras concretas, pero una sección sin nombre suele ser señal de que un div sería más apropiado.
Agrupa una parte del documento dedicada a buscar o filtrar.
<search>
<form>
<label for="project-search">Buscar proyectos</label>
<input id="project-search" name="q" type="search">
<button>Buscar</button>
</form>
</search>No es el mismo concepto que input type="search": el elemento agrupa una región; el input define un control.
Para compatibilidad accesible en proyectos actuales puede mantenerse un form role="search" según el soporte objetivo.
Representa información de contacto para el article o body más cercano.
<address>
<a href="mailto:hello@example.com">hello@example.com</a><br>
Bogotá, Colombia
</address>No representa cualquier dirección postal mencionada dentro de un artículo.
<p>La oficina está en Calle 10.</p>Solo usa address cuando son datos de contacto del autor, organización o sección correspondiente.
Los estilos predeterminados pueden mostrarlo en cursiva, pero esa apariencia no define el elemento. CSS puede cambiarla.
<section aria-labelledby="projects-title">
<h2 id="projects-title">Proyectos recientes</h2>
<div class="project-grid">
<article>...</article>
<article>...</article>
</div>
</section>section representa el tema; div representa layout; cada article, una unidad de contenido.
Incorrecto:
<article class="sidebar">...</article>si el contenido no es independiente y solo aparece en una columna.
<main>
<h1>Servicios</h1>
<section aria-labelledby="services-title">
<h2 id="services-title">Servicios principales</h2>
<article>
<h3>Aplicaciones web y sistemas de gestión</h3>
<p>...</p>
</article>
<article>
<h3>MVPs y productos desde cero</h3>
<p>...</p>
</article>
</section>
<address>
Escríbeme a
<a href="mailto:hello@example.com">hello@example.com</a>.
</address>
</main>¿Por qué una grid de cards puede necesitar section, div y article al mismo tiempo?
Porque section representa el tema, div organiza el layout y cada article representa una unidad independiente de contenido.
Párrafos y contenido agrupado explica cómo estructurar bloques de texto y separación temática.