Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

HTML Conceptos Básicos de HTML Estructurar tu contenido Dividiendo Contenido con <article>, <nav> y <aside>

Guadalupe Favela
sello-máscara
.a{fill-rule:evenodd;}techdegree seal-36
Guadalupe Favela
Desarrollo Web Front End Graduado de Techdegree 22,044 Puntos

¿Cuál es la diferencia entre section y article?

Tengo problemas para entender la diferencia entre "<section>" y "<article>" cuando esencialmente hacen lo mismo?

Hola Guadalupe, la confusión podría ser una cuestión de lenguaje.

Para mí, veo <section> como áreas principales de la página, como la sección de contenido principal, la sección de barra lateral izquierda, la sección de encabezado o la sección de pie de página.

Mientras que veo <article> como una publicación de blog individual, y podemos tener muchos artículos/publicaciones en la sección principal (u otras secciones).

Entonces, si miramos esta comunidad, veo la lista de preguntas como la sección de preguntas y cada pregunta individual (o publicación) como un artículo.

Entonces, el objetivo es simplemente proporcionar capacidades de nombres adicionales para hacer que tu diseño sea más claro para las partes interesadas.

1 Respuesta

Hola,

El elemento section agrupa secciones de contenido relacionadas, por ejemplo, un grupo de entradas de blog. Se puede utilizar para significado semántico y marcado en tus páginas en lugar del elemento div genérico.

<section>
  Tu contenido agrupado dentro de section.
</section>

El elemento article describe piezas de contenido independientes. También puedes anidar el article dentro de una etiqueta section, o usarlo por sí solo.

<section>
  <article>
    Una pieza de contenido...
  </article>
  <article>
    Otra pieza de contenido...
  </article>
</section>
<article>
  Contenido independiente...
</article>