Se xa fixeches unha lista de elementos HTML, é posible que te atopes preguntando "¿Que é un bloqueo?". O elemento blockquote é un par de etiquetas HTML que se usa para definir citas longas. Aquí está a definición deste elemento de acordo coa especificación HTML5 do W3C:
O elemento blockquote representa unha sección que se cita dende outra fonte.
Como usar Blockquote nas súas páxinas web
Cando está escribindo texto nunha páxina web e crea o deseño desta páxina, ás veces quere chamar un bloque de texto como unha cita.
Esta podería ser unha cita desde outro lugar, como un testimonial do cliente que acompaña un caso de estudo ou unha historia de éxito do proxecto. Este tamén podería ser un tratamento de deseño que repita algún texto importante do artigo ou contido en si. Na publicación, ás veces chámase pull-quote . No deseño web, unha das formas de lograr isto (e do xeito que estamos cubrindo neste artigo) chámase blockquote.
Entón vexamos como usarías a etiqueta blockquote para definir citas longas, como este extracto de "The Jabberwocky" de Lewis Carroll:
'Twas brillig e os toves slithey
Fixo gyre e gimble no wabe:
Todos os mims eran os borogoves,
E o mome raths outgrabe.
(por Lewis Carroll)
Exemplo de uso da etiqueta de bloqueo
A etiqueta blockquote é unha etiqueta semántica que indica ao navegador ou usuario que os contidos son unha cita longa. Polo tanto, non debe incluír texto que non sexa unha cita dentro da etiqueta de bloqueo. Teña en conta que unha "cita" é moitas veces palabras reais que alguén dixo ou un texto desde unha fonte externa (como o texto de Lewis Carroll neste artigo), pero Tamén pode ser o concepto de "pullquote" que cubrimos previamente.
Cando pensades niso, ese pullquote é unha cita de texto, só pasa do mesmo artigo que aparece na cita.
A maioría dos navegadores engaden un pouco de sangría (cerca de 5 espazos) a ambos os dous lados dunha cadea de bloques para que se destaque do texto circundante. Algúns navegadores moi antigos poden incluso render o texto citado en cursiva.
Lembre que este é simplemente o estilo predeterminado do elemento blockquote. Con CSS, tes un control total sobre como se mostrará o teu cadro de bloqueo. Pode aumentar ou mesmo eliminar a sangría, engadir cores de fondo ou aumentar o tamaño do texto para seguir chamando a cita. Podes flotar esa cita a un lado da páxina e ter a outra envoltura de texto ao redor dela, que é un estilo comunmente visual usado para puxar en revistas impresas. Ten control sobre a aparencia de blockquote con CSS, algo que imos discutir un pouco máis en breve. Por agora, imos seguir mirando como engadir a cita en si ao seu marcado HTML.
Para engadir a etiqueta de bloqueo ao texto, basta con arredor do texto que é unha cita co seguinte par de etiquetas:
Por exemplo:
'Twas brillig e os toves slithey
Fixo gyre e gimble no wabe:
Todos os mims eran os borogoves,
E o mome raths outgrabe.
Como podes ver, simplemente engades o par de etiquetas de bloqueo ao redor do contido da propia cita. Neste exemplo, tamén usamos algunhas etiquetas break (
) para engadir pausas de liña única cando corresponda dentro do texto. Isto é porque estamos recreando o texto dun poema, onde eses saltos específicos son importantes. Se creas unha cita de testemuños de clientes e as liñas non necesitaban romper en partes específicas, non quererías engadir estas etiquetas de ruptura e permitir que o propio navegador se enrolle e queque como é necesario en función do tamaño da pantalla.
Non empregue Blockquote para sangrar o texto
Durante moitos anos, a xente usou a etiqueta blockquote se quixeron sangrar o texto na súa páxina web, aínda que ese texto non fose un "pullquote". Esta é unha mala práctica! Non quere usar a semántica de blockquote únicamente por motivos visuais. Se necesitas sangrar o teu texto, debes usar follas de estilo, e non as etiquetas de bloqueo (a menos que, por suposto, o que estás a sangrar é unha cita). Tenta poñer este código na túa páxina web se estás tentando simplemente engadir un guión:
Este será o texto que está sangrado.
A continuación, dirixirás esa clase cun estilo CSS
.indented {
padding: 0 10px;
}
Isto engade os 10 píxeles do acolchado a cada lado do parágrafo.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 17 de febreiro de 17.