HTML blockquote: citas en bloque y atribución de fuentes
HTML <blockquote> marca una sección autónoma citada de otra fuente. Puede contener múltiples párrafos. Puedes registrar la URL original en su atributo cite y agregar un enlace visible por separado para que los lectores puedan verificar la fuente.
¿Cuándo deberías usar blockquote?
Usa blockquote para presentar una cita en una sección independiente. No lo uses solo para sangrar un párrafo o cambiar su color. Para una cita breve dentro de una oración, utiliza <q>; consulta la referencia del elemento HTML q.
Una cita en bloque puede contener párrafos y otro contenido de flujo. Mantén la cita distinta de su atribución: coloca el crédito del autor o la fuente fuera de <blockquote>. Comprueba la redacción original y usa únicamente el material necesario para su propósito.
Un ejemplo completo con un enlace a la fuente
Guarda el siguiente código como quote.html y ábrelo en un navegador. No se requiere servidor ni biblioteca adicional. La cita corta en inglés proviene directamente del Estándar HTML.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo de cita en bloque</title>
</head>
<body>
<p>El estándar HTML describe lo que representa blockquote de la siguiente manera.</p>
<blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
<p lang="en">a section that is quoted from another source</p>
</blockquote>
<p>Fuente: <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"
target="_blank" rel="noopener noreferrer"><cite>HTML Standard, blockquote element</cite></a></p>
</body>
</html>El navegador muestra el párrafo introductorio, la cita y el enlace de origen en ese orden. La apariencia predeterminada varía, pero los navegadores comúnmente dan márgenes adicionales a la cita. El enlace abre la sección relevante del HTML Standard. La cita conserva su redacción original en inglés.
El atributo cite es diferente de una cita visible
El atributo cite contiene la URL de la fuente citada. Agregarlo no muestra automáticamente un enlace o crédito de la fuente. Incluye un elemento <a> separado y un texto descriptivo cuando los lectores necesiten seguir la referencia.
El atributo cite y el elemento <cite> comparten un nombre, pero tienen roles diferentes. El atributo registra una dirección de origen; el elemento marca el título de una obra, como un libro o documento. Solo el nombre de un autor no es el título de una obra.
Aplica estilo a la cita con CSS
Mantén el significado de la cita en HTML y ajusta sus márgenes y borde con CSS. Vincula una hoja de estilos desde el head del ejemplo, luego agrega la siguiente regla a esa hoja de estilos. También puedes agregar la regla a una hoja de estilos existente utilizada por la página.
blockquote {
margin: 1.5rem 0;
padding: 0.5rem 1rem;
border-left: 0.25rem solid #477080;
}La cita obtiene un borde izquierdo y un espaciado interno. Si agregas colores de fondo o de texto, mantén un contraste legible. No marques contenido ordinario, no citado, como bloque de cita solamente para obtener esta apariencia. Consulta la definición de bloque de cita del Estándar HTML y la referencia de bloque de cita de MDN para su sintaxis y condiciones de uso.
