Wat is een blokquote?

Als je ooit naar een lijst met HTML-elementen hebt gekeken, heb je je misschien afgevraagd "wat is een blockquote?" Het blockquote-element is een HTML-tag paar 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 uit een andere bron wordt geciteerd.

Hoe Blockquote op uw webpagina's te gebruiken

Wanneer u tekst op een webpagina schrijft en de lay-out van die pagina maakt, wilt u soms een tekstblok als citaat noemen. Dit kan een citaat van ergens anders zijn, zoals een getuigenis van een klant bij een casestudy of een succesverhaal van een project.

Dit kan ook een ontwerpbehandeling zijn die een belangrijke tekst uit het artikel of de inhoud zelf herhaalt. In het publiceren wordt dit soms een trek citaat, In webdesign wordt een van de manieren om dit te bereiken (en de manier die we in dit artikel behandelen) een blockquote genoemd.

Laten we dus eens kijken hoe je de blockquote-tag zou gebruiken om lange citaten te definiëren, zoals dit fragment uit "The Jabberwocky" van Lewis Carroll:

'Het was briljant en de glibberige toves'
Deed gyre en gimble in de wabe:
Alle mimsy waren de borogoves,
En de moeder overtreft.

(door Lewis Carroll)

Voorbeeld van het gebruik van de Blockquote-tag

De blockquote-tag is een semantische tag die de browser of user-agent vertelt dat de inhoud een lang citaat is. Als zodanig moet u geen tekst insluiten die geen citaat is in de blockquote-tag.

Als je erover nadenkt, is dat pull-citaat een citaat van tekst, het komt toevallig uit hetzelfde artikel waarin het citaat zelf voorkomt.

De meeste webbrowsers voegen wat inspringing toe (ongeveer 5 spaties) aan beide zijden van een blockquote om het te laten opvallen tussen de omringende tekst. Sommige extreem oude browsers kunnen de geciteerde tekst zelfs cursief weergeven. Onthoud dat dit gewoon de standaardstijl is van het blockquote-element.

Met CSS heb je totale controle over hoe je blockquote wordt weergegeven. U kunt de inspringing vergroten of zelfs verwijderen, achtergrondkleuren toevoegen of de tekstgrootte vergroten om het citaat verder op te roepen. Je kunt dat citaat naar één kant van de pagina laten zweven en de andere tekst eromheen laten lopen, wat een veelgebruikte visuele stijl is die wordt gebruikt voor pull-citaten in gedrukte tijdschriften.

Je hebt controle over het uiterlijk van de blockquote met CSS, iets wat we binnenkort zullen bespreken. Laten we voor nu verder kijken naar hoe u het citaat zelf aan uw HTML-opmaak kunt toevoegen.

Om de blockquote-tag aan uw tekst toe te voegen, omringt u eenvoudig de tekst die een aanhaling is met het volgende tagpaar:

• Opening:
• Sluitend:

Bijvoorbeeld:

'Het was briljant en de glibberige toves.
Deed gyre en gimble in de wabe:
Alle mimsy waren de borogoves,
En de moeder overtreft.

Voeg het paar blockquote-tags toe rond de inhoud van de quote zelf. In dit voorbeeld hebben we ook enkele breek tags (
) om waar nodig enkele regeleinden in de tekst toe te voegen. Dit komt omdat we tekst uit een gedicht opnieuw maken, waarbij die specifieke pauzes belangrijk zijn.

Als u een offerte aan het maken was voor een testimonial van een klant en de regels hoefden niet in specifieke delen te worden afgebroken, u zou deze break-tags niet willen toevoegen en de browser zelf toestaan ​​om naar behoefte in te pakken en te breken op basis van het scherm grootte.

Gebruik geen blokaanhalingsteken om tekst te laten inspringen

Jarenlang gebruikten mensen de blockquote-tag als ze tekst op hun webpagina wilden laten inspringen, zelfs als die tekst geen pull-quote was. Dit is een slechte gewoonte! U wilt de semantiek van blockquote niet alleen om visuele redenen gebruiken.

Als u uw tekst moet laten inspringen, moet u stylesheets gebruiken, niet de blockquote-tags (tenzij u natuurlijk een aanhalingsteken probeert te maken!).