Dacă ați analizat vreodată o listă de elemente HTML, s-ar putea să vă fi întrebat "ce este o blocare de bloc?" Elementul blockquote este o pereche de etichete HTML care este utilizată pentru a defini cotații lungi. Iată definiția acestui element în conformitate cu specificația W3C HTML5:
Elementul blockquote reprezintă o secțiune citată dintr-o altă sursă.
Cum se utilizează Blockquote pe paginile dvs. Web
Când scrieți text într-o pagină Web și creați aspectul paginii respective, uneori doriți să apelați un bloc de text ca citat.
Acesta ar putea fi un citat din altă parte, ca o mărturie a clientului care însoțește un studiu de caz sau o poveste de succes a unui proiect. Acest lucru ar putea fi, de asemenea, un tratament de design care repetă un text important din articol sau din conținutul în sine. În publicare, acest lucru este numit uneori un pull-quote . În designul web, una dintre modalitățile de a realiza acest lucru (și modul în care acoperim acest articol) se numește blocaj.
Deci, haideți să ne uităm la modul în care ați folosi eticheta de blocaj pentru a defini citatele lungi, cum ar fi acest extras din "The Jabberwocky" de Lewis Carroll:
"Oricât de ciudat și de ciudat
A venit și a învins în vale:
Toate mimsy au fost borogoves,
Iar râurile mamei se înalță.
(de Lewis Carroll)
Exemplu de utilizare a etichetei de blocaj
Eticheta de blocare este o etichetă semantică care îi spune browserului sau agentului utilizator că conținutul este o cotație lungă. Ca atare, nu trebuie să includeți un text care nu este un citat în tag-ul blocului de blocare. Rețineți că un "citare" este adesea cuvinte reale pe care cineva le-a spus sau text dintr-o sursă exterioară (cum ar fi textul Lewis Carroll din acest articol) acesta poate fi, de asemenea, conceptul pullquote pe care l-am acoperit anterior.
Când te gândești la asta, acea extragere este un citat de text, se întâmplă totuși să fie din același articol pe care apare citatul în sine.
Majoritatea browserelor web adaugă unele indentări (aproximativ 5 spații) pe ambele părți ale unei blocuri de bloc pentru a le face să iasă din textul înconjurător. Unele browsere extrem de vechi pot face chiar textul citat cu caractere cursive.
Amintiți-vă că aceasta este pur și simplu stilul implicit al elementului blockquote. Cu CSS, aveți control total asupra modului în care se va afișa blocul dvs. de blocare. Puteți să măriți sau chiar să eliminați indentul, să adăugați culori de fundal sau să măriți dimensiunea textului pentru a apela mai mult citatul. Aveți posibilitatea să plutiți acel citat într-o parte a paginii și să aveți celălalt text înfășurat în jurul acestuia, care este un stil vizual obișnuit, folosit pentru atragerea de cote în reviste tipărite. Aveți control asupra aspectului blocului cu CSS, lucru pe care îl vom discuta puțin mai repede. Pentru moment, să continuăm să ne uităm la modul de adăugare a cotei în sine în marcajul dvs. HTML.
Pentru a adăuga eticheta de blocare a textului în textul dvs., înconjoară pur și simplu textul care este un citat cu următoarea pereche de etichete -
De exemplu:
"Oricât de ciudat și de ciudat
A venit și a învins în vale:
Toate mimsy au fost borogoves,
Iar râurile mamei se înalță.
După cum puteți vedea, pur și simplu adăugați perechea de etichete de blocaj în jurul conținutului citatului propriu-zis. În acest exemplu, am folosit și niște etichete de rupere (
) pentru a adăuga pauze de o singură linie acolo unde este cazul în interiorul textului. Acest lucru se datorează faptului că noi recreăm textul dintr-o poezie, unde acele pauze specifice sunt importante. Dacă ați creat o ofertă de testare a clienților și liniile nu au nevoie să rupă anumite părți, nu ați dori să adăugați aceste etichete de rupere și să permiteți browserului să se înfășoare și să se rupă după necesități, în funcție de dimensiunea ecranului.
Nu utilizați Blockquote pentru a introduce text
Timp de mulți ani, oamenii foloseau eticheta de blocaj dacă doreau să indenteze textul pe pagina lor Web, chiar dacă acel text nu era o retragere. Aceasta este o practică proastă! Nu doriți să utilizați semantica blockquote exclusiv din motive vizuale. Dacă trebuie să vă indentați textul, ar trebui să utilizați foile de stil, nu etichetele de blocare (cu excepția cazului în care, desigur, ceea ce încercați să indentați este un citat!). Încercați să puneți acest cod în pagina dvs. web dacă încercați să adăugați o liniuță:
Acesta va fi un text care este indentat.
Apoi, veți viza acea clasă cu un stil CSS
.indentat {
umplutură: 0 10px;
}
Aceasta adaugă cei 10 pixeli de umplutură în ambele părți ale paragrafului.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 5/8/17.