Etiqueta blockquote en HTML: citas extensas y fuente
La etiqueta <blockquote> representa una sección citada de otra fuente. Sirve para separar un pasaje reproducido de un libro, una entrevista o un mensaje del texto que tú escribes alrededor. Úsala cuando la cita forme un bloque propio, por ejemplo, al comentar una respuesta de una entrevista. Este significado lo define el HTML Living Standard.
Ejemplo mínimo de blockquote
La siguiente frase es inventada para aprender la sintaxis. La URL de example.com es de demostración y no una fuente publicada de esa frase:
<blockquote cite="https://example.com/">
<p>Aprender consiste en practicar y revisar.</p>
</blockquote>El navegador muestra el párrafo como un bloque, normalmente con márgenes laterales. La URL de cite no aparece en pantalla ni se convierte automáticamente en un enlace. Tampoco se añaden comillas al texto como parte del marcado de <blockquote>.
Para probarlo, inserta el fragmento dentro del <body> del documento completo que aparece más adelante, sustituyendo su <figure>. No necesita JavaScript ni cargar la URL indicada en cite. En contenido publicado, reemplaza el texto y su procedencia por una cita comprobada.
Sintaxis y contenido permitido
Escribe tanto <blockquote> como </blockquote>: ninguna de estas etiquetas puede omitirse. El elemento admite contenido de flujo, como párrafos y listas, y se coloca donde ese contenido esté permitido, por ejemplo, dentro de <article>, <section>, <div> o <body>. No puede ir dentro de un <p>, que admite contenido de frase. Consulta las reglas de contenido de blockquote.
Usar <p> dentro de la cita ayuda a conservar sus párrafos; no es obligatorio envolver todo su texto en uno. Si reproduces dos párrafos, conserva dos elementos <p>. El nombre del autor y la referencia editorial deben quedar fuera de <blockquote>, porque esa atribución no forma parte del pasaje citado.
Blockquote y q: bloque o parte de una frase
Elige según el alcance de la cita. <blockquote> presenta un pasaje independiente; <q> marca palabras citadas dentro de una frase y el navegador genera sus comillas. No hay un número mínimo de palabras que obligue a usar uno u otro. La sangría tampoco decide cuál corresponde: puedes cambiarla con CSS. La definición de q en el estándar describe su función dentro del texto.
Por ejemplo, una frase inventada integrada en un comentario se puede escribir así:
<p>En nuestra entrevista ficticia, Elena dijo: <q>Empecé con una sola maceta.</q></p>No conviertas <blockquote> en <q> conservando párrafos dentro: <q> admite contenido de frase, no elementos <p>.
Ejemplo práctico: cita y atribución visible
Guarda este documento como cita.html, con codificación UTF-8, y ábrelo en el navegador. La entrevistada, el título y las respuestas son ficticios y originales de este ejemplo. La fuente del extracto está incluida en la propia página, por lo que no hace falta un servidor ni un archivo adicional.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo de cita de una entrevista ficticia</title>
</head>
<body>
<h1>Una huerta en el balcón</h1>
<p>Ejemplo didáctico: Elena y esta entrevista son ficticias.</p>
<figure>
<blockquote cite="#entrevista-ejemplo">
<p>Empecé con una sola maceta. Antes de comprar semillas,
observé cuántas horas de sol recibía el balcón.</p>
<p>Anotar lo que cambia cada semana me ayuda a cuidar las plantas.</p>
</blockquote>
<figcaption>
Elena, en la entrevista ficticia
<cite><a href="#entrevista-ejemplo">Una huerta en el balcón</a></cite>.
</figcaption>
</figure>
<section id="entrevista-ejemplo">
<h2>Entrevista ficticia completa</h2>
<p><strong>Pregunta:</strong> ¿Cómo empezaste tu huerta?</p>
<p><strong>Elena:</strong> Empecé con una sola maceta. Antes de comprar
semillas, observé cuántas horas de sol recibía el balcón.</p>
<p><strong>Pregunta:</strong> ¿Qué te ayuda a mantenerla?</p>
<p><strong>Elena:</strong> Anotar lo que cambia cada semana me ayuda
a cuidar las plantas.</p>
</section>
</body>
</html>Verás el extracto, su atribución y después la entrevista. Pulsa Tab para llegar al enlace del título y Enter para saltar a la entrevista completa. El fragmento #entrevista-ejemplo coincide con el id de esa sección y funciona también sin JavaScript.
<figure> agrupa la cita y su pie; <figcaption> contiene la atribución fuera de <blockquote>. El elemento <cite> marca únicamente el título de la obra, no el nombre Elena. El enlace lo crea <a href>, cuya sintaxis se explica en la guía de la etiqueta a. El estándar precisa el significado de cite como elemento.
Prueba a quitar el atributo cite: la apariencia y el enlace visible permanecen, pero desaparece esa información de procedencia. Si sustituyes ambas etiquetas de <blockquote> por <div>, el texto y el pie siguen presentes, pero el bloque deja de estar marcado como cita y puede perder sus márgenes predeterminados.
Atributos y accesibilidad
El atributo específico cite es opcional y su valor debe ser una URL válida; admite direcciones relativas, incluido el fragmento del ejemplo. No escribas en él el nombre del autor. Los atributos globales id, class y lang sirven, respectivamente, para identificar el elemento, seleccionarlo con CSS y declarar su idioma. Las propiedades CSS controlan su aspecto; la propiedad DOM cite permite consultar o cambiar la URL desde JavaScript. Referencia normativa de los atributos.
Mantén la atribución en texto visible y ofrece un enlace cuando haya una fuente que el lector pueda consultar. No dependas del atributo cite ni de la sangría para comunicar quién habla. <blockquote> tiene semántica nativa de cita según ARIA en HTML; no necesita añadir role="blockquote". Su anuncio puede variar entre navegadores y lectores de pantalla. El bloque de texto tampoco necesita recibir foco: el enlace ya permite navegar con teclado.
Dudas y errores frecuentes
¿Cite muestra la fuente?
El atributo cite no muestra una atribución. El elemento <cite> sí contiene texto visible, pero representa el título de una obra. Para presentar la procedencia, escribe el autor y el título fuera de la cita; añade <a> si quieres un enlace. Son tres funciones distintas.
¿Cómo hago una sangría sin citar a nadie?
Usa CSS sobre tu texto propio, sin envolverlo en <blockquote>. Por ejemplo:
<p class="texto-con-sangria">Estas son mis propias conclusiones.</p>.texto-con-sangria {
padding-inline-start: 1.5rem;
}La regla añade espacio al comienzo del párrafo sin identificarlo como una cita. Para modificar los márgenes de una cita auténtica también puedes usar CSS, como explica MDN en sus notas de uso.
Evita además estos errores:
- Colocar la atribución dentro de
<blockquote>como si fuese parte del texto original. - Usar
<cite>alrededor del nombre de una persona o de toda la cita. - Publicar una frase inventada con una fuente real que no contiene esas palabras.
- Cambiar las palabras de una cita sin indicar la intervención o convertir una paráfrasis en una transcripción literal.
Compatibilidad y fuentes
<blockquote> tiene soporte amplio en los navegadores actuales, según la referencia y compatibilidad de MDN, consultada el 3 de octubre de 2026. El marcado de estos ejemplos no necesita scripts ni una alternativa de compatibilidad. Su apariencia depende de los estilos aplicados.
Para las reglas de autoría, consulta el HTML Living Standard: blockquote. Al elegir etiquetas relacionadas, recuerda sus funciones: <q> para citas dentro de una frase, <cite> para títulos, <figure> y <figcaption> para agrupar un bloque con su pie, y <a> para crear el enlace visible.