Ce este un blockquote?

click fraud protection

Dacă v-ați uitat vreodată la o listă de elemente HTML, este posibil să vă fi găsit întrebând „ce este un blockquote?” Elementul blockquote este un Etichetă HTML pereche care este utilizată pentru a defini cotațiile lungi. Iată definiția acestui element conform Specificație W3C HTML5:

Elementul blockquote reprezintă o secțiune care este citată dintr-o altă sursă.
Ilustrație care arată un exemplu de cotare blocată în HTML
Lifewire / Lara Antal

Cum să utilizați Blockquote pe paginile dvs. web

Când scrieți text pe o pagină web și creați aspectul acelei pagini, uneori doriți să apelați un bloc de text ca ofertă. Acesta ar putea fi un citat din altă parte, ca o mărturie a clienților care însoțește un studiu de caz sau o poveste de succes a proiectului.

Acesta ar putea fi, de asemenea, un tratament de proiectare care repetă unele texte importante din articol sau conținut. În publicare, aceasta este uneori numită a trage citat, În designul web, una dintre modalitățile de a realiza acest lucru (și modul în care abordăm în acest articol) se numește blockquote.

instagram viewer

Așadar, să ne uităm la modul în care ați folosi eticheta blockquote pentru a defini cotațiile lungi, cum ar fi acest fragment din „The Jabberwocky” de Lewis Carroll:

„A fost strălucit și toți slithey
A făcut gyre și a zgârcit în wabe:
Toți mimi erau borogovii,
Și mome raths outgrabe.

(de Lewis Carroll)

Exemplu de utilizare a etichetei Blockquote

Eticheta blockquote este o etichetă semantică care îi spune browserului sau agentului utilizator că conținutul este o ofertă lungă. Ca atare, nu ar trebui să atașați text care nu este o cotație în eticheta blockquote.

Un citat este adesea cuvinte reale pe care le-a spus cineva sau text dintr-o sursă externă (cum ar fi textul lui Lewis Carroll din acest articol), dar poate sa fi, de asemenea, conceptul pull quote pe care l-am tratat anterior.

Când vă gândiți la asta, citatul pull este un citat de text, se întâmplă doar din același articol în care apare citatul în sine.

Majoritatea browserelor web adaugă unele indentări (aproximativ 5 spații) pe ambele părți ale unei citate de bloc pentru a face să se distingă de textul din jur. Unele browsere extrem de vechi pot chiar reda textul citat cu caractere cursive. Amintiți-vă că acesta este pur și simplu stilul implicit al elementului blockquote.

Cu CSS, aveți control total asupra modului în care se va afișa cota dvs. de blocare. Puteți mări sau chiar elimina liniuța, puteți adăuga culori de fundal sau puteți mări dimensiunea textului pentru a apela în continuare oferta. Puteți pluti acea citată pe o parte a paginii și puteți să înfășurați cealaltă text, care este un stil vizual obișnuit folosit pentru extragerea citatelor în revistele tipărite.

Aveți controlul asupra apariției blockquote-ului cu CSS, lucru despre care vom discuta puțin mai mult în curând. Deocamdată, să continuăm să analizăm cum să adăugați citatul însuși la marcajul HTML.

Pentru a adăuga eticheta blockquote la text, pur și simplu înconjurați textul care este o ofertă cu următoarea pereche de etichete:

  • Deschidere:
  • Închidere:

De exemplu:

'Twas brillig și slithey toves.
A făcut gyre și a zgârcit în wabe:
Toți mimi erau borogovii,
Și mome raths outgrabe.

Adăugați perechea de etichete blockquote în jurul conținutului cotației în sine. În acest exemplu, am folosit și câteva rupe etichete (
) pentru a adăuga întreruperi de linie, acolo unde este cazul, în interiorul textului. Acest lucru se datorează faptului că recreăm text dintr-o poezie, unde acele pauze specifice sunt importante.

Dacă creați o ofertă de mărturie a clienților, iar liniile nu trebuie să se rupă în anumite părți, dvs. nu ar dori să adauge aceste etichete de pauză și să permită browserului însuși să se împacheteze și să se rupă după cum este necesar pe baza ecranului mărimea.

Nu utilizați Blockquote pentru a indenta textul

Timp de mulți ani, oamenii au folosit eticheta blockquote dacă doreau să indenteze textul pe pagina lor web, chiar dacă textul respectiv nu era un citat extras. Aceasta este o practică proastă! Nu doriți să utilizați semantica blockquote numai din motive vizuale.

Dacă trebuie să vă indentați textul, ar trebui să utilizați foi de stil, nu etichetele blockquote (cu excepția cazului în care, desigur, ceea ce încercați să indentați este un citat!).

instagram story viewer