Se você já olhou uma lista de elementos HTML, pode ter se perguntado “o que é uma frase de bloqueio?” O elemento blockquote é um par de tags HTML usado para definir citações longas. Aqui está a definição deste elemento de acordo com a especificação W3C HTML5:
O elemento blockquote representa uma seção citada de outra fonte.
Como usar Blockquote em suas páginas da web
Quando você está escrevendo um texto em uma página da web e criando o layout dessa página, às vezes deseja chamar um bloco de texto como uma citação. Pode ser uma citação de outro lugar, como um depoimento de um cliente que acompanha um estudo de caso ou uma história de sucesso de projeto. Isso também pode ser um tratamento de design que repete algum texto importante do artigo ou do próprio conteúdo. Na publicação, isso às vezes é chamado de pull quote. No web design, uma das maneiras de conseguir isso (e a maneira que estamos abordando neste artigo) é chamada de blockquote. Então, vamos ver como você usaria a tag blockquote para definir citações longas, como este trecho de “The Jabberwocky” de Lewis Carroll:
‘Twas brillig e o slithey toves
Girou e gaguejou no wabe:
Todos os mimsy eram os borogoves,
E o mome raths outgrabe.
(por Lewis Carroll)
Exemplo de uso da tag Blockquote
A tag blockquote é uma tag semântica que informa ao navegador ou agente do usuário que o conteúdo é uma citação longa. Como tal, você não deve colocar texto que não seja uma citação dentro da tag blockquote. Uma citação costuma ser palavras reais que alguém disse ou texto de uma fonte externa (como o texto de Lewis Carroll neste artigo), mas posso também ser o conceito de pull quote que abordamos anteriormente. Quando você pensa sobre isso, essa citação pull é uma citação de texto, mas é do mesmo artigo em que a própria citação aparece. A maioria dos navegadores da web adiciona algum recuo (cerca de 5 espaços) em ambos os lados de uma citação de bloco para fazer destacam-se do texto circundante. Alguns navegadores extremamente antigos podem até exibir o texto citado em itálico. Lembre-se de que este é simplesmente o estilo padrão do elemento blockquote. Com CSS, você tem controle total sobre como seu blockquote será exibido. Você pode aumentar ou mesmo remover o recuo, adicionar cores de fundo ou aumentar o tamanho do texto para destacar a citação. Você pode flutuar essa citação para um lado da página e ter o outro texto em volta dela, que é um estilo visual comum usado para puxar citações em revistas impressas. Você tem controle sobre a aparência do blockquote com CSS, algo que discutiremos um pouco mais adiante. Por enquanto, vamos continuar vendo como adicionar a própria citação à sua marcação HTML. Para adicionar a tag blockquote ao seu texto, simplesmente coloque o seguinte par de tags entre o texto que é uma citação:
- Abertura:
- Fechamento:
Por exemplo:
‘Twas brillig and the slithey toves
Girou e gaguejou no wabe:
Todos os mimsy eram os borogoves,
E o mome raths outgrabe.
type = “code”> Adicione o par de tags blockquote ao redor do conteúdo da própria citação. Neste exemplo, também usamos algumas tags de quebra (
) para adicionar quebras de linha únicas quando apropriado dentro do texto. Isso ocorre porque estamos recriando o texto de um poema, onde essas pausas específicas são importantes. Se você estivesse criando uma citação de depoimento de cliente e as linhas não precisassem quebrar em partes específicas, você não gostaria de adicionar essas tags de quebra e permitir que o próprio navegador quebrasse conforme necessário com base no tamanho da tela.
Não use Blockquote para recuar o texto
Por muitos anos, as pessoas usaram a tag blockquote se quisessem recuar o texto em sua página da web, mesmo que esse texto não fosse uma frase de puxar. Esta é uma prática ruim! Você não deseja usar a semântica do blockquote apenas por razões visuais. Se você precisa indentar seu texto, você deve usar folhas de estilo, não as tags blockquote (a menos, é claro, o que você está tentando indentar seja uma citação!).
