Kaj je Blockquote?

Če ste že kdaj pogledali seznam elementov HTML, ste morda spraševali, kaj je blokoteka? Blokovni element je par oznake HTML, ki se uporablja za definiranje dolgih citatov. Tukaj je definicija tega elementa v skladu s specifikacijo W3C HTML5:

Element blokote predstavlja razdelek, ki je naveden iz drugega vira.

Kako uporabljati Blockquote na svojih spletnih straneh

Ko pišete besedilo na spletni strani in ustvarjate postavitev te strani, včasih želite poklicati besedilni blok kot citat.

To je lahko citat iz nekje drugje, na primer izjave strank, ki spremlja študijo primera ali zgodbo o uspehu projekta. To bi lahko bilo tudi oblikovanje, ki ponavlja nekaj pomembnega besedila iz članka ali vsebine. V založništvu se to včasih imenuje pull-quote . V spletnem oblikovanju je eden od načinov za doseganje tega (in način, kako ga pokrivamo v tem članku) imenovana blokoteka.

Torej, poglejmo, kako bi uporabili blokovno oznako za določitev dolgih citatov, kot je ta odlomek iz "The Jabberwocky" Lewisa Carrolla:

"Twas brillig in slithe toves
Je kričal in se poskočil v žabo:
Vsi mimsy so bili borogov,
In mamica se zgruha.

(avtor Lewis Carroll)

Primer uporabe oznake za blokiranje

Blokovna oznaka je semantična oznaka, ki brskalniku ali uporabniku sporoča, da je vsebina dolga kotacija. Kot taka ne bi smeli priložiti besedila, ki ni citat znotraj oznake blockquote.Remember je "citat" pogosto dejanske besede, ki jih je nekdo rekel ali besedilo iz zunanjega vira (kot je besedilo Lewis Carroll v tem članku), vendar je lahko tudi pullquote koncept, ki smo ga prej zajeli.

Ko razmišljate o tem, da je pullquote citat besedila, je pravzaprav iz istega članka, na katerega se prikaže citat.

Večina spletnih brskalnikov dodaja nekaj odsekov (približno 5 presledkov) na obe strani blokoteke, da se izstopa iz okolnega besedila. Nekateri izredno starejši brskalniki morda celo označijo besedilo v poševnem tisku.

Ne pozabite, da je to preprosto privzeto oblikovanje elementa blokote. S CSS-jem imate popoln nadzor nad tem, kako bo prikazan vaš blokot. Lahko povečate ali celo odstranite alineo, dodate barve ozadja ali povečate velikost besedila, če želite še naprej klicati ponudbo. To ceno lahko plavate na eno stran strani in preklopite drugo besedilo, kar je običajno vizualni slog, uporabljen za pullquotes v tiskanih revijah. Imate nadzor nad pojavom blokov s CSS, o čemer bomo kmalu razpravljali. Za zdaj nadaljujemo z iskanjem, kako dodati citat sami v oznako HTML.

Če želite v besedilo dodati oznako za blokiranje, preprosto obdrnite besedilo, ki je kotacija z naslednjim parom oznak -

Na primer:


"Twas brillig in slithe toves

Je kričal in se poskočil v žabo:

Vsi mimsy so bili borogov,

In mamica se zgruha.

Kot lahko vidite, preprosto dodate par blokskih oznak okoli vsebine samega citata. V tem primeru smo uporabili tudi nekaj odmičnih oznak (
), da dodate posamezne prelete vrstic, kjer je to primerno znotraj besedila. To je zato, ker ponovimo besedilo iz pesmi, kjer so ti posebni prelomi pomembni. Če ste ustvarili ponudbo za izročitev strank in linijam ni bilo treba prekiniti določenih delov, ne bi želeli dodati teh oznak premora in omogočiti brskalniku, da se zavije in po potrebi odstrani glede na velikost zaslona.

Ne uporabite polja Blockquote za besedilo naklona

Že vrsto let so ljudje uporabili blokovno oznako, če so želeli na svoji spletni strani zamenjati besedilo, čeprav to besedilo ni bilo pullquote. To je slaba praksa! Ne želite uporabljati semantike blokoteke izključno zaradi vizualnih razlogov. Če želite besedilo zamenjati, uporabite slogovne liste, ne pa tudi oznake za blokiranje (razen, če se, seveda, to, kar poskušate nakazati, predstavlja citat!). Poskusite postaviti to kodo na svojo spletno stran, če poskušate preprosto dodati indent:

To bo besedilo, ki je razčlenjeno.

Nato boste ciljali na ta razred s slogom CSS

.indented {
padding: 0 10px;
}

To doda 10 slikovnih pik na obodu na obe strani odstavka.

Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 5/8/17.