Se hai mai guardato un elenco di elementi HTML, potresti aver trovato te stesso chiedendo "che cos'è un blocco?" L'elemento blockquote è una coppia di tag HTML che viene utilizzata per definire le quotazioni lunghe. Ecco la definizione di questo elemento in base alle specifiche HTML5 del W3C:
L'elemento blockquote rappresenta una sezione citata da un'altra fonte.
Come utilizzare Blockquote nelle tue pagine web
Quando scrivi testo su una pagina Web e crei il layout di quella pagina, a volte vuoi chiamare un blocco di testo come una citazione. Questa potrebbe essere una citazione da qualche altra parte, come una testimonianza del cliente che accompagna un case study o una storia di successo del progetto. Questo potrebbe anche essere un trattamento di design che ripete alcuni testi importanti dell'articolo o del contenuto stesso. Nella pubblicazione, questo è talvolta chiamato pull-quote, nel web design, uno dei modi per ottenere questo (e il modo in cui stiamo trattando in questo articolo) è chiamato blockquote.
Diamo un'occhiata a come useresti il tag blockquote per definire le citazioni lunghe, come questo estratto da "The Jabberwocky" di Lewis Carroll:
'Twas brillig e le fitte slitheyGira e dona nel wabe:Tutti i costumi erano i borogove,E la mamma si è allontanata.
(di Lewis Carroll)
Esempio di utilizzo del tag Blockquote
Il tag blockquote è un tag semantico che indica al browser o al programma utente che i contenuti sono una lunga citazione. Pertanto, non si deve includere testo che non sia una citazione all'interno del tag blockquote. Ricorda, una "citazione" è spesso parole reali che qualcuno ha detto o testo da una fonte esterna (come il testo di Lewis Carroll in questo articolo), ma può anche essere il concetto pullquote che abbiamo trattato in precedenza. Quando ci pensi, quel pullquote è una citazione di testo, sembra essere lo stesso articolo in cui appare la citazione stessa.
La maggior parte dei browser Web aggiunge alcuni rientri (circa 5 spazi) su entrambi i lati di un blockquote per farlo risaltare dal testo circostante. Alcuni browser estremamente vecchi potrebbero persino rendere il testo citato in corsivo. Ricorda che questo è semplicemente lo stile predefinito dell'elemento blockquote. Con i CSS, hai il controllo totale su come verrà visualizzata la tua blockquote. È possibile aumentare o addirittura rimuovere il rientro, aggiungere colori di sfondo o aumentare le dimensioni del testo per richiamare ulteriormente l'offerta. Puoi spostare quella citazione su un lato della pagina e farla avvolgere dall'altro testo, che è uno stile visivo comune utilizzato per i pullquotes nelle riviste stampate. Hai il controllo sull'aspetto del blockquote con i CSS, qualcosa di cui parleremo un po 'più a breve. Per ora, continuiamo a guardare come aggiungere la citazione stessa al markup HTML.
Per aggiungere il tag blockquote al testo, basta circondare il testo che è un preventivo con la seguente coppia di tag -
Per esempio:
'Twas brillig e le fitte slithey Gira e dona nel wabe: Tutti i costumi erano i borogove, E la mamma si è allontanata.Come puoi vedere, aggiungi semplicemente la coppia di tag blockquote attorno al contenuto della citazione stessa. In questo esempio, abbiamo anche utilizzato alcuni tag di interruzione () per aggiungere interruzioni di riga singola, laddove appropriato all'interno del testo. Questo perché stiamo ricreando il testo da una poesia, in cui quelle pause specifiche sono importanti. Se stavi creando un preventivo di testimonianze di un cliente e le linee non dovessero spezzare parti specifiche, non vorrai aggiungere questi tag di interruzione e consentire al browser stesso di avvolgere e interrompere in base alle esigenze, in base alle dimensioni dello schermo.
Non utilizzare Blockquote nel testo del rientro
Per molti anni, le persone hanno usato il tag blockquote se volevano far rientrare il testo sulla loro pagina web, anche se quel testo non era un pullquote. Questa è una cattiva pratica! Non vuoi usare la semantica del blockquote solo per ragioni visive. Se hai bisogno di indentare il tuo testo, dovresti usare i fogli di stile, non i tag blockquote (a meno che, ovviamente, quello che stai cercando di indentare sia una citazione!). Prova a inserire questo codice nella tua pagina web se stai cercando semplicemente di aggiungere un rientro:
Questo sarà il testo che è rientrato.
Successivamente, sceglierai come target quella classe con uno stile CSS
.indentato {
padding: 0 10px;}
Questo aggiunge i 10 pixel di riempimento su entrambi i lati del paragrafo.
