<section> o <article>, que está contenido en el cual

Question

Tratando de entender los nuevos elementos semánticos en HTML5.

¿Un <section> pertenece dentro de un <article> o es al revés? ¿Incluso importa?

Estoy buscando reestructurar un blog de WordPress.

Answer 1

Desde el HTML5 spec:

El elemento section representa una sección del documento o aplicación genérica. Una sección, en este contexto, es una agrupación temática de contenido, generalmente con un encabezado y posiblemente un pie de página.

y

El elemento article representa una sección independiente de un documento, una página o sitio. Puede ser una publicación en el foro, una revista o un artículo de periódico, una entrada de blog, un comentario enviado por el usuario o cualquier otro elemento independiente de contenido.

Así que yo diría que los elementos section y article pueden contener el otro elemento, si corresponde. Creo que su diagrama tiene sentido, aparte de los elementos de sección anidados:

El elemento de sección no es un elemento contenedor genérico. Cuando se necesita un elemento para el diseño o como una conveniencia para la creación de scripts, se alienta a los autores a usar el elemento div en su lugar. Una regla general es que el elemento de sección es apropiado solo si los contenidos del elemento se enumeran explícitamente en el esquema del documento.

¿Quizás use un <div> para el exterior?

Answer 2

Usaría div para el exterior y div para el interior, a menos que tenga un encabezado directamente dentro de la sección interior.

Ta

Rich

Ver http://html5doctor.com/the-section-element/ para obtener más información.

Answer 3

En el W3 wiki page about structuring HTML5, que dice:

<section>: Se utiliza para cualquiera de los artículos de grupo diferente en diferentes propósitos o temas, o para definir las diferentes secciones de un solo artículo.

Y a continuación, muestra an image que limpié:

También es importante saber cómo utilizar la etiqueta <article> (desde el mismo enlace W3 arriba):

<article> está relacionado con <section>, pero es muy diferente. Mientras que <section> es para agrupar secciones distintas de contenido o funcionalidad , <article> es para contener individuales piezas independientes relacionados de contenido, como entradas de blog individuales, videos, imágenes o noticias. Piénselo de esta manera: si tiene un número de elementos de contenido, cada uno de los cuales sería adecuado para leer en su propio , y tendría sentido sindicar como elementos separados en un feed RSS , entonces <article> es adecuado para marcándolos.

En nuestro ejemplo, <section id="main"> contiene entradas de blog. Cada blog entrada sería adecuado para la distribución como un elemento en un feed RSS, y tendría sentido si se lee por su cuenta, fuera de contexto, por lo tanto, <article> es perfecto para ellos:

<section id="main"> 
    <article> 
     <!-- first blog post --> 
    </article> 

    <article> 
     <!-- second blog post --> 
    </article> 

    <article> 
     <!-- third blog post --> 
    </article> 
</section> 

simple ¿eh? Tenga en cuenta que también puede anidar secciones dentro de los artículos , donde tiene sentido hacerlo. Por ejemplo, si cada una de estas publicaciones de blog tiene una estructura consistente de secciones distintas, entonces puede poner secciones dentro de sus artículos también. Podría parecer algo como esto:

<article> 
    <section id="introduction"> 
    </section> 

    <section id="content"> 
    </section> 

    <section id="summary"> 
    </section> 
</article> 

Answer 4

IMOO, que debe ser simple, tan simple como lo que la gente normal se dan por sentado. Si un simple nombre de etiqueta confunde a las personas, es un error. Para mí:

• Un <article>es un artículo. La gente comparte artículos. Cuando dice que algo es un artículo, espero que tenga un título , y tal vez un pequeño resumen también, así que puedo decidir leerlo o no. Si es interesante, se lo compartiré a mis amigos. Es autónomo.

• A <section>es una sección. Es una parte de cosas relacionadas. Básicamente, necesitarás otras secciones para obtener una imagen completa.

¿Por qué se pone un <section> dentro del <body>? Oh porque es parte del cuerpo; parte de mi sitio web Voy a poner mis artículos en esta parte.

¿Por qué pones un <section> dentro de un <section>? Porque es parte de esa sección.