Sección vs Artículo HTML5

Tengo una página compuesta de varias "secciones" como videos, una fuente de noticias, etc. Estoy un poco confundido sobre cómo representarlos con HTML5. Actualmente los tengo como HTML5 <section>, pero en una inspección posterior parece que serían la etiqueta más correcta <article>. ¿Alguien podría arrojar algo de luz sobre esto por mí?

Ninguna de estas cosas son publicaciones de blog o "documentos" en el verdadero sentido de la palabra, por lo que es difícil ver qué elemento aplicar.

Salud

EDITAR: He optado por usar la articleetiqueta ya que parece ser una etiqueta de contenedor para elementos no relacionados, que supongo que son mis "secciones". Sin embargo, el artículo de nombre de etiqueta real parece ser bastante engañoso y, aunque dicen que HTML5 se ha desarrollado con una mayor consideración para las aplicaciones web , creo que muchas de las etiquetas están más centradas en los blogs / documentos.

De todos modos, gracias por sus respuestas, parece ser bastante subjetivo.

En la página wiki de W3 sobre la estructuración de HTML5 , dice:

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

Y luego muestra una imagen que limpié:

También describe cómo usar la <article>etiqueta (desde el mismo enlace W3 anterior):

<article>está relacionado con <section>, pero es claramente diferente. Mientras que <section>es para agrupar distintas secciones de contenido o funcionalidad, <article>es para contener piezas de contenido independientes individuales relacionadas, como publicaciones de blog individuales, videos, imágenes o noticias. Piénselo de esta manera: si tiene varios elementos de contenido, cada uno de los cuales sería adecuado para leer por sí mismo y tendría sentido distribuirlos como elementos separados en un feed RSS, entonces <article>es adecuado para marcarlos.

En nuestro ejemplo, <section id="main">contiene entradas de blog. Cada entrada de blog sería adecuada para sindicarse como un elemento en una fuente RSS, y tendría sentido cuando se lea por sí solo, fuera de contexto, por <article>lo tanto, es perfecta para ellos:

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

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

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

Simple eh? Sin embargo, 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 también podría poner secciones dentro de sus artículos. Podría verse más o menos así:

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

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

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

Parece que debería envolver cada una de las "secciones" (como las llama) en <article>etiquetas y entradas en el artículo en <section>etiquetas.

La especificación HTML5 dice (Sección):

El elemento de sección representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática de contenido, generalmente con un encabezado. [...]

Ejemplos de secciones serían capítulos, las distintas páginas con pestañas en un cuadro de diálogo con pestañas o las secciones numeradas de una tesis. La página de inicio de un sitio web se puede dividir en secciones para una introducción, noticias e información de contacto.

Nota : Se alienta a los autores a usar el elemento del artículo en lugar del elemento de sección cuando tenga sentido sindicar el contenido del elemento.

Y para el artículo

El elemento del artículo representa una composición autónoma en un documento, página, aplicación o sitio y que, en principio, es distribuible o reutilizable independientemente, por ejemplo, en sindicación. Esto podría 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, un widget o gadget interactivo, o cualquier otro elemento de contenido independiente.

Creo que lo que llaman "secciones" en el OP se ajustan a la definición del artículo, ya que puedo ver que son distribuibles o reutilizables de forma independiente .

Actualización: algunos cambios menores de texto articleen el último borrador de editores para HTML 5.1 (cambios en cursiva):

El elemento del artículo representa una composición completa o autónoma en un documento, página, aplicación o sitio y que, en principio, es distribuible o reutilizable independientemente, por ejemplo, en sindicación. Esto podría 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, un widget o gadget interactivo, o cualquier otro elemento de contenido independiente.

Además, la discusión sobre la lista de correo HTML público acerca articleen enero y febrero de 2013.

Lo usaría <article>para un bloque de texto que no tiene ninguna relación con los otros bloques de la página. <section>, por otro lado, sería un divisor para separar un documento que esté relacionado entre sí.

Ahora, no estoy seguro de lo que tienes en tus videos, noticias, etc., pero aquí hay un ejemplo (no hay REAL correcto o incorrecto, solo una pauta de cómo uso estas etiquetas):

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

Como puede ver, las secciones siguen siendo relevantes entre sí, pero siempre que estén dentro de un bloque que las agrupe. Las secciones NO tienen que estar dentro de los artículos. Pueden estar en el cuerpo de un documento, pero yo uso secciones en el cuerpo, cuando todo el documento es un artículo.

p.ej

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

Espero que esto tenga sentido.

Me gusta seguir con el significado estándar de las palabras utilizadas: articlese aplicaría a, bueno, a los artículos. Definiría publicaciones de blog, documentos y artículos de noticias como articles. Las secciones, por otro lado, se referirían a elementos de diseño / ux: barra lateral, encabezado, pie de página serían secciones. Sin embargo, esta es toda mi interpretación personal, como usted señaló, la especificación de estos elementos no está bien definida.

Para respaldar esto, el w3c define un articleelemento como una sección de contenido que puede sostenerse de forma independiente. Una publicación de blog podría ser un elemento valioso y consumible de contenido. Sin embargo, un encabezado no lo haría.

Aquí hay un artículo interesante sobre la locura de un hombre al tratar de diferenciar entre los dos nuevos elementos. El punto básico del artículo, que también creo que es correcto, es tratar de usar el elemento que mejor sienta que realmente representa lo que contiene.

Lo que es más problemático es que el artículo y la sección son muy similares. Todo lo que los separa es la palabra "autocontenido". Decidir qué elemento usar sería fácil si hubiera algunas reglas duras y rápidas. En cambio, es una cuestión de interpretación. Puede tener múltiples artículos dentro de una sección, puede tener múltiples secciones dentro de un artículo, puede anidar secciones dentro de secciones y artículos dentro de secciones. Depende de usted decidir qué elemento es el más semánticamente apropiado en cualquier situación dada.

Aquí hay una muy buena respuesta a la misma pregunta aquí en SO

El diagrama de flujo a continuación puede ser de ayuda al elegir uno de los diversos elementos semánticos HTML5:

Sección

• Use esto para definir una sección de su diseño. Podría ser mid, left, right , etc ..
• Esto tiene un significado de conexión con algún otro elemento, en pocas palabras, es DEPENDIENTE.

Artículo

• Use esto donde tenga contenido independiente que tenga sentido por sí solo.

• El artículo tiene su propio significado completo.

Una sección es básicamente un contenedor para h1(u otras hetiquetas) y el contenido que corresponde a esto. Un articlees esencialmente un documento dentro de su documento que se repite o paginó ... como cada publicación de blog en su documento puede ser un artículo, o cada comentario en su documento puede ser un artículo.

también, para contenido sindicado "Se alienta a los autores a usar el elemento del artículo en lugar del elemento de sección cuando tenga sentido sindicar el contenido del elemento".

Mi interpretación es: creo que YouTube tiene una sección de comentarios, y dentro de la sección de comentarios hay varios artículos (en este caso, comentarios).

Entonces, una sección es como un contenedor div que contiene artículos.

Artículo y Sección son elementos semánticos de HTML5. La sección es una sección genérica de nivel de bloque de una página web, pero relevante para el contenido de nuestra página web. El artículo también es de nivel de bloque, pero se refiere a una publicación de blog individual, un comentario, de una página web.

Tanto el artículo como la sección deben incluir elementos de encabezado h2-h6.

Para una publicación de blog, use la siguiente sintaxis para el artículo y la sección.

<article>
         <h1>Heading 1</h1>
         <p>Article Description</p>
         <section id="sec1">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
         <section id="sec2">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
</article>