Hvis du noensinne har sett på en liste over HTML-elementer, har du kanskje funnet deg selv å spørre "hva er en blockquote?" Blockquote-elementet er et HTML-merkepar som brukes til å definere lange anførselstegn. Her er definisjonen av dette elementet i henhold til W3C HTML5-spesifikasjonen:
Blockquote-elementet representerer en seksjon som er sitert fra en annen kilde.
Slik bruker du Blockquote på websidene dine
Når du skriver tekst på en nettside og lager oppsettets sideoppsett, vil du noen ganger koble ut en blokk med tekst som et sitat. Dette kan være et sitat fra et annet sted, som en kundeanmeldelse som følger med en casestudie eller prosjektsuksesshistorie. Dette kan også være en designbehandling som gjentar noen viktig tekst fra selve artikkelen eller innholdet. I publisering kalles dette noen ganger et sitat. I webdesign er en av måtene å oppnå dette (og måten vi dekker i denne artikkelen) kalt en blockquote.
Så la oss se på hvordan du vil bruke blockquote-taggen til å definere lange sitater, for eksempel dette utsnittet fra "The Jabberwocky" av Lewis Carroll:
'Twas brillig og slithey tovesGjorde og gimble i wabe:Alle mimsy var borogovene,Og moren rater utgrabe.
(av Lewis Carroll)
Eksempel på bruk av Blockquote-taggen
Blockquote-taggen er en semantisk tag som forteller nettleseren eller brukeragenten at innholdet er et langt anførselstegn. Som sådan bør du ikke legge ved tekst som ikke er et sitat inne i blockquote-taggen. Husk at et "sitat" ofte er egentlige ord som noen har sagt eller tekst fra en ekstern kilde (som Lewis Carroll-teksten i denne artikkelen), men det kan være også pullquote-konseptet som vi dekket tidligere. Når du tenker på det, er pullquote et citer av tekst, det skjer bare fra samme artikkel som selve sitatet vises i.
De fleste nettlesere legger til noe innrykk (omtrent 5 mellomrom) til begge sider av en blokkquote for å få det til å skille seg ut fra den omkringliggende teksten. Noen ekstremt gamle nettlesere kan til og med gjengi den siterte teksten i kursiv. Husk at dette bare er standard styling av blockquote-elementet. Med CSS har du full kontroll over hvordan blockquote vil vise. Du kan øke eller til og med fjerne innrykket, legge til bakgrunnsfarger eller øke tekststørrelsen for ytterligere å ringe ut sitatet. Du kan flyte dette sitatet til den ene siden av siden og få den andre teksten til å vikle rundt den, noe som er en vanlig visuell stil som brukes til pullquotes i trykte magasiner. Du har kontroll over blockquote-utseendet med CSS, noe vi diskuterer litt mer kort tid. For nå, la oss fortsette å se på hvordan du legger til sitatet i HTML-oppslaget ditt.
For å legge til blockquote-taggen i teksten, omgir du bare teksten som er et sitat med følgende tagpar -
For eksempel:
'Twas brillig og slithey toves Gjorde og gimble i wabe: Alle mimsy var borogovene, Og moren rater utgrabe.Som du kan se, legger du bare til paret blockquote-koder rundt innholdet i sitatet selv. I dette eksemplet brukte vi også noen pause-tagger () for å legge til enkeltlinjepauser der det var hensiktsmessig innsiden av teksten. Dette er fordi vi gjenskaper tekst fra et dikt, der de spesifikke bruddene er viktige. Hvis du opprettet et kundeattest, og linjene ikke behøvde å bryte i bestemte deler, ville du ikke legge til disse bruddetikettene og la nettleseren selv vikle og knuse etter behov basert på skjermstørrelsen.
Ikke bruk Blockquote til Indent Text
I mange år brukte folk blockquote-taggen hvis de ønsket å strekke inn tekst på nettsiden deres, selv om teksten ikke var en pullquote. Dette er en dårlig praksis! Du vil ikke bruke semantikken til blockquote utelukkende av visuelle årsaker. Hvis du trenger å strekke inn teksten din, bør du bruke stilark, ikke blockquote-kodene (med mindre det du selv prøver å sette inn er et sitat!). Prøv å sette denne koden på websiden din hvis du prøver å bare legge til et innrykk:
Dette blir tekst som er innrykket.
Deretter vil du målrette mot den klassen med en CSS-stil
.indented {
polstring: 0 10px;}
Dette legger til de 10 piksler av polstring på hver side av avsnittet.
