Entender y diferenciar las etiquetas <section> y <article>
Diferenciar entre la etiqueta <section> y <article> de HTML
La diferencia entre las etiquetas HTML <section> y <article> puede ser confusa para muchos desarrolladores web y no se utilzan correctamente. Entender las diferencias entre estas dos etiquetas HTML puede mejorar mucho la organización y la semántica del contenido en un sitio web, sobre todo para los motores de búsqueda y posicionamiento SEO, ya que les hacen entender cuál es la función de cada parte de la página web.
La etiqueta <section>
La etiqueta <section> se utiliza para agrupar contenido relacionado temáticamente. Es decir, una sección de contenido que tiene un propósito o tema en común. Dentro de una sección, puede haber otros elementos como encabezados, párrafos, imágenes y listas.
Imagina un programa de televisión que tiene diferentes secciones: "en esta sección vamos a hablar de este tema", "ahora cambiamos de sección y vamos a debatir sobre esta noticia", es decir, se abre una sección, se muestra todo su contenido y se cierra. Un buen ejemplo en Internet sería un sitio web de noticias, donde se pueden usar secciones para agrupar artículos sobre deportes, entretenimiento, noticias internacionales etcétera.
La etiqueta <article>
La etiqueta <article> se utiliza para agrupar contenido independiente, como un artículo de noticias, una publicación de blog o una reseña de producto. Esta etiqueta se utiliza para separar claramente el contenido específico de un elemento del resto del contenido de la página y es útil para mejorar la accesibilidad y la legibilidad del sitio web.
Un artículo debe ser capaz de existir independientemente del resto del contenido en la página. En otras palabras, si se eliminara el artículo, el resto del contenido de la página seguiría siendo útil y significativo. Por ejemplo, si una página web tiene una sección de blog, cada entrada del blog podría estar contenida en su propio <article> para separarla del resto del contenido de la página. En este caso, el <article> contendría todo el contenido específico de ese post, como el título, el autor, la fecha de publicación, el contenido en sí y cualquier elemento adicional, como etiquetas o comentarios. Si se elimina el contenido del <article>, la página web sigue teniendo sentido, simplemente ha perdido un trozo de contenido.
¿Cómo usar las etiquetas <section> y <article> correctamente?
Una forma de comparar estas dos etiquetas es pensar en la etiqueta <section> como un capítulo de un libro y la etiqueta <article> como un artículo en ese capítulo. Un capítulo puede contener varios artículos, cada uno de los cuales es una entidad independiente. Es decir, una sección contiene artículos.
Se puede complicar un poco diciendo que puede haber diferentes secciones en un artículo, es decir, un <article> puede contener <section>. Para aclararlo y hacerlo entender mejor hay que decir que la forma en que un <article> contiene un <section> es distinta a la forma en que un <section> contiene un <article>.
Imagina, por ejemplo, un artículo sobre yoga. Un artículo titulado "Los beneficios del yoga" podría tener secciones diferenciadas como "los beneficios para la salud", "los beneficios mentales" y "los diferentes tipos de yoga". Cada una de estas secciones se podría encapsular en una etiqueta <section> dentro de la etiqueta <article>.
En resumen, en general las secciones agrupan contenido del mismo tema y contienen artículos. Los artículos pueden (o no) tener varias secciones que agrupan el contenido del artículo en partes diferentes relacionadas por tema.
Otra forma de diferenciar entre <section> y <article> es considerar cómo se relacionan entre sí. Por ejemplo, en un sitio web de noticias, un artículo puede pertenecer a una sección específica, como deportes, pero también puede aparecer en otras secciones como entretenimiento o noticias, por ejemplo un artículo que habla de alimentación deportiva aparecerá en la sección de deportes, sección de cocina y sección de salud.
Es importante tener en cuenta que el uso adecuado de estas etiquetas puede mejorar la accesibilidad y la indexación de los motores de búsqueda. Si un motor de búsqueda encuentra un sitio web con múltiples secciones y artículos claramente definidos, puede entender la estructura del sitio y hacer coincidir mejor las consultas de búsqueda con el contenido relevante, sobre todo para crear rich snippets y mostrar preguntas frecuentes.
En resumen, la etiqueta <section> se utiliza para agrupar contenido relacionado temáticamente, mientras que la etiqueta <article> se utiliza para agrupar contenido autónomo y completo. Ambas etiquetas pueden mejorar significativamente la organización y la semántica del contenido en un sitio web si se usan de manera adecuada.
¿Cómo usar las etiquetas <section> y <article> correctamente para mejorar el SEO de la página web?
Las etiquetas <section> y <article> pueden ayudar a mejorar la estructura de un sitio web y, por lo tanto, mejorar el SEO. Al usar estas etiquetas de manera adecuada, se puede crear una estructura lógica y coherente para el contenido de una página web.
Como se ha dicho anteriormente, la etiqueta <section> se utiliza para dividir el contenido en secciones temáticas. Por ejemplo, si un sitio web trata sobre recetas de cocina, se podría utilizar <section> para dividir las secciones de "entrantes", "platos principales" y "postres". Cada sección se podría identificar con un encabezado correspondiente, como <h1>, <h2> o <h3>.
La etiqueta <article> se utiliza para identificar piezas de contenido independientes y completas, como artículos de noticias o publicaciones de blog. Dentro de cada <article>, se puede utilizar la etiqueta <section> para dividir el contenido en secciones temáticas.
Al utilizar correctamente estas etiquetas, los motores de búsqueda pueden entender mejor la estructura del contenido y cómo se relacionan las diferentes secciones y artículos entre sí. Esto puede ayudar a mejorar la visibilidad del sitio web en los resultados de búsqueda y hacer que el contenido sea más fácil de entender para los usuarios, y mejorar los rich snippets, reseñas y preguntas frecuentes mostradas por los buscadores.
En resumen, utilizar las etiquetas <section> y <article> de manera adecuada puede ayudar a mejorar la estructura de un sitio web y mejorar el SEO al hacer que el contenido sea más fácil de entender y de indexar para los motores de búsqueda.