Si crees que la etiqueta <article> en HTML solo sirve para envolver artículos, tenemos que hablar muy seriamente.
Ya que esta etiqueta sirve para contener muchas otras cosas.
Antes de nada, recuerda que este vídeo forma parte de la serie del diccionario HTML de DropCoding donde aprenderemos este lenguaje desde cero.
Recuerda que tienes los comentarios de abajo para escribir cualquier duda o sugerencia que tengas.
Y ahora, vamos al lío.
¿Qué es la etiqueta «article» en HTML?
Muy bien, lo primero, ¿qué es esto de la etiqueta <article>?
La etiqueta <article> sirve para representar un contenido independiente dentro de un documento HTML.
Vale, de acuerdo, pero ¿qué es esto de un contenido independiente?
Pues significa que el contenido dentro de la etiqueta <article> tiene sentido por sí mismo y es comprensible fuera del contexto del resto de la página.»
Ejemplo de uso etiqueta "article»
Un ejemplo típico es el uso de esta etiqueta en artículos de blog, o también se puede encontrar a menudo en publicaciones de foros en la sección de comentarios, es decir, envolver cada comentario con una etiqueta <article>.
Incluso podemos envolver widgets o componentes de la misma página.
En definitiva, cualquier cosa que pueda tener un contexto independiente o diferente y que tenga un sentido comprensible evidentemente.
Y si esta explicación te ha parecido un poco abstracta, no te preocupes porque vamos a ver un ejemplo y lo entenderás perfectamente.»
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de uso de la etiqueta article</title>
<!-- Aquí irían los estilos CSS -->
</head>
<body>
<h1>Título del Blog</h1>
<article>
<h2>Título del Artículo 1</h2>
<p>Autor: Autor del Artículo 1</p>
<p>Fecha: Fecha del Artículo 1</p>
<img src="imagen1.jpg" alt="Imagen del Artículo 1">
<p>Descripción breve del Artículo 1...</p>
<p><a href="articulo1.html">Continuar leyendo</a></p>
</article>
<article>
<h2>Título del Artículo 2</h2>
<p>Autor: Autor del Artículo 2</p>
<p>Fecha: Fecha del Artículo 2</p>
<img src="imagen2.jpg" alt="Imagen del Artículo 2">
<p>Descripción breve del Artículo 2...</p>
<p><a href="articulo2.html">Continuar leyendo</a></p>
</article>
<article>
<h2>Título del Artículo 3</h2>
<p>Autor: Autor del Artículo 3</p>
<p>Fecha: Fecha del Artículo 3</p>
<img src="imagen3.jpg" alt="Imagen del Artículo 3">
<p>Descripción breve del Artículo 3...</p>
<p><a href="articulo3.html">Continuar leyendo</a></p>
</article>
</body>
</html>
Diferencia entre etiqueta <article>, <section> y <div>
Entonces, es posible que llegados a este punto te estés preguntando ¿qué diferencia hay entre usar la etiqueta <article> y otro tipo de etiqueta como por ejemplo <section> o <div>?
Pues muy fácil, te lo explico en un momento. La etiqueta <section>, por ejemplo, se podría usar para agrupar contenido que está relacionado de forma lógica en un documento.
Esto puede parecer bastante ambiguo porque realmente lo es, o sea, podemos utilizar la etiqueta <section> básicamente para lo que queramos de acuerdo. Un uso típico es por ejemplo cuando estás haciendo distintas secciones dentro de un documento.
Por ejemplo, al principio tenemos la sección de Hero, luego la sección de una galería de imágenes, luego la sección de categorías, luego otra sección del formulario de contacto y así con todas las secciones que nosotros queramos.
El uso del <div> ya sabéis que es como un comodín, podemos envolver básicamente cualquier cosa que nosotros queramos, pero perdería pues un poquito esa semántica a ojos de los motores de búsqueda y otros robots.
Y luego, en relación a la etiqueta <article>, pues su uso es básicamente el que hemos visto anteriormente. Esta etiqueta tiene sentido cuando la utilizamos para envolver contenido que es independiente o que tiene sentido por sí solo.
Consejos y algunas conclusiones finales
Un consejito final que os doy es que no abuséis de este tipo de etiquetas y las deberíamos utilizar solo cuando tenga sentido. Así que ya sabes, hasta aquí la lección. Espero que te haya gustado. Recuerda que si tienes alguna duda o tienes alguna sugerencia puedes dejarla en los comentarios y nos vemos en el próximo vídeo.
¡Bye!