Om du någonsin har tittat på en lista med HTML-element kan du ha befunnit dig att fråga "vad är en blockcitat?" Blockquote-elementet är ett HTML-tagg par som används för att definiera långa citat. Här är definitionen av detta element enligt W3C HTML5-specifikation:
Blockquote-elementet representerar ett avsnitt som citeras från en annan källa.
Hur man använder Blockquote på dina webbsidor
När du skriver text på en webbsida och skapar sidans layout vill du ibland kalla ett textblock som ett citat. Detta kan vara ett citat från någon annanstans, som ett kundutlåtande som åtföljer en fallstudie eller projektets framgångshistoria.
Detta kan också vara en designbehandling som upprepar någon viktig text från själva artikeln eller innehållet. I publicering kallas detta ibland a dra offert, I webbdesign kallas ett av sätten att uppnå detta (och det sätt som vi täcker i den här artikeln) en block citat.
Så låt oss titta på hur du skulle använda blockquote-taggen för att definiera långa citat, till exempel detta utdrag från "The Jabberwocky" av Lewis Carroll:
- Det var snyggt och slithey toves
Gyr och gimlade i wabe:
All mimsy var borogoves,
Och momen raths outgrabe.
(av Lewis Carroll)
Exempel på användning av Blockquote Tag
Blockquote-taggen är en semantisk tagg som säger till webbläsaren eller användaragenten att innehållet är en lång offert. Som sådan bör du inte bifoga text som inte är ett citat i blockquote-taggen.
Ett citat är ofta faktiska ord som någon har sagt eller text från en extern källa (som Lewis Carroll-texten i den här artikeln), men det burk också vara pull-offert-konceptet som vi täckte tidigare.
När du tänker på det är det här citatet ett citat av text, det råkar bara vara från samma artikel som själva citatet visas i.
De flesta webbläsare lägger till några indrag (ungefär fem mellanslag) på båda sidor av en blockcitat så att den sticker ut från den omgivande texten. Vissa extremt gamla webbläsare kan till och med återge den citerade texten i kursiv stil. Kom ihåg att det här helt enkelt är standardformatet för blockquote-elementet.
Med CSS har du total kontroll över hur din blockcitat kommer att visas. Du kan öka eller till och med ta bort indraget, lägga till bakgrundsfärger eller öka textstorleken för att ytterligare anropa offerten. Du kan flyta citatet till ena sidan av sidan och låta den andra texten vikas runt, vilket är en vanlig visuell stil som används för att dra citat i tryckta tidskrifter.
Du har kontroll över blockcitationens utseende med CSS, något vi kommer att diskutera lite mer inom kort. För nu, låt oss fortsätta titta på hur du lägger till offerten i din HTML-markering.
För att lägga till blockquote-taggen till din text, omger du bara texten som är en offert med följande taggpar:
- Öppning:
- Stängning:
Till exempel:
”Det var briljant och slithey toves.
Gyr och gimlade i wabe:
All mimsy var borogoves,
Och momen raths outgrabe.Lägg till paret blockquote-taggar runt själva offertens innehåll. I det här exemplet använde vi också några bryta taggar (
) för att lägga till enstaka radbrytningar där det är lämpligt inuti texten. Detta beror på att vi återskapar text från en dikt, där de specifika rasterna är viktiga.Om du skapade ett kunduttalande och raderna inte behövde brytas i specifika delar, du skulle inte vilja lägga till dessa bryttaggar och låta webbläsaren själv slå in och bryta efter behov baserat på skärmen storlek.
Använd inte blockcitationstecken för att rita in text
Under många år använde blockcott-taggen om de ville stryka in text på sin webbsida, även om den texten inte var ett citat. Detta är en dålig praxis! Du vill inte använda semantiken i blockquote enbart av visuella skäl.
Om du behöver stryka in din text bör du använda formatmallar, inte blockcote-taggarna (såvida det du självklart inte försöker göra är ett citat!).