Sección vs Artículo HTML5
Tengo una página compuesta de varias "secciones" como videos, un suministro de noticias, etc.. Estoy un poco confundido cómo representar estos 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 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 etiqueta article ya que parece ser una etiqueta contenedor para elementos no relacionados que supongo que son mis "secciones". Sin embargo, el artículo actual de tagname parece ser bastante engañoso y aunque dicen que HTML5 se ha desarrollado con mayor consideración para las aplicaciones web , encuentro que muchas de las etiquetas están más centradas en el blog / basadas en documentos.
De todos modos gracias por sus respuestas parece ser bastante subjetivo.
9 answers
Parece que deberías envolver cada una de las "secciones" (como las llamas) en etiquetas <article> y entradas en el artículo en etiquetas <section>.
La especificación HTML5 dice (Sección):
El elemento section 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, normalmente con un encabezado. [...]
Los ejemplos de secciones serían capítulos, las varias páginas con pestañas en un diálogo con pestañas caja, o las secciones numeradas de una tesis. web la página de inicio del sitio podría dividirse en secciones para una introducción, noticias e información de contacto.
Nota: Se anima a los autores a utilizar el elemento article en lugar de elemento de sección cuando tendría sentido sindicar el contenido de elemento.
Y para El artículo
El elemento article representa una composición autónoma en un documento, página, aplicación o sitio y que es, en principio, distribuible de forma independiente o reutilizable, por ejemplo, en sindicación. Este podría ser una publicación en un foro, una revista o un artículo de periódico, una entrada de blog, un comentario enviado por el usuario, un widget interactivo o gadget, o cualquier otro elemento independiente de contenido.
Creo que lo que llaman "secciones" en el OP encajan en la definición de artículo, ya que puedo ver que son distribuibles de forma independiente o reutilizables.
Actualización: Algunos cambios menores de texto para article en el último borrador de los editores de para HTML 5.1 (cambios en cursiva):
El elemento article representa un completo, o autónomo, composición en un documento, página, aplicación o sitio y es decir, en principio, independientemente distribuible o reutilizable, por ejemplo, en sindicación. Esto podría ser una publicación en un foro, una revista o un periódico artículo, una entrada de blog, un comentario enviado por el usuario, un widget interactivo o gadget, o cualquier otro elemento independiente de contenido.
También, discusión en la lista de correo HTML Pública sobre article en Enero y Febrero de 2013.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-15 02:49:59
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 anterior):
<article>está relacionado con<section>, pero es claramente diferente. Considerando que<section>es para agrupar distintas secciones de contenido o funcionalidad,<article>es para contener individuos relacionados piezas de contenido independientes, como publicaciones de blog individuales, videos, imágenes o noticias. Piense en ello de esta manera - si usted 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 para sindicar como elementos separados en un RSS alimentación, entonces<article>es adecuado para marcarlos.En nuestro ejemplo,
<section id="main">contiene entradas de blog. Cada blog la entrada sería adecuada para sindicarse como un elemento en un feed RSS, y tendría sentido cuando se lee por sí solo, 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? Sin embargo, tenga en cuenta que también puede anidar secciones dentro artículos, donde tiene sentido hacerlo. Por ejemplo, si cada uno de estas publicaciones de blog tienen una estructura consistente de secciones distintas, entonces podrías poner secciones dentro 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-15 17:50:02
Usaría <article> para un bloque de texto que no está totalmente relacionado con los otros bloques de la página.
<section>, por otro lado, sería un divisor para separar un documento que tienen están relacionados entre sí.
Ahora, no estoy seguro de lo que tiene en sus videos, noticias, etc, pero aquí hay un ejemplo (no hay VERDADERO bien o mal, solo una guía 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 y cuando estén dentro de un bloque que los agrupa. 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.
Por ejemplo
<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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-26 00:39:17
Me gusta atenerme al significado estándar de las palabras utilizadas: Un article se aplicaría a, bueno, los artículos. Yo definiría entradas 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, todo esto es mi propia interpretación personal as como usted ha señalado, las especificaciones para estos elementos no están bien definidas.
Apoyando esto, el w3c define un elemento article como una sección de contenido que puede sostenerse independientemente por sí mismo. Una publicación de blog podría sostenerse por sí misma como un elemento de contenido valioso y consumible. 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 cualquier elemento que sienta que realmente representa lo que contiene.
Lo que es más problemático es que artículo y sección son muy similar. Todo lo que los separa es la palabra "autocontenidos". Decidir qué elemento usar sería fácil si hubiera algunos difíciles y reglas rápidas. En cambio, es una cuestión de interpretación. Puedes tener múltiples artículos dentro de una sección, puede tener varias secciones dentro y artículo, puede anidar secciones dentro de secciones y artículos dentro de las secciones. Depende de usted decidir qué elemento es el más semánticamente apropiado en cualquier situación.
Aquí es una muy buena respuesta a la misma pregunta aquí en SO
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:34:47
Sección
- Use esto para definir una sección de su diseño. Podría ser
mid,left,right,sucesivamente.. - Esto tiene un significado de conexión con algún otro elemento, en pocas palabras, es DEPENDIENTE.
Artículo
Use esto cuando tenga contenido independiente que tenga sentido por sí solo .
Artículo tiene su propio significado completo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-03 21:51:38
Una sección es básicamente una envoltura 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 se pagina...al igual que cada entrada de blog en su documento puede ser un artículo, o cada comentario en su documento puede ser un artículo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-27 21:41:20
También, para contenido sindicado "Se anima a los autores a usar el elemento article en lugar del elemento section cuando tendría sentido sindicar el contenido del elemento."
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-29 08:32:11
Mi interpretación es: Creo que YouTube tiene una sección de comentarios, y dentro de la sección de comentarios hay múltiples artículos (en este caso comentarios).
Así que una sección es como un div-container que contiene artículos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-12 03:55:11
El artículo y la sección son elementos semánticos de HTML5. La sección es un elemento de bloque como div, pero relevante para el contenido de nuestra 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 elementos de encabezado h2-h6.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-29 18:08:25