Hvis du nogensinde har set på en liste over HTML-elementer, har du måske fundet dig selv at spørge "Hvad er en blockquote?" Blockquote-elementet er et HTML-tagspar, der bruges til at definere lange citater. Her er definitionen af dette element i henhold til W3C HTML5-specifikationen:
Blockquote-elementet repræsenterer et afsnit, der er citeret fra en anden kilde.
Sådan bruges Blockquote på dine websider
Når du skriver tekst på en webside og opretter layoutets side, vil du undertiden kalde en tekstblok som et citat. Dette kunne være et citat fra et andet sted, som en kundeanmeldelse, der ledsager en casestudie eller projektsuccesshistorie. Dette kan også være en designbehandling, der gentager nogle vigtige tekst fra selve artiklen eller indholdet. I udgivelsen kaldes dette undertiden et citat. I webdesign kaldes en af de måder at opnå dette på (og den måde, vi dækker i denne artikel) på en blokquote.
Så lad os se på, hvordan du ville bruge blockquote-taggen til at definere lange citater, som dette uddrag fra "The Jabberwocky" af Lewis Carroll:
'Twas brillig og de slithey tovesGjorde Gyre og Gimble i Wabe:Alle mimsy var borogovene,Og momen rater udgravning.
(af Lewis Carroll)
Eksempel på brug af Blockquote-taggen
Blockquote-taggen er et semantisk tag, der fortæller browseren eller brugeragenten, at indholdet er et langt citat. Som sådan skal du ikke vedlægge tekst, der ikke er et citat inde i blockquote-mærket. Husk, at et "citat" ofte er egentlige ord, som nogen har sagt eller tekst fra en ekstern kilde (som Lewis Carroll-teksten i denne artikel), men det kan også det pullquote-koncept, som vi tidligere har dækket. Når du tænker på det, er pullquote et citat af tekst, det sker bare fra den samme artikel, som citatet selv vises i.
De fleste webbrowsere tilføjer noget indrykning (ca. 5 mellemrum) til begge sider af en blockquote for at gøre det skiller sig ud fra den omgivende tekst. Nogle ekstremt gamle browsere kan endda gøre den citatte tekst kursiv. Husk at dette blot er standard styling af blockquote elementet. Med CSS har du total kontrol over, hvordan din blockquote vil vise. Du kan øge eller endda fjerne indrykket, tilføje baggrundsfarver eller øge tekststørrelsen for yderligere at ringe ud af citatet. Du kan flyde det pågældende citat til den ene side af siden og få den anden tekst rundt om den, hvilket er en almindelig visuel stil, der bruges til pullquotes i trykte blade. Du har kontrol over blockquote's udseende med CSS, noget vi diskuterer lidt mere kort tid. Lad os nu se på, hvordan du tilføjer selve citatet til din HTML-markup.
For at tilføje blockquote-taggen til din tekst, skal du blot omgive teksten, der er et citat med følgende tagpar -
For eksempel:
'Twas brillig og de slithey toves Gjorde Gyre og Gimble i Wabe: Alle mimsy var borogovene, Og momen rater udgravning.Som du kan se, tilføjer du blot de to blokquote tags rundt indholdet af selve citatet. I dette eksempel brugte vi også nogle pause tags () for at tilføje enkeltlinje pauser, hvor det er relevant inde i teksten. Det skyldes, at vi genskaber tekst fra et digt, hvor de specifikke pauser er vigtige. Hvis du lavede et kundeattest citat, og linjerne ikke behøvede at bryde i bestemte dele, ville du ikke gerne tilføje disse pause tags og tillade browseren selv at pakke og bryde efter behov baseret på skærmstørrelsen.
Brug ikke Blockquote til Indent Text
I mange år brugte folk blockquote-mærket, hvis de ønskede at indrykke tekst på deres webside, selvom teksten ikke var en pullquote. Dette er en dårlig praksis! Du vil ikke bruge semantikken til blockquote udelukkende af visuelle grunde. Hvis du har brug for at indrykke din tekst, skal du bruge stilark, ikke blockquote-tags (medmindre det selvfølgelig er det, du forsøger at indrykke er et citat!). Prøv at sætte denne kode på din webside, hvis du blot prøver at tilføje et indryk:
Dette bliver tekst, der er indrykket.
Derefter vil du målrette mod den klasse med en CSS-stil
.indented {
polstring: 0 10px;}
Dette tilføjer de 10 pixel af polstring til hver side af stykket.
