Foros del Web » Creando para Internet » HTML »

Diferencia entre section y article en html5

Estas en el tema de Diferencia entre section y article en html5 en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/01/2015, 09:46
 
Fecha de Ingreso: noviembre-2012
Mensajes: 76
Antigüedad: 11 años, 7 meses
Puntos: 3
Diferencia entre section y article en html5

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!
  #2 (permalink)  
Antiguo 30/01/2015, 11:27
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 7 meses
Puntos: 208
Respuesta: Diferencia entre section y article en html5

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!

Última edición por fede5426; 30/01/2015 a las 11:37
  #3 (permalink)  
Antiguo 01/02/2015, 10:30
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 4 meses
Puntos: 1826
Respuesta: Diferencia entre section y article en html5

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.
  #4 (permalink)  
Antiguo 02/02/2015, 05:26
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Diferencia entre section y article en html5

Cita:
Iniciado por Rafael Ver Mensaje
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.
__________________
(:
  #5 (permalink)  
Antiguo 02/02/2015, 11:17
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 4 meses
Puntos: 1826
Respuesta: Diferencia entre section y article en html5

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)
  #6 (permalink)  
Antiguo 03/02/2015, 22:43
Avatar de hackjose  
Fecha de Ingreso: abril-2010
Ubicación: Edo Mexico
Mensajes: 1.178
Antigüedad: 14 años, 3 meses
Puntos: 131
Respuesta: Diferencia entre section y article en html5

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

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
  #7 (permalink)  
Antiguo 04/02/2015, 15:47
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 4 meses
Puntos: 998
Respuesta: Diferencia entre section y article en html5

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:
Ver original
  1. <h1>Opinión</h1>
  2. <h1>Noticias</h1>


- Si se usa dentro de un article, sirve para marcar las diferentes secciones de dicho artículo.
Código HTML:
Ver original
  1. <h1>Título del artículo</h1>
  2. <h1>SubTítulo del artículo</h1>
  3. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
  4. <h1>SubTítulo del artículo</h1>
  5. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #8 (permalink)  
Antiguo 05/02/2015, 05:46
 
Fecha de Ingreso: noviembre-2012
Mensajes: 76
Antigüedad: 11 años, 7 meses
Puntos: 3
Respuesta: Diferencia entre section y article en html5

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!
  #9 (permalink)  
Antiguo 05/02/2015, 17:24
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 22 años, 4 meses
Puntos: 998
Respuesta: Diferencia entre section y article en html5

- 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)
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #10 (permalink)  
Antiguo 05/02/2015, 18:57
 
Fecha de Ingreso: noviembre-2012
Mensajes: 76
Antigüedad: 11 años, 7 meses
Puntos: 3
Respuesta: Diferencia entre section y article en html5

Cita:
- si solo tienes un H1 dentro, no es necesario tener un HEADER, es algo redundante
Cierto!

Cita:
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.

Cita:
- 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???

Última edición por cybervandal; 05/02/2015 a las 19:00 Razón: Añadir el Posdata

Etiquetas: article, diferencia, html5, section
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:51.