Se hai mai guardato un elenco di elementi HTML, potresti esserti trovato a chiedere "cos'è un blockquote?" L'elemento blockquote è an tag HTML coppia che viene utilizzata per definire citazioni lunghe. Ecco la definizione di questo elemento secondo il Specifiche W3C HTML5:
L'elemento blockquote rappresenta una sezione citata da un'altra fonte.
Come usare Blockquote sulle tue pagine web
Quando scrivi del testo su una pagina web e crei il layout di quella pagina, a volte vuoi richiamare un blocco di testo come citazione. Questa potrebbe essere una citazione da qualche altra parte, come una testimonianza di un cliente che accompagna un caso di studio o una storia di successo di un progetto.
Questo potrebbe anche essere un trattamento di progettazione che ripete un testo importante dall'articolo o dal contenuto stesso. Nell'editoria, questo è talvolta chiamato a tirare citazione, Nel web design, uno dei modi per raggiungere questo obiettivo (e il modo in cui tratteremo in questo articolo) è chiamato blockquote.
Quindi diamo un'occhiata a come useresti il tag blockquote per definire citazioni lunghe, come questo estratto da "The Jabberwocky" di Lewis Carroll:
'Era brillante e le slithey toves
Ha fatto gyre e gimble nel wabe:
Tutti mimsy erano i borogoves,
E il momento è sorpassato.
(di Lewis Carroll)
Esempio di utilizzo del tag Blockquote
Il tag blockquote è un tag semantico che indica al browser o all'agente utente che i contenuti sono una citazione lunga. Pertanto, non dovresti racchiudere testo che non sia una citazione all'interno del tag blockquote.
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 di citazione pull che abbiamo trattato in precedenza.
Quando ci pensi, quella citazione è una citazione di testo, capita semplicemente che provenga dallo stesso articolo in cui appare la citazione stessa.
La maggior parte dei browser Web aggiunge un rientro (circa 5 spazi) su entrambi i lati di un blockquote per farlo risaltare dal testo circostante. Alcuni browser molto 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à visualizzato il tuo blockquote. Puoi aumentare o persino rimuovere il rientro, aggiungere colori di sfondo o aumentare le dimensioni del testo per richiamare ulteriormente la citazione. Puoi spostare quella citazione su un lato della pagina e far avvolgere l'altro testo intorno ad essa, che è uno stile visivo comune utilizzato per le citazioni 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 vedere come aggiungere la citazione stessa al tuo markup HTML.
Per aggiungere il tag blockquote al tuo testo, circonda semplicemente il testo che è una citazione con la seguente coppia di tag:
- Apertura:
- Chiusura:
Per esempio:
Era brillante e le slithey toves.
Ha fatto gyre e gimble nel wabe:
Tutti mimsy erano i borogoves,
E il momento è sorpassato.Aggiungi la coppia di tag blockquote attorno al contenuto della citazione stessa. In questo esempio, abbiamo anche usato alcuni tag di rottura (
) per aggiungere interruzioni di riga singole, ove appropriato, all'interno del testo. Questo perché stiamo ricreando il testo di una poesia, in cui quelle interruzioni specifiche sono importanti.Se stavi creando un preventivo per la testimonianza di un cliente e le linee non avevano bisogno di interrompersi in parti specifiche, tu non vorrei aggiungere questi tag di interruzione e consentire al browser stesso di avvolgere e interrompere secondo necessità in base allo schermo dimensione.
Non utilizzare Blockquote per far rientrare il testo
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 una citazione pull. Questa è una cattiva pratica! Non vuoi usare la semantica di blockquote esclusivamente 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 non sia una citazione!).