Se você já olhou para uma lista de elementos HTML, você pode ter se perguntado "o que é um blockquote?" O elemento blockquote é um par de tags HTML usado para definir cotações longas. Aqui está a definição deste elemento de acordo com a especificação HTML5 do W3C:
O elemento blockquote representa uma seção que é citada de outra fonte.
Como usar o Blockquote em suas páginas da Web
Quando você está escrevendo texto em uma página da web e criando o layout dessa página, às vezes você quer chamar um bloco de texto como uma cotação. Isso pode ser uma citação de algum outro lugar, como um depoimento de um cliente que acompanha um estudo de caso ou uma história de sucesso do projeto. Este também poderia ser um tratamento de design que repete algum texto importante do artigo ou conteúdo em si. Na publicação, isso às vezes é chamado de cotação de atração. Em web design, uma das maneiras de conseguir isso (e a maneira como 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 os slithey tovesGirou e gimble no wabe:Todos os mimsy eram os borogoves,E as roma mome outgrabe.
(por Lewis Carroll)
Exemplo de uso da tag Blockquote
A tag blockquote é uma tag semântica que informa ao navegador ou ao agente do usuário que o conteúdo é uma cotação longa. Como tal, você não deve incluir texto que não seja uma cotação dentro da tag blockquote. Lembre-se, uma "citação" é frequentemente palavras reais que alguém disse ou texto de uma fonte externa (como o texto de Lewis Carroll neste artigo), mas posso também é o conceito pullquote que abordamos anteriormente. Quando você pensa sobre isso, esse pullquote é uma citação de texto, só acontece de ser do mesmo artigo em que a citação em si aparece.
A maioria dos navegadores da Web adiciona algum recuo (cerca de 5 espaços) a ambos os lados de um bloco de referência para destacá-lo do texto ao redor. Alguns navegadores extremamente antigos podem até renderizar o texto citado em itálico. Lembre-se que este é simplesmente o estilo padrão do elemento blockquote. Com o CSS, você tem total controle sobre como o seu blockquote será exibido. Você pode aumentar ou até mesmo remover o recuo, adicionar cores de plano de fundo ou aumentar o tamanho do texto para chamar a cotação. Você pode colocar essa citação em um lado da página e ter o outro texto em volta dela, que é um estilo visual comum usado para pullquotes em revistas impressas. Você tem controle sobre a aparência do blockquote com CSS, algo que discutiremos um pouco mais em breve. Por enquanto, vamos continuar analisando como adicionar a cotação à sua marcação HTML.
Para adicionar a tag blockquote ao seu texto, basta cercar o texto que é uma cotação com o seguinte par de tags -
Por exemplo:
Twas brillig e os slithey toves Girou e gimble no wabe: Todos os mimsy eram os borogoves, E as roma mome outgrabe.Como você pode ver, basta adicionar o par de tags blockquote ao redor do conteúdo da citação em si. Neste exemplo, também usamos algumas marcas de quebra () para adicionar quebras de linha únicas, quando apropriado, dentro do texto. Isso ocorre porque estamos recriando texto de um poema, onde essas quebras específicas são importantes. Se você estivesse criando uma cotação de depoimento de cliente, e as linhas não precisassem quebrar partes específicas, você não desejaria adicionar essas marcas de quebra e permitir que o próprio navegador quebrasse e quebrasse, conforme necessário, com base no tamanho da tela.
Não use blockquote para recuar 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 um pullquote. Esta é uma prática ruim! Você não quer usar a semântica de blockquote apenas por razões visuais. Se você precisar recuar seu texto, você deve usar folhas de estilo, não as tags blockquote (a menos que, é claro, o que você está tentando recuar seja uma citação!). Tente colocar esse código na sua página da Web se você estiver tentando simplesmente adicionar um recuo:
Este será um texto indentado.
Em seguida, você segmentaria essa classe com um estilo CSS
.indented {
preenchimento: 0 10px;}
Isso adiciona os 10 pixels de preenchimento a qualquer lado do parágrafo.
