Si alguna vez has mirado una lista de elementos HTML, es posible que te hayas 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 del W3C:
El elemento blockquote representa una sección que se cita de otra fuente.
Cómo usar Blockquote en tus 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. Esta podría ser una cita de otro lugar, como un testimonio de un cliente que acompaña un caso de estudio o una historia de éxito del 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 denomina "pull-quote". En el diseño web, una de las formas de lograr esto (y la forma en que estamos cubriendo en este artículo) se llama blockquote.
Así que veamos cómo usarías la etiqueta blockquote para definir citas largas, como este extracto de "The Jabberwocky" de Lewis Carroll:
'Twas brillig y los toves slitheyHizo girar y dar vueltas en el wabe:Todos los mimos fueron los borogoves,Y el mome raths outgrabe.
(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. 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 este artículo), pero puede También será el concepto pullquote que cubrimos anteriormente. Cuando lo piensas, esa cita 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 algo de sangría (aproximadamente 5 espacios) a ambos lados de una cita de bloque para que se destaque del texto circundante. Algunos navegadores extremadamente antiguos pueden incluso representar 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 blockquote. Puede aumentar o incluso eliminar la sangría, agregar colores de fondo o aumentar el tamaño del texto para llamar la cita. Puede hacer flotar esa cita a un lado de la página y hacer que el otro texto se ajuste a la misma, que es un estilo visual común que se utiliza para las citas en revistas impresas. Usted tiene control sobre la apariencia del blockquote con CSS, algo que discutiremos un poco más en breve. Por ahora, sigamos viendo cómo agregar la cotización a su marca HTML.
Para agregar la etiqueta blockquote a su texto, simplemente rodee el texto que es una cita con el siguiente par de etiquetas:
Por ejemplo:
’Twas brillig y los toves slithey Hizo girar y dar vueltas en el wabe: Todos los mimos fueron los borogoves, Y el mome raths outgrabe.Como puede ver, simplemente 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 saltos específicos son importantes. Si estuviera creando una cita testimonial de un cliente, y las líneas no tenían que dividirse en partes específicas, no querría agregar estas etiquetas de ruptura y permitir que el navegador se ajuste y se rompa según sea necesario en función del tamaño de la pantalla.
No use Blockquote para sangrar texto
Durante muchos años, las personas usaron la etiqueta blockquote si querían sangrar el texto en su página web, incluso si ese texto no era una comilla. ¡Esta 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). Intente colocar este código en su página web si está intentando simplemente agregar una sangría:
Este será el texto que está sangrado.
A continuación, apuntarías a esa clase con un estilo CSS
.indentado {
relleno: 0 10px;}
Esto agrega los 10 píxeles de relleno a cada lado del párrafo.
