Als je ooit naar een lijst met HTML-elementen hebt gekeken, heb je je mogelijk afgevraagd: "Wat is een blockquote?" Het blockquote-element is een HTML-tagpaar dat wordt gebruikt om lange citaten te definiëren. Hier is de definitie van dit element volgens de W3C HTML5-specificatie:
Het blockquote-element vertegenwoordigt een sectie die is geciteerd uit een andere bron.
Hoe Blockquote te gebruiken op uw webpagina's
Wanneer u tekst op een webpagina schrijft en de lay-out van die pagina maakt, wilt u soms een blok tekst als een citaat oproepen. Dit kan een citaat zijn van ergens anders, zoals een getuigenis van een klant die een case study of een project-succesverhaal vergezelt. Dit kan ook een ontwerpbehandeling zijn die een aantal belangrijke tekst uit het artikel of de inhoud zelf herhaalt. Bij het publiceren wordt dit soms een pull-quote genoemd. In webontwerp wordt een van de manieren om dit te bereiken (en de manier waarop we dit in dit artikel behandelen) een blockquote genoemd.
Laten we dus kijken naar hoe u de blockquote-tag zou gebruiken om lange citaten te definiëren, zoals dit fragment uit "The Jabberwocky" van Lewis Carroll:
'Twas brillig en de slithey tovesGaat en wuift in de wabe:Alle mimsy waren de borogoves,En de mome raths overtreden.
(door Lewis Carroll)
Voorbeeld van het gebruik van de Blockquote-tag
De blockquote-tag is een semantische tag die de browser of user-agent laat weten dat de inhoud een lange prijs is. Als zodanig mag u geen tekst plaatsen die geen citaat is binnen de blockquote-tag. Vergeet niet dat een "citaat" vaak echte woorden zijn die iemand heeft gezegd of een tekst van een externe bron (zoals de tekst van Lewis Carroll in dit artikel), maar het is kan ook het pullquote-concept dat we eerder hebben besproken. Als je erover nadenkt, is die pullquote een citaat van tekst, het komt toevallig uit hetzelfde artikel waar het citaat zelf in staat.
De meeste webbrowsers voegen een inspringing (ongeveer 5 spaties) toe aan beide zijden van een blockquote om het te onderscheiden van de omringende tekst. Sommige extreem oude browsers kunnen de geciteerde tekst zelfs cursief weergeven. Vergeet niet dat dit gewoon de standaardstijl van het blockquote-element is. Met CSS hebt u volledige controle over hoe uw blockquote wordt weergegeven. U kunt het streepje vergroten of zelfs verwijderen, achtergrondkleuren toevoegen of de tekstgrootte vergroten om het citaat verder uit te spreken. Je kunt dat aanhalingsteken naar een kant van de pagina laten zweven en de andere tekst eromheen laten lopen, wat een veel voorkomende visuele stijl is die wordt gebruikt voor pullquotes in gedrukte tijdschriften. Je hebt controle over het uiterlijk van de blockquote met CSS, iets waarover we binnenkort meer zullen praten. Laten we voorlopig blijven zoeken naar hoe u de quote zelf aan uw HTML-markeringen kunt toevoegen.
Om de blockquote-tag aan uw tekst toe te voegen, plaatst u eenvoudigweg de tekst die een citaat is met het volgende tag-paar -
Bijvoorbeeld:
'Twas brillig en de slithey toves Gaat en wuift in de wabe: Alle mimsy waren de borogoves, En de mome raths overtreden.Zoals je ziet, voeg je eenvoudig het paar blockquote-tags toe rond de inhoud van de quote zelf. In dit voorbeeld hebben we ook een aantal onderbrekingslabels () gebruikt om enkele regeleinden aan te vullen binnen de tekst. Dit komt omdat we tekst opnieuw creëren van een gedicht, waarbij die specifieke onderbrekingen belangrijk zijn. Als u een citaat van een klantengetrekking aan het maken was en de lijnen niet in bepaalde delen moesten breken, zou u deze breekabels niet willen toevoegen en de browser zelf laten wikkelen en breken als dat nodig is op basis van de schermgrootte.
Gebruik geen Blockquote om in te springen
Vele jaren gebruikten mensen de blockquote-tag als ze tekst op hun webpagina wilden laten inspringen, zelfs als die tekst geen pullquote was. Dit is een slechte oefening! U wilt de semantiek van blockquote alleen om visuele redenen gebruiken. Als u uw tekst wilt laten inspringen, moet u stijlpagina's gebruiken, niet de tags blockquote (tenzij u natuurlijk een citaat wilt laten weergeven door wat u probeert te laten inspringen!). Probeer deze code in uw webpagina te plaatsen als u eenvoudig een streepje wilt toevoegen:
Dit is een inspringende tekst.
Vervolgens zou u die klasse met een CSS-stijl targeten
.indented {
opvulling: 0 10px;}
Hiermee worden de 10 pixels opvulling aan beide zijden van de alinea toegevoegd.
