Si alguna vez has visto una lista de elementos HTML, puede que te hayas preguntado «¿qué es una cita en bloque o blockquote?» El elemento blockquote es un par de etiquetas HTML que se utiliza para definir citas largas. Aquí está la definición de este elemento según la especificación HTML5 del W3C:

El elemento blockquote representa una sección que se cita de otra fuente.

Cómo usar Blockquote en sus páginas web

Cuando escribes texto en una página web y creas el diseño de esa página, a veces quieres llamar a un bloque de texto como una cita. Esto podría ser una cita de otro lugar, como un testimonio de un cliente que acompaña un estudio de caso o una historia de éxito de un proyecto. Esto también podría ser un tratamiento de diseño que repite algún texto importante del propio contenido. En el diseño web, una de las formas de lograrlo (y la forma en que lo estamos cubriendo en esto) se llama una cita en bloque.

Así que veamos cómo usarías la etiqueta de la cita en bloque para definir citas largas, como este extracto de «The Jabberwocky» de Lewis Carroll:

‘Twas brillig and the slithey toves
Hice giro y gimble en el wabe:
Todos los mimsy fueron los borogoves,
Y los mome raths outgrabe.

(por Lewis Carroll)

Ejemplo de Uso de la Etiqueta de Cita de Bloque

La etiqueta blockquote es una etiqueta semántica que le dice al navegador o agente de usuario que el contenido es una cita larga. Como tal, no debe incluir texto que no sea una cita dentro de la etiqueta Blockquote. Recuerde, una «cita» es a menudo palabras reales que alguien ha dicho o texto de una fuente externa (como el texto de Lewis Carroll en esto), pero también puede ser el concepto de pull-quote que cubrimos anteriormente. Cuando piensas en ello, esa cita es una cita de texto, resulta que es de la misma cita en la que aparece la cita en sí misma.

La mayoría de los navegadores web añaden alguna sangría (alrededor de 5 espacios) a ambos lados de una cita de bloque para que destaque del texto circundante. Algunos navegadores extremadamente antiguos pueden incluso mostrar el texto citado en cursiva. Recuerde que este es simplemente el estilo por defecto del elemento de la cita en bloque. Con CSS, usted tiene control total sobre cómo se mostrará su cotización en bloque. Puede aumentar o incluso eliminar la sangría, añadir colores de fondo o aumentar el tamaño del texto para llamar más la cita. Puede hacer flotar esa cita a un lado de la página y hacer que el otro texto la envuelva, que es un estilo visual común utilizado para las citas en revistas impresas. Usted tiene el control sobre la apariencia de la cita en bloque con CSS, algo que discutiremos un poco más adelante. Por ahora, sigamos viendo cómo agregar la propia cita a su marcación HTML.

Para añadir la etiqueta blockquote a su texto, simplemente rodee el texto que es una cita con el siguiente par de etiquetas –

Por ejemplo:

‘Twas brillig and the slithey toves
Hizo gyre y gimble en el wabe:
Todos los mimsy fueron los borogoves,
Y el mome raths outgrabe.

Como puede ver, simplemente agregue el par de etiquetas de comillas en bloque alrededor del contenido de la cita en sí. En este ejemplo, también usamos algunas etiquetas de ruptura () para añadir saltos de línea simples cuando era apropiado dentro del texto. Esto se debe a que estamos recreando texto de un poema, en el que esos saltos específicos son importantes. Si está creando una cotización de testimonios de clientes, y las líneas no necesitan romperse en partes específicas, no querrá añadir estas etiquetas de ruptura y permitir que el propio navegador las envuelva y rompa según sea necesario en función del tamaño de la pantalla.

No utilizar la cita en bloque para sangrar el texto

Durante muchos años, la gente usaba la etiqueta de cita en bloque si querían incluir texto en su página web, incluso si ese texto no era una cita. ¡Esta es una mala práctica! No desea utilizar la semántica de la cita en bloque únicamente por razones visuales. Si necesita sangrar su texto, debería usar hojas de estilo, no las etiquetas de comillas (a menos, por supuesto, que lo que esté intentando sangrar sea una cita). Intente poner este código en su página web si está intentando simplemente añadir una sangría:

Este será un texto con sangría.

A continuación, se dirigirá a esa clase con un estilo CSS

.indented {

relleno: 0 10px;

Esto añade los 10 píxeles de relleno a cada lado del párrafo.