Wann Dir schon eng Lëscht vun HTML Elementer gekuckt hutt, kënnt Dir Iech selwer erausfannen, "wat ass e Blockquote?" Den Blockquote-Element ass e HTML-Schlësselpaar, dee benotzt gëtt fir laang Zitater ze definéieren. Hei ass d'Definitioun vum Element an der W3C HTML5 Spezifikatioun:
De Blockquote Element repräsentéiert en Deel deen aus enger anerer Quell zitéiert gëtt.
Wéi benotze Blockquote op Är Websäiten
Wann Dir Texter an enger Websäit schreift an d'Layout vun dëser Säit erschafft, da wëllt Dir heiansdo e Blockzoustand fir e Gespréich zitéieren.
Dëst kéint e Quatri vun enger anerer Plaz sinn, wéi e Client Testimonial, deen eng Case Study oder Projet Erfolleg Geschicht begleitert. Dëst konnt och eng Designbehandlung sinn, déi e puer wichtegen Text aus dem Artikel oder Inhalt selwer widderhëlt. An der Verëffentlechung gëtt et heiansdo e Pull-Zitat genannt . Am Webdesign, eng vun de Weeër fir dëst z'erreechen (an déi Manéier déi mer an dësem Artikel erhalen) gëtt als Blockquote bezeechent.
Loosst eis also kucken, wéi Dir de Blockquote-Tag benotzt fir laang Zitater ze definéieren, wéi dës Auszuch aus "The Jabberwocky" vum Lewis Carroll:
"Twas brillig an der slithey Tie
Hutt Dir Dir an der Wabe gigabéiert a gimble:
All Mimsy waren déi borogoves,
An d'Mme raths outgrabe.
(vu Lewis Carroll)
Beispiller fir de Blockquote Tag benotze kënnt
De Blockquote-Tag ass e semanteschen Zweet deen de Browser oder de Benotzer agëtt, datt de Contenu eng laang Zousatz steet. Als Suchzouegend däerft Dir net mam Text bezeechnen, dat net e Begrëff am Blockquote-Tag ass. Wéi eng "Zitat" ass oft aktuelle Wierder, déi jemols gesot oder Texter aus enger externer Quell hunn (wéi de Lewis Carroll Text an dësem Artikel) Et kann och sinn d'Pullwarekonzept dat mir virdru bedeckt hunn.
Wann Dir dovun denkt, datt d'Zouselquote e Zitat aus Text ass, ass et just eens vum selwechten Artikel, deen d'Zitat selwer erschéngt.
Déi meescht Webbrowser addéiere sech e bësseg Zort (ronn 5 Plazen) op zwou Säiten vun enger Blockquote, fir datt se aus dem Ëmfeld erausstinn. E puer extrem al Browser kënnen den zitéierten Text och kursiv maachen.
Denkt drun datt et einfach de Standardmodell vum Blockquote-Element ass. Mat CSS, hutt Dir total Kontrolle wéi Är Blocquote affichéiert. Dir kënnt de Spigel vergréisseren oder souguer änneren, d'Hannergrondfärder vergréisseren an d'Textgréisst vergréisseren fir de Zousatz weider ze ruffen. Dir kënnt dat Zitat op enger Säit vun der Säit schwächen an déi aner Texter ëmdréien, dat ass e üblech visuell Styl fir Zongelen an gedréckten Zäitschrëften benotzt. Dir hutt d'Kontrolle iwwer d'Blockquote 's Optriede mat CSS, wat mir iwwer e bëssen méi kuerz diskutéieren. Fuere mir elo weider no, wéi Dir de Zitat selwer op Äre HTML Markup addéiere kënnt.
Fir de Blockquote-Tag op Äre Text ze addéieren, einfach den Text umellt, dee mat engem Zousatzpaar unzefänken ass -
Zum Beispill:
"Twas brillig an der slithey Tie
Hutt Dir Dir an der Wabe gigabéiert a gimble:
All Mimsy waren déi borogoves,
An d'Mme raths outgrabe.
Wéi Dir gesitt, kënnt Dir einfach d'Paart vu Blockquote-Tags um den Inhalt vum Zitat selwer addéieren. An dësem Beispill hu mir och verschidde Brochstéck'en benotzt (
) fir eenzel Zeilenbriechungen z'ënnerstëtzen, wann se an den Text zegutt sinn. Dëst ass, well mir Texter aus engem Gedicht maachen, wou dës speziell Breake wichteg sinn. Wann Dir Är Clienten Zeechentrieder zegutt hunn an d'Zeilen brauche keng spezifesch Deeler ze briechen, da géift Dir dës Break-Tags net änneren an de Browser erofhuelen a wéckelen wéi néideg baséiert op der Bildschirmgréisst.
Benotzt Blockquote Notéieren Text
Zënter ville Joeren hunn d'Leit de Blockquote-Tag benotzt, wann se wollten Texter op hirer Websäit anenee weisen, och wann dësen Text net eng PullKick ass. Dëst ass eng schlecht Praxis! Dir wëllt d'Semantik vu Blockquote nëmme fir visuell Grënn benotzen. Wann Dir Äert Text drécke musst, sollt Dir Stilblieder benotzen, net déi Blockquote-Bezeechnungen (ausser wann Dir natierlech probéiert, Äert e Präis gëtt!). Verspriechen dëse Code op Ärer Websäit, wann Dir probéiert Dir en Indent ze addéieren:
Dëst wäert Text sinn, deen sech zitt.
Als nächst sidd Dir dës Klasse mat engem CSS Stil zielt
.indented {
Padding: 0 10px;
}}
Dëst addéiert d'10 Pixel vu padding op all Säit vum Paragraf.
Original Artikel vum Jennifer Krynin. Edited by Jeremy Girard op 5/8/17.