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 Etiqueta HTML par que se utiliza para definir citas largas. Aquí está la definición de este elemento según el Especificación W3C HTML5:
El elemento blockquote representa una sección que se cita de otra fuente.
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 denomina tirar citaEn diseño web, una de las formas de lograr esto (y la forma que cubrimos 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 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 es 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 las citas extraídas 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:
'Twas brillig y el slithey toves.
Giró y gimió en el wabe:
Todos mimsy eran los borogoves,
Y los momentos superan.Agregue el par de etiquetas blockquote alrededor del contenido de la cita en sí. En este ejemplo, también usamos algunos romper etiquetas (
) 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 estaba creando una cotización testimonial de un cliente y las líneas no necesitaban romperse en partes específicas, no querría agregar estas etiquetas de interrupción y permitir que el navegador se ajuste y rompa según sea necesario según la pantalla Talla.
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).