Saltar al contenido

¿Qué es una cotización en bloque? – Definición de etiqueta HTML

abril 12, 2021
What is a blockquote 3468272 fc97debc35de4582b85cfbf783e4d45f ¿Qué es una cotización en bloque? - Definición de etiqueta HTML

Si alguna vez ha mirado una lista de elementos HTML, es posible que se haya preguntado “¿qué es una cita en bloque?” El elemento blockquote es un par de etiquetas HTML que se utiliza para definir citas largas. Aquí está la definición de este elemento de acuerdo con la especificación HTML5 de W3C:


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


Lifewire / Lara Antal

Cómo utilizar Blockquote en sus páginas web

Cuando escribe texto en una página web y crea el diseño de esa página, a veces desea llamar un bloque de texto como una cita. Esto podría ser una cita de otro lugar, como el testimonio de un cliente que acompaña 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 repita algún texto importante del artículo o contenido en sí. En la publicación, esto a veces se llama una cita extraíble. En el diseño web, una de las formas de lograr esto (y la forma que cubrimos en este artículo) se llama una cita en bloque.


Así que veamos cómo usaría la etiqueta blockquote para definir citas largas, como este extracto de “The Jabberwocky” de Lewis Carroll:


‘Twas brillig y el slithey toves
Giró y gimió en el wabe:
Todos mimsy eran los borogoves,
Y los momentos superan.


(por Lewis Carroll)



Ejemplo de uso de la etiqueta Blockquote

La etiqueta blockquote es una etiqueta semántica que le dice al navegador o al 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.


Una cita son a menudo palabras reales que alguien ha dicho o un texto de una fuente externa (como el texto de Lewis Carroll en este artículo), pero lata también será el concepto de cotización extraíble que cubrimos anteriormente.

Cuando lo piensas, esa cita extraíble es una cita de texto, simplemente es del mismo artículo en el que aparece la cita.


La mayoría de los navegadores web agregan algunas sangrías (aproximadamente 5 espacios) a ambos lados de una cita en bloque para que se destaque del texto circundante. Algunos navegadores extremadamente antiguos pueden incluso mostrar el texto citado en cursiva. Recuerde que este es simplemente el estilo predeterminado del elemento blockquote.


Con CSS, tienes control total sobre cómo se mostrará tu cita en bloque. Puede aumentar o incluso eliminar la sangría, agregar 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 lo envuelva, que es un estilo visual común que se usa para extraer citas en revistas impresas.


Tienes control sobre la apariencia de la cita en bloque con CSS, algo que discutiremos un poco más en breve. Por ahora, continuemos viendo cómo agregar la cita en sí a su marcado HTML.


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


  • Apertura:

  • Clausura:

Por ejemplo:


<blockquote>’Twas brillig and the slithey toves<br>
Did gyre and gimble in the wabe:<br>
All mimsy were the borogoves,<br>
And the mome raths outgrabe.</blockquote>

tipo de datos = “código”>

Agregue el par de etiquetas blockquote alrededor del contenido de la cita en sí. En este ejemplo, también usamos algunas etiquetas de ruptura (
) para agregar saltos de línea individuales cuando sea apropiado dentro del texto. Esto se debe a que estamos recreando el texto de un poema, donde esos descansos específicos son importantes.


Si estuviera creando una cotización de testimonio de un cliente y las líneas no necesitaran dividirse en partes específicas, no querría agregar estas etiquetas de ruptura y permitir que el navegador se ajuste y rompa según sea necesario según el tamaño de la pantalla.



No utilice Blockquote para sangrar texto

Durante muchos años, las personas usaron la etiqueta blockquote si querían sangrar el texto de su página web, incluso si ese texto no era una cita extraíble. ¡Es una mala práctica! No desea utilizar la semántica de blockquote únicamente por razones visuales.


Si necesita sangrar su texto, debe usar hojas de estilo, no las etiquetas blockquote (a menos que, por supuesto, lo que esté tratando de sangrar sea una cita).