son - Sección vs Artículo HTML5

section html5 ejemplos

Question

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

Aclamaciones

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

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

Answer 1

Artículo y Sección son ambos elementos semánticos de HTML5. La sección es un elemento de bloque como div, pero relevante para nuestro contenido de página web. El artículo también es de nivel de bloque, pero contiene es irrelevante para su página web. Como la información del autor, Publicidad, etc. Tanto el artículo como la sección incluyen los elementos del encabezado h2-h6.

Answer 2

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 etiqueta <article> (del mismo enlace W3 arriba):

<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 elementos de contenido individual individuales relacionados, como publicaciones de blog, 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 leerlos por sí mismo, y tendría sentido sindicarlos como elementos separados en una fuente RSS, entonces <article> es adecuado para marcar hacia arriba.

En nuestro ejemplo, <section id="main"> contiene entradas de blog. Cada entrada de blog sería adecuada para sindicar como un elemento en una fuente RSS, y tendría sentido cuando se lee por sí misma, 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 artículos, donde tiene sentido hacerlo. Por ejemplo, si cada una de estas publicaciones de blog tiene una estructura consistente de secciones distintas, entonces podría poner secciones dentro de sus artículos también. Podría verse algo como esto:

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

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

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

Answer 3

Me gusta seguir con el significado estándar de las palabras utilizadas: un article se aplicaría a, bueno, artículos. Definiría publicaciones de blog, documentos y artículos de noticias como articles . Por otro lado, las secciones se referirían a los elementos de diseño / ux: sidebar, header, footer serían secciones. Sin embargo, esta es toda mi propia interpretación personal: como usted señaló, la especificación de estos elementos no está bien definida.

Respaldando esto, w3c define un elemento de article como una sección de contenido que puede mantenerse independiente por sí misma. Una publicación de blog podría funcionar por sí misma como un elemento de contenido valioso y consumible. Sin embargo, un encabezado no lo haría.

Here hay un interesante artículo 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 probar y usar el elemento que más te guste en realidad 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 "autónomo". 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 varios artículos dentro de una sección, puede tener varias secciones dentro y 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.

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

Answer 4

Mi interpretación es: pienso 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.

Answer 5

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

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 los 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 principal de un sitio web podría dividirse en secciones para una introducción, noticias e información de contacto.

Nota : Se alienta a los autores a utilizar el elemento de artículo en lugar del elemento de sección cuando sería lógico sindicar el contenido del elemento.

Y para el Article

El elemento de artículo representa una composición autónoma en un documento, página, aplicación o sitio y que, en principio, es distribuible independientemente o reutilizable, por ejemplo, en sindicación. Puede ser una publicación de foro, una revista o un artículo de periódico, una entrada de blog, un comentario enviado por el usuario, un artilugio o artilugio interactivo o cualquier otro elemento de contenido independiente.

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

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

El elemento de artículo representa una composición completa, o independiente, en un documento, página, aplicación o sitio y que, en principio, es distribuible independientemente o reutilizable, por ejemplo, en sindicación. Puede ser una publicación de foro, una revista o un artículo de periódico, una entrada de blog, un comentario enviado por el usuario, un artilugio o artilugio interactivo o cualquier otro elemento de contenido independiente.

Además, discusión en la lista de correo HTML pública sobre el article en January y February de 2013.

Answer 6

Una sección es básicamente un contenedor para h1 (u otras etiquetas h ) y el contenido que corresponde a esto. Un article es esencialmente un documento dentro de su documento que se repite o paginado ... 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.

Answer 7

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

Ahora, no estoy seguro de lo que tienes en tus videos, noticias, etc., pero aquí hay un ejemplo (no hay REAL verdadero o incorrecto, solo una guía sobre 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 DEBEN estar dentro de los artículos. Pueden estar en el cuerpo de un documento, pero yo uso secciones en el cuerpo, cuando el documento completo 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.

Answer 8

también, para el contenido sindicado "Se alienta a los autores a utilizar el elemento del artículo en lugar del elemento de la sección cuando sería lógico sindicar el contenido del elemento".

Answer 9

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í mismo.

• El artículo tiene su propio significado completo.