Om du någonsin har tittat på en lista med HTML-element kan du ha funnit dig själv att fråga "vad är en blockquote?" Blockquote-elementet är ett HTML-taggarpar som används för att definiera långa citat. Här är definitionen av detta element enligt W3C HTML5-specifikationen:
Blockquote-elementet representerar en sektion som citeras från en annan källa.
Så här använder du Blockquote på dina webbsidor
När du skriver text på en webbsida och skapar sidans layout, vill du ibland kolla ett textblock som en offert. Detta kan vara ett citat från någon annanstans, som ett kundbevis som följer med en fallstudie eller en framgångsberättelse. 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 för ett citat. I webbdesign kallas en blockquote ett av sätten att uppnå detta (och det sätt som vi täcker i den här artikeln).
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:
"Twas brillig och de slithey tovesnaGjorde och gimble i wabe:Alla mimsy var borogoverna,Och momen ratar utkanten.
(av Lewis Carroll)
Exempel på att använda Blockquote-taggen
Blockquote-taggen är en semantisk tagg som säger till webbläsaren eller användaragenten att innehållet är en lång citat. Som sådan bör du inte bifoga text som inte är ett citat inuti blockquote-taggen. Kom ihåg att en "citat" ofta är egentliga 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 kan också det pullquote-koncept som vi tidigare täckte. När du tänker på det, är den pullquote ett citat av text, det händer bara att vara från samma artikel som citatet själv visas i.
De flesta webbläsare lägger till en del indragning (cirka 5 mellanslag) på båda sidor om en blockquote för att få den att sticka ut från den omgivande texten. Vissa extremt gamla webbläsare kan till och med göra den citerade texten kursiv. Kom ihåg att detta helt enkelt är standardinställningen för blockquote-elementet. Med CSS har du total kontroll över hur din blockquote ska visas. Du kan öka eller till och med ta bort indrymmet, lägga till bakgrundsfärger eller öka textstorleken för att ytterligare ringa upp citatet. Du kan flyta det citatet till ena sidan av sidan och få den andra texten att vikla runt den, vilket är en vanlig visuell stil som används för pullquotes i tryckta tidskrifter. Du har kontroll över blockquote-utseendet med CSS, något vi diskuterar lite kortare. För nu, låt oss fortsätta titta på hur du lägger till citatet självt till din HTML-markup.
Om du vill lägga till blockquote-koden i din text, omformar du bara texten som är en citat med följande taggarpar -
Till exempel:
"Twas brillig och de slithey tovesna Gjorde och gimble i wabe: Alla mimsy var borogoverna, Och momen ratar utkanten.Som du kan se, lägger du helt enkelt in blockquote-taggarna kring innehållet i själva citatet. I det här exemplet använde vi också några pausetiketter () för att lägga till rader med ensamrader 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 kundcertifiering citationstecken och linjerna inte behövde bryta i specifika delar skulle du inte vilja lägga till dessa pauskoder och låta webbläsaren själv sätta ihop och bryta efter behov baserat på skärmstorleken.
Använd inte Blockquote till indent text
Under många år använde man blockquote-taggen om de ville skriva in text på sin webbsida, även om den texten inte var en pullquote. Det här är en dålig övning! Du vill inte använda semantiken för blockquote bara av visuella skäl. Om du behöver ange din text ska du använda stilark, inte blockquote-taggarna (om inte det du försöker att indraga är givetvis ett citat!). Försök att sätta den här koden på din webbsida om du bara försöker lägga till ett streck:
Detta kommer att vara text som är inryckt.
Därefter skulle du rikta in den klassen med en CSS-stil
.indented {
vaddering: 0 10px;}
Detta lägger till de 10 pixlarna av vadderingen till vardera sidan av stycket.
