En HTML5 es un problema común no saber cuando usar el elemento section y article. En este post trataré de explicar cuando se debería usar cada elemento.
Elemento article
Puede considerarse una forma especializada o específica de <section>. Su finalidad es almacenar contenido que podría estar solo, fuera del contenido que le rodea, como el post de un blog.
Los tipos de contenido que encajan con <article>
- Video acompañado de una descripción.
- Artículos de noticias.
- Comentarios de un blog.
|
1 2 3 4 5 6 7 8 |
<article> <h2>Elementos interesantes de HTML5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu ex erat...</p> </article> <article> <h2>Que función tiene DOCTYPE?</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu ex erat...</p> </article> |
Elemento section
Es el más genérico de todos los elementos estrcuturales, pretende agrupar contenido que está relacionado. Sin embargo, esto no quiere decir que sea un contenedor genérico como un <div>. El contenido debe estar relacionado.
El elemento <section> podría usarse para contener los 2 elementos de <article> que hemos hecho.
|
1 2 3 4 5 6 7 8 9 10 |
<section> <article> <h2>Elementos interesantes de HTML5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </article> <article> <h2>Que función tiene DOCTYPE?</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </article> </section> |
Pero eso no termina ahí, hay que tener en cuenta que el elemento <section> es apropiado si los elementos que contiene son listados explícitamente en el esquema del documento.
El esquema del documento se refiere al modelo seccionado de contenido en HTML5, donde cada nueva estructura crea su propio esquema. Dicho esquema se genera con las cabeceras (h1-h6) contenidos en cada elemento.
Esto quiere decir que section debe tener su propia cabecera al igual que la tienen los elementos <article>.
|
1 2 3 4 5 6 7 8 9 10 11 |
<section> <h1>Artículos sobre HTML5</h1> <article> <h2>Elementos interesantes de HTML5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </article> <article> <h2>Que función tiene DOCTYPE?</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> </article> </section> |
El elemento <section> al ser el padre de otros elementos, le corresponde una cabecera mayor, en este caso <h1>.
Conclusion
La diferencia entre section y article puede ser confusa, por tanto diré unas guías que pueden serte de ayuda:
- No usar section simplemente por estilo. Usa <div> y <span>.
- No usar section si los elementos <header>, <footer>, <aside> o <article> son más apropiados semánticamente para tu contenido.
- No usar section a no ser que el contenido tenga una cabecera natural, que no esté forzado.
Y aquí finaliza el tutorial de hoy, espero que le saquéis provecho. A disfrutar del finde 🙂