¿Qué es una cita en bloque HTML y cómo se utilizan?

¿Qué es una cita en bloque HTML y cómo se utilizan?

VALORACIÓN DEL ARTÍCULO:
5/5

cita en bloque

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.

TAMBIÉN TE INTERESA

temu

Temu: chollos y estafas que campan a sus anchas

No son pocos los usuarios que reciben periódicamente anuncios sobre los grandes chollos que se comercializan en Temu. Para quien no lo conozca, Temu es un ecommerce procedente de China que es muy simular a lo que estamos acostumbrados como Amazon, Aliexpress o Miravia.  El catálogo de Temu cuenta con más de 100 categorías de

Samsung-Galaxy-S24

Nace la era de la IA móvil con los nuevos Galaxy S24 de Samsung

Samsung ha presentado a bombo y platillo su nuevos modelos Galaxy S24, con muchas novedades respecto al anterior Galaxy S23. Las tres referencias que llegan al mercado de esta serie flagship de la firma coreana son: el Galaxy S24 Ultra, Galaxy S24+ y Galaxy S24. En todos ellos, la presencia de la inteligencia artificial es

ROG-Phone-8

Serie ROG Phone 8, mucho gaming y mucho de todo

El ROG Phone 8 marca el inicio de una revolucionaria travesía que redefine la excelencia en juegos para dispositivos móviles. Y es que este móvil pensando para gamers va mucho más allá del placer jugar y todas sus funciones le colocan como un multiusos que llaman la atención. La serie ROG cambia y lo hace

xiaomi-SU7-diseño

El Xiaomi SU7 asoma la patita: que tiemble Tesla

El esperado primer coche desarrollado por Xiaomi ha sido oficialmente presentado recientemente. El mercado ya se prepara para recibir al Xiaomi SU7. A primera vista, su diseño compite directamente con Tesla y recuerda a deportivos como el Porsche Panamera. Vamos a ver los detalles de esta sedán eco-tecnológico de alto rendimiento que llegará al mundo

Rust Lenguaje de programacion

Rust lenguaje de programación que potencia el rendimiento y la seguridad

Rust lenguaje de programación ofrece rendimiento y seguridad para el desarrollo de software. Su enfoque confiable y eficiente lo convierte en una elección destacada en la industria. Con una documentación completa y herramientas avanzadas, Rust facilita el proceso de programación. Además, su comunidad activa y el apoyo de empresas garantizan su continuidad y evolución. Empresas