Etiqueta HTML <blockquote>
Aprende la etiqueta HTML <blockquote> para citar contenido de otra fuente, el atributo cite, la atribución con <footer> y el estilo.
La etiqueta HTML <blockquote> marca un bloque de texto que está citado de otra fuente — un artículo, un libro, un discurso, otro sitio web. Es un elemento semántico, no una herramienta de estilo: le indica a los navegadores, motores de búsqueda y tecnologías de asistencia que el contenido incluido es una cita, lo que puede afectar cómo se indexa la página y cómo se anuncia a los usuarios de lectores de pantalla.
Los navegadores renderizan <blockquote> con sangría izquierda y derecha de forma predeterminada. Esa sangría es una conveniencia, no el propósito del elemento. Usar <blockquote> únicamente para sangrar texto es un antipatrón — añade un significado falso al marcado. Cuando solo necesites sangría visual, usa CSS (margin, padding) en un <div> o <p> en su lugar.
<blockquote> es un elemento de bloque y puede contener otro contenido de bloque: párrafos, listas, encabezados y un <footer> para la atribución. Se coloca dentro de la etiqueta <body>.
Cuándo usar <blockquote> frente a <q>
Usa <blockquote> para citas largas e independientes que forman su propio bloque. Usa la etiqueta en línea <q> para citas cortas que fluyen dentro de una oración — los navegadores envuelven automáticamente el contenido de <q> en comillas, mientras que <blockquote> no añade comillas.
Para citas cortas en línea dentro de un párrafo, utiliza la etiqueta <q>.
Sintaxis
La etiqueta <blockquote> viene en pares. El contenido se escribe entre las etiquetas de apertura (<blockquote>) y cierre (</blockquote>).
Ejemplo de la etiqueta HTML <blockquote>:
Etiqueta HTML <blockquote>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
</body>
</html>El patrón de atribución: <blockquote> con <footer> y <cite>
Un <blockquote> sin más no le indica al lector quién dijo las palabras ni de dónde proviene la cita. La forma recomendada y accesible de atribuir una cita es acompañarla con un <footer> que contenga un <cite> visible para la fuente:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>
— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite>
</footer>
</blockquote>
</body>
</html>El elemento <cite> se renderiza en cursiva de forma predeterminada y nombra la obra que se está citando. Al ser parte del texto de la página, todos los lectores lo ven — a diferencia del atributo cite en <blockquote>, que se explica a continuación.
Ejemplo de la etiqueta HTML <blockquote> usada con la etiqueta <q>:
Ejemplo de la etiqueta HTML <blockquote> con la etiqueta HTML <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll</p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
<q cite="https://www.wikiquote.org/">He who can, does, he who cannot, teaches.</q>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| cite | URL | Especifica el documento o mensaje fuente del que se tomó la cita. El valor puede ser una URL relativa o absoluta. |
La etiqueta <blockquote> también admite los Atributos Globales y los Atributos de Evento.
El atributo cite solo es legible por máquinas
Es fácil confundir el atributo cite con el elemento <cite>. La limitación clave del atributo cite es que su URL no se muestra a los usuarios — los navegadores no lo renderizan como un enlace visible. Solo existe para las máquinas: motores de búsqueda, scripts y otras herramientas que leen el código fuente de la página.
<blockquote cite="https://example.com/source">
This URL is in the markup, but no reader will ever see or click it.
</blockquote>Por eso el atributo cite no es un sustituto de la atribución visible. Para acreditar una fuente a los lectores humanos, añade un elemento <cite> visible (típicamente dentro de un <footer>, como se muestra arriba). Usa ambos juntos: el atributo para las máquinas, el elemento para las personas.
Accesibilidad
Los lectores de pantalla generalmente no anuncian que un <blockquote> es una cita, e ignoran completamente el atributo cite. Por lo tanto, si lo único que marca tu texto como cita es la sangría o el atributo cite, un usuario sin visión no tiene forma de saber que está citado.
La conclusión práctica:
- Acompaña cada
<blockquote>con atribución visible (un<footer>y<cite>) para que la fuente forme parte del contenido legible. - No dependas únicamente del atributo
citepara comunicar la fuente. - Nunca uses
<blockquote>para contenido no citado solo para obtener la sangría — proporciona información engañosa a los usuarios de lectores de pantalla (y a los motores de búsqueda).
Cómo dar estilo a la etiqueta <blockquote>
De forma predeterminada, los navegadores sangran <blockquote> con márgenes. Un patrón común es eliminar ese valor predeterminado y añadir un borde izquierdo de color, relleno y cursiva para que la cita destaque:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blockquote {
margin: 1em 0;
padding: 0.5em 1.5em;
border-left: 4px solid #1c8d27;
background-color: #f4f4f4;
font-style: italic;
color: #333;
}
blockquote footer {
margin-top: 0.5em;
font-style: normal;
font-size: 0.9em;
color: #666;
}
</style>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite></footer>
</blockquote>
</body>
</html>Para controlar solo la sangría, usa la propiedad margin-left, margin-right o la propiedad abreviada margin.