Elemente de citare în HTML

Elemente HTML de Citare și Referință

Acest capitol trece în revistă elementele HTML pentru citate și referințe: <blockquote>, <q>, <abbr>, <address>, <cite>, și <bdo>.

HTML <blockquote> pentru Citate

Elementul <blockquote> marchează o secțiune citată dintr-o altă sursă. Browserele o indentează de obicei. Folosește atributul cite pentru a indica de unde provine citatul.

Exemplu

Un citat de pe site-ul WWF, în interiorul unui <blockquote>.

O pagină cu un blockquote care citează site-ul WWF (cu un atribut cite ce indică URL-ul sursei), introdus de un paragraf. Browserele indentează blockquote-ul.

> Output: pagină HTML completă

Prompt

O pagină cu un blockquote care citează site-ul WWF (cu un atribut cite ce indică URL-ul sursei), introdus de un paragraf. Browserele indentează blockquote-ul.

Output: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockquote</title>
</head>
<body>

<p>Iată un citat de pe site-ul WWF:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
De 60 de ani, WWF lucrează pentru a ajuta oamenii și natura să prospere. Fiind cea mai importantă organizație de conservare din lume, WWF activează în aproape 100 de țări. La fiecare nivel, colaborăm cu oameni din întreaga lume pentru a dezvolta și livra soluții inovatoare care protejează comunitățile, viața sălbatică și locurile în care acestea trăiesc.
</blockquote>

</body>
</html>

HTML <q> pentru Citate Scurte

Tag-ul <q> marchează un citat scurt, inline. Browserele adaugă în mod normal ghilimele în jurul lui.

Exemplu

Un citat scurt în interiorul unui paragraf.

O pagină cu un citat scurt inline folosind elementul q într-un paragraf: scopul WWF este să "Construim un viitor în care oamenii trăiesc în armonie cu natura." Browserele adaugă ghilimelele.

> Output: pagină HTML completă

Prompt

O pagină cu un citat scurt inline folosind elementul q într-un paragraf: scopul WWF este să "Construim un viitor în care oamenii trăiesc în armonie cu natura." Browserele adaugă ghilimelele.

Output: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Citat Scurt</title>
</head>
<body>

<p>Scopul WWF este: <q>Să construim un viitor în care oamenii trăiesc în armonie cu natura.</q></p>

</body>
</html>

HTML <abbr> pentru Abrevieri

Tag-ul <abbr> marchează o abreviere sau un acronim, precum „HTML”, „CSS” sau „ASAP”. Marcarea abrevierilor ajută browserele, uneltele de traducere și motoarele de căutare.

Sfat: Folosește atributul global title pentru a arăta descrierea completă atunci când utilizatorul trece cu mausul peste ea.

Exemplu

Abrevierea WHO cu numele complet într-un title.

O pagină care folosește elementul abbr pentru a marca abrevierea OMS, cu un atribut title "Organizația Mondială a Sănătății" afișat la trecerea cursorului. Propoziție: "OMS a fost fondată în 1948."

> Output: pagină HTML completă

Prompt

O pagină care folosește elementul abbr pentru a marca abrevierea OMS, cu un atribut title "Organizația Mondială a Sănătății" afișat la trecerea cursorului. Propoziție: "OMS a fost fondată în 1948."

Output: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abbr</title>
</head>
<body>

<p><abbr title="Organizația Mondială a Sănătății">OMS</abbr> a fost fondată în 1948.</p>

</body>
</html>

HTML <address> pentru Informații de Contact

Tag-ul <address> marchează informațiile de contact ale autorului sau proprietarului unui document sau articol. Acestea pot fi un email, un URL, o adresă fizică, un număr de telefon sau un handle de social media. Textul se afișează de obicei italic, iar browserele adaugă o întrerupere de linie înainte și după el.

Exemplu

Informații de contact în interiorul unui <address>.

O pagină care folosește elementul address pentru informații de contact: scrisă de John Doe, cu o adresă de vizitare. Browserele o afișează cursiv, cu întreruperi de linie înainte și după.

> Output: pagină HTML completă

Prompt

O pagină care folosește elementul address pentru informații de contact: scrisă de John Doe, cu o adresă de vizitare. Browserele o afișează cursiv, cu întreruperi de linie înainte și după.

Output: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Address</title>
</head>
<body>

<address>
Scris de John Doe.<br>
Vizitați-ne la:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

HTML <cite> pentru Titlul unei Opere

Tag-ul <cite> marchează titlul unei opere creative, precum o carte, o melodie, un film sau o pictură. Numele unei persoane nu este titlul unei opere. Textul se afișează de obicei italic.

Exemplu

Titlul unei picturi marcat cu <cite>.

O pagină care folosește elementul cite pentru titlul unei opere creative: "Țipătul" de Edvard Munch, pictat în 1893. Titlul apare cursiv.

> Output: pagină HTML completă

Prompt

O pagină care folosește elementul cite pentru titlul unei opere creative: "Țipătul" de Edvard Munch, pictat în 1893. Titlul apare cursiv.

Output: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cite</title>
</head>
<body>

<p><cite>Țipătul</cite> de Edvard Munch. Pictat în 1893.</p>

</body>
</html>

HTML <bdo> pentru Suprascrierea Bidirecțională

BDO înseamnă Bi-Directional Override (suprascriere bidirecțională). Tag-ul <bdo> suprascrie direcția curentă a textului, de exemplu pentru a scrie text de la dreapta la stânga.

Exemplu

Text forțat să curgă de la dreapta la stânga cu <bdo>.

O pagină care folosește elementul bdo cu dir="rtl" pentru a suprascrie direcția textului: "Acest text va fi scris de la dreapta la stânga".

> Output: pagină HTML completă

Prompt

O pagină care folosește elementul bdo cu dir="rtl" pentru a suprascrie direcția textului: "Acest text va fi scris de la dreapta la stânga".

Output: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bdo</title>
</head>
<body>

<bdo dir="rtl">Acest text va fi scris de la dreapta la stânga</bdo>

</body>
</html>

Elemente HTML de Citare și Referință

O referință rapidă: <abbr> definește o abreviere sau un acronim, <address> definește informații de contact, <bdo> definește direcția textului, <blockquote> definește o secțiune citată, <cite> definește titlul unei opere, iar <q> definește un citat scurt, inline.