Diferencia entre section y article en html5

[cybervandal]

No me queda claro como usuarlos, cual engloba al otro.
He googleado y en unos sitios te pone una cosa y en otros justo la contraria.
Cual seria la opción correcta:

<section>
<header><h1>Listado de noticias</h1></header>
<article><header><h2>Noticia 1</h2></header></article>
<article><header><h2>Noticia 2</h2></header></article>
<article><header><h2>Noticia 3</h2></header></article>
</section>

o:

<article>
<header><h1>Listado de noticias</h1></header>
<section> <header><h2>Noticia 1</h2></header> </section>
<section> <header><h2>Noticia 2</h2></header> </section>
<section> <header><h2>Noticia 3</h2></header> </section>
</article>

Saludos!

[fede5426]

Busque en http://www.w3schools.com/ y esto es lo que dice:

SECTION:

El elemento <section> define una sección de un documento.

De acuerdo con la documentación HTML5 del W3C: "Una sección es una agrupación temática de los contenidos, por lo general con un título."

La página principal de un sitio Web puede ser dividida en secciones para la introducción, el contenido y la información de contacto.


ARTICLE:

El elemento <article> especifica el contenido independiente, autónomo.

Un artículo debe tener sentido por sí mismo, y ​​debe ser posible leerlo de forma independiente del resto del sitio web.

Ejemplos en los que se puede utilizar un elemento <article>:

- Mensaje Foro
- Post de blog
- Artículo de periódico

JERARQUIZACIÓN:

En el estándar HTML5, el elemento <article> define un bloque completo, autónomo de elementos relacionados.

El elemento <section> se define como un bloque de elementos relacionados.

¿Podemos usar las definiciones para decidir cómo anidarlos? No, no podemos!

En Internet, se encontrará con páginas HTML donde hay etiquetas <section> que contienen dentro etiquetas <article> y viceversa.

También encontrará paginas donde etiquetas <section> contienen dentro otras etiquetas <section>, o etiquetas <article> que a su vez contienen <article>.




Espero que te sirva! a mi me sirvió porque despues de leer tu mensaje quedé con la misma duda jaja

Saludos!

[Rafael]

Yo no te voy a referenciar ningún artículo técnico de html ni programación ni nada por el estilo... Sino a tu sentido común.

En un perdiódico ¿No tenías una sección "Deportes" y ahí varios artículos, algún partido, resultados de carreras de autos, etc.?

Yo de ahí sacaba mis conclusiones.

[pzin]

Iniciado por Rafael

Yo no te voy a referenciar ningún artículo técnico de html ni programación ni nada por el estilo... Sino a tu sentido común.

En un perdiódico ¿No tenías una sección "Deportes" y ahí varios artículos, algún partido, resultados de carreras de autos, etc.?

Yo de ahí sacaba mis conclusiones.

Aunque en artículo pueda contener una sección, o un artículo pueda contener otros artículos (caso de comentarios relativos a un artículo por ejemplo).

La verdad es que son elementos ambiguos, aunque yo entiendo que el caso de un artículo deba de ser contenido más específico.

[Rafael]

Digo, de que se puede, se puede.

De que también se puede "Yo vivo mi vida de cabeza y estoy aprendiendo diseño web, ¿Puedo poner el footer primero y hasta abajo el header?"



De que también se puede se puede.

Por esa misma vaguedad, creo que es interesante recordar de dónde salieron los tags correspondientes, y tomar una postura. Al final para qué perder el tiempo en esos menesteres cuando seguramente ya perdieron años discutiéndolo en el w3 o donde sea.

Un error muuuuy extendido, ya he comentado que es el hacer classitis. Un div class aquí y otro div id por allá, y este span también tiene un class y así me voy.

Querer anidar sections dentro de articles dentro de sections dentro de... es perder la big picture... (imho) (Lo mismo con el figure)

[hackjose]

Los 2 son opción correcta, dependerá de tu contenido

El elemento <section> es para agrupar un tema, aparte digamos que una forma de saber si debes usar un <section> es acerte la pregunta
¿Este contenido va a tener un titulo? Si la respuesta es si entonces ocupa el <section> ya que el objetivo de usar <section> es poner ese contenido en el outline

El elemento <article> es para sindicar contenido, en otras palabras contenido muy util

Puedes anidarlos de muchas formas

por ejemplo

Código HTML:

<section>
 
<section></section>
<section></section>
 
</section>
 

Los <section> internos debe agrupar un cierto tema por completo cada uno pero al final hay una relación de tal forma que entre los 2 forman el tema para el <section> externo, algo importante(casi obligatorio) es que tus <section> deben tener un titulo para que ese contenido se coloque en el outline, pongas o no pongas titulo ese contenido aparecera en el outline, asi que lo mejor es que pongas un titulo

