Necesito saber la diferencia entre una etiqueta article y una etiqueta section en html5 y cuando utilizarlo para que mi pagina sea semánticamente correcta.
2 respuestas
La etiqueta <section>
:
La etiqueta sección define las secciones de un documento, como capítulos, encabezados, pies de página o cualquier otra sección del documento.
De acuerdo con la documentación HTML5 del W3C:
"Una sección es un agrupamiento temático de contenido, normalmente con un encabezado".
Ejemplo:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
La etiqueta <article>
:
La etiqueta del article especifica contenido independiente y autónomo.
Un artículo debe tener sentido por sí mismo y debería ser posible Distribuirlo independientemente del resto del sitio.
Fuentes potenciales para el elemento artículo:
- Posts de foro
- Blog post
- Noticias
- Comentarios
Ejemplo:
<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>
</article>
¿Anidamiento <article>
en <section>
o viceversa?
El elemento <article>
especifica un contenido independiente y autónomo.
El elemento <section>
define la sección en un documento.
¿Podemos utilizar las definiciones para decidir cómo anidar esos elementos? ¡No podemos!
Así, en Internet, encontrará páginas HTML con elementos <section>
que contienen elementos <article>
y <article>
que contienen elementos <section>
.
También encontrará páginas con elementos que contienen elementos <section>
y elementos <article>
que contienen elementos <article>
.
Ejemplo para un periódico: Los artículos deportivos en la sección de deporte, pueden tener una sección técnica en cada artículo.
Básicamente estas etiquetas son elementos semánticos y la única diferencia real entre ellos es la legibilidad y la preferencia de diseño.
Más información:
- http://www.w3schools.com/html/html5_semantic_elements.asp
- http://www.w3schools.com/tags/tag_article.asp
- http://www.w3schools.com/tags/tag_section.asp
Esto es una traducción.
Sección: Elemento que representa una sección genérica (parte o pieza) de un documento.Ejemplo: Capítulos, Pestañas, Secciones y mas ... Articulo: Elemento que representa un objeto completo en su composición y es en principio independiente y re utilizable. Ejemplo: Blog, Post de revistas, Paginas de periódico y diferentes gadgets.
Como sugerencia se usa sección para separar áreas que conforman un solo objeto mayor o de un solo tema, y se usa articulo cuando el objecto es un ente independiente y completo (o pensamos re usarlo).
Funcionalmente, ambos tags hacen lo mismo , pero semanticamente es mejor utilizar el adecuado para fines de SEO, Optimizacion, y Mantenimiento de Codigo