¿Cómo uso «article» y «section» correctamente? ¿Cuál es su diferencia?
«article» vs «section»: «article» es contenido auto-contenido e independiente (un post). «section» agrupa por tema.
Tanto <article> como <section> son etiquetas semánticas de HTML5 para estructurar el contenido de tu página, pero sirven para propósitos ligeramente diferentes.
<article> (Artículo)
- Propósito: Representa una composición completa, auto-contenida e independientemente distribuible o reutilizable.
Piensa en un<article>como algo que tendría sentido por sí mismo si lo extrajeras de la página actual y lo leyeras en otro contexto (por ejemplo, sindicado en un lector de noticias RSS). - Ejemplos típicos: Un post de un blog, una noticia de un periódico, un comentario de un usuario en un foro, un producto individual en una lista de productos, un widget interactivo.
- Características: A menudo, un
<article>tendrá su propia cabecera (<header>) y/o pie de página (<footer>).
<section> (Sección)
- Propósito: Representa una agrupación temática genérica de contenido dentro de un documento. Se utiliza para dividir el contenido en partes lógicas o temáticas.
A diferencia de un<article>, el contenido de una<section>no necesariamente es auto-contenido o independientemente distribuible; su significado a menudo depende del contexto que la rodea. - Ejemplos típicos: Capítulos de un libro, diferentes pestañas en una interfaz de usuario, apartados de una página de inicio como «Introducción», «Servicios», «Contacto», o grupos de artículos relacionados bajo un mismo tema.
- Características: Es una buena práctica que cada
<section>tenga un encabezado (<code><h1></code>-<code><h6></code>) que identifique su tema, lo cual es importante para la accesibilidad y el esquema del documento.
Diferencia principal y cuándo usar cada una:
La diferencia fundamental radica en la autonomía del contenido:
- Usa
<article>si el contenido es una pieza independiente que podría existir por sí sola. - Usa
<section>para agrupar contenido temáticamente relacionado que forma parte de un todo mayor. Una<section>puede no tener mucho sentido si se saca de su contexto.
Anidación:
- Un
<article>puede estar dividido en varias<section>s internas. (Ej: un post de blog (<article>) con secciones para «Introducción», «Desarrollo», «Conclusión»). - Una
<section>puede contener varios<article>s. (Ej: una sección de «Últimas Noticias» (<section>) que agrupa varios artículos individuales (<article>)).
Ejemplo combinado:
<body>
<header>...</header>
<nav>...</nav>
<main>
<h1>Mi Blog de Viajes</h1>
<section> <h2>Posts Recientes</h2>
<article> <h3>Un Viaje a las Montañas</h3>
<p>Descripción breve del viaje...</p>
<a href="viaje-montanas.html">Leer más</a>
</article>
<article> <h3>Explorando la Costa</h3>
<p>Aventuras en la playa...</p>
<a href="explorando-costa.html">Leer más</a>
</article>
</section>
<aside>...</aside>
</main>
<footer>...</footer>
</body>
Lenguaje del código: PHP (php)En resumen: si el contenido puede «vivir por sí solo», probablemente sea un <article>. Si estás agrupando partes de contenido bajo un tema común dentro de un contexto mayor, es una <section>.
¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta
Más contenido interesante