Hablando vagamente nos interesa el outline porque lo usa google para saber que contenido hay en nuestra web

Lo ideal es que propongas algo ya real y ya veremos que consejos surgen, así aprendemos todos

Saludos

[webosiris]

los SECTION pueden usarse dentro y fuera de ARTICLE. Sin embargo, el sentido común indica que deben de disponer de un título explícito, pues son elementos que marcan el outilne.

- Si se usan fuera de article, se pueden usar para marcar diferentes secciones genéricas de la web. Sin embargo SECTION NO ES UN REMPLAZO DE DIV. Si necesitas un elemento solo para darle estilo a algo, utiliza div.

Incluso pueden contener articles. Por ejemplo si la web dispone de diferentes artículos separados en 2 categorías (Opinión y Noticias), se puede hacer de la siguiente forma:

Código HTML:

<section>
<h1>Opinión</h1>
<article>...</article>
<article>...</article>
<article>...</article>
</section>
<section>
<h1>Noticias</h1>
<article>...</article>
<article>...</article>
<article>...</article>
</section>
 

- Si se usa dentro de un article, sirve para marcar las diferentes secciones de dicho artículo.

Código HTML:

<article>
<h1>Título del artículo</h1>
<section>
<h1>SubTítulo del artículo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</section>
<section>
<h1>SubTítulo del artículo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</section>
</article>
 

[cybervandal]

Me ha quedado bastante claro o eso creo... Al único que no entendí bién al principio es a Rafael pero después de leer el mensaje un par de veces más entendí lo que quiso decir.

Os pongo un ejemplo practico de como he entendido la forma en como lo tengo que hacer. Mis webs son tipo tube. Asi que adjunto una imagen de una web estructurada similarmente a las mias para que quede mas claro.



Asi pues una vez leidos vuestros comentarios yo lo haría de esta forma:

<section>
<header><h1>Trending</h1></header>
<article><h2>Video 1</h2></article>
<article><h2>Video 2</h2></article>
<article><h2>Video 3</h2></article>
<article><h2>Video 4</h2></article>
etc...
</section>

*Me sale la siguiente duda: h1 o h2 en los videos? pues ahora están englobados en article

y una vez clicaran en un video y fueran a la pantalla del reproductor:

<article>
<h1>Titulo Video 1</h1>
<video>embed</video>
<p>descripción, tags, etc...</p>
</article>

<section>
<header><h1>Videos relacionados</h1></header>
<article><h2>Video 1</h2></article>
<article><h2>Video 2</h2></article>
<article><h2>Video 3</h2></article>
<article><h2>Video 4</h2></article>
etc...
</section>

Veis la estructura correctamente, ¿Lo haríais así?
Gracias de nuevo!

[webosiris]

- si solo tienes un H1 dentro, no es necesario tener un HEADER, es algo redundante
- en los article pueden ser h1 u h2, da bastante igual mientras seas coherente, pues en html5 lo que importa en realidad es el outline
- los videos relacionados yo los pondría dentro de un ASIDE (no SECTION) y dentro del ARTICLE (pues son videos relacionados a ese artículo en concreto, no a todo el sitio)

[cybervandal]

- si solo tienes un H1 dentro, no es necesario tener un HEADER, es algo redundante

Cierto!

en los article pueden ser h1 u h2, da bastante igual mientras seas coherente, pues en html5 lo que importa en realidad es el outline

La verdad el HTML5 para mi es importante por razones de SEO, además de por estructurarla bién pero lo cierto es que mi web se va a ver igual visualmente que antes del HTML5.
Entonces mi duda del h1 viene porque antes del HTML5 se recomendaba un único h1 por pagina y no sé si ahora con la entrada de nuevas etiquetas los robots son capaces de distinguir las distintas zonas gracias al header, section, article, footer etc... y ya no es una cosa a tener en cuenta lo de un único h1 por pagina o por lo contrario lo sigue siendo.

- los videos relacionados yo los pondría dentro de un ASIDE (no SECTION) y dentro del ARTICLE (pues son videos relacionados a ese artículo en concreto, no a todo el sitio)

Me parece lógico lo que dices, nobstante parece ser que yo lo había entendido mal la etiqueta ASIDE, pensaba que era para contenido no relacionado y lo estaba poniendo en zonas como la publicidad, ¿es incorrecto verdad? ¿Alguna etiqueta para contenido como la publicidad, un calendario o cosas que realmente no tienen nada que ver?

PD: se me olvidaba, a que te refieres con el outline??? que este bién estructurado???