Quiero empezar esta lección con una pequeña confesión:
He abusado muchas veces de la etiqueta blockquote.
Sí, ya lo he dicho.
¿Por qué he utilizado tanto esta etiqueta de HTML?
Pues porque tiene un uso específico y, además, es muy visual. Tal y cómo veremos a continuación.
Por cierto, este vídeo forma parte de la serie del diccionario HTML que hemos hecho en el canal, donde aprenderás sobre cada una de las etiquetas de este lenguaje.
Recuerda que si tienes alguna duda, puedes dejarla en los comentarios.
¿Qué es la etiqueta blockquote?
El origen del nombre blockquote proviene de las palabras en inglés «block», que significa bloque, y «quote», que significa citar.
Si juntamos ambas palabras, nos quedaría algo así como «cita en bloque».
Esta etiqueta en HTML se utiliza para mostrar una sección donde se cita de otra fuente externa. Es una excelente forma de destacar un fragmento de texto dentro de nuestro contenido, ya que es un elemento de bloque y ocupa todo el ancho de la sección.
Aunque muchos usuarios la utilizan para citar cualquier tipo de contenido, técnicamente, es decir, semánticamente, sirve para citar fuentes externas.
Ejemplo de uso blockquote
Para entender mejor, veamos un ejemplo.
Imagina que en nuestro editor de código, dentro del body, tenemos una cita blockquote con un texto que dice: «esto es un texto citado».
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Uso de Blockquote</title>
<style>
blockquote {
background-color: white;
padding: 10px;
border-left: 5px solid #ccc;
margin: 20px 0;
}
</style>
</head>
<body>
<blockquote cite="URL-de-la-fuente-externa">
Esto es un texto citado.
</blockquote>
</body>
</html>
Además, podemos añadir el atributo «cite» para pasar la URL de la fuente externa, aunque esto es opcional.
Al visualizarlo en el navegador, esta cita llevará unos estilos predefinidos, dependiendo del CMS o framework que estemos utilizando.
Con unos estilos básicos, podría tener un fondo blanco, un poco de padding y, en algunos casos, un borde a la izquierda o comillas delante y detrás.
Diferencia entre “blockquote” y “q”
Es normal confundirse entre las etiquetas <blockquote> y <q>.
Ambas se utilizan para crear citas en HTML, pero se aplican en diferentes contextos y tienen varias diferencias.
La etiqueta <blockquote> se usa para citar secciones más largas de texto, como párrafos enteros. Es un elemento de bloque, por lo que ocupará todo el ancho de la sección.
Por otro lado, la etiqueta <q> se utiliza para citar fragmentos de texto más cortos, integrándose directamente dentro del texto.
No es un elemento de bloque como blockquote.
Un pequeño consejo final: no abuses de estas citas de texto ¡La semántica de tu sitio te lo agradecerá!
Si tienes cualquier pregunta o sugerencia, no dudes en dejarla en los comentarios.
¡Nos vemos en la próxima lección! Adiós.