02/06/2023, 20:29 Tag-uri și atribute | Марафон HTML+CSS

Tag-uri și atribute

Tag-uri și atribute
Tag (etichetă) – un element al limbajului de marcare hipertext. Acestea sunt cele mai mici blocuri
de bază care alcătuiesc orice pagină web. Fiecare tag denotă o entitate: un titlu, o listă, un paragraf
de text, o imagine.

Pentru a separa tag-urile de textul unui document, se folosesc parantezele unghiulare, în care se
indică numele tag-ului și atributele acestuia.

<nume_tag>...</nume_tag>

Tag-ul de deschidere indică unde elementul începe, tag-ul de închidere – unde se termină. Tag-ul de
închidere este format prin adăugarea unei bare oblice ( / ) înaintea numelui tag-ului. Conținutul tag-
ului se află între tag-ul de deschidere și de închidere.

Exemple de tag-uri.

<section>Secțiune</section>
<p>Paragraf</p>
<a>Legătură</a>
<button>Buton</button>

Comentarii
Comentariile sunt folosite pentru a lăsa o explicație în codul sursă, o notă, pentru a comenta
temporar o secțiune de cod etc.

<!-- Acesta este un comentariu, conținutul său nu va fi afișat pe pagină -->

<p>Acesta este un paragraf de text, acesta va fi afișat pe pagină.</p>

<!--
Comentariile pot ocupa mai multe rânduri.

https://textbook.edu.goit.global/marathons/html-css/ro/docs/tags-attrs 1/6
02/06/2023, 20:29 Tag-uri și atribute | Марафон HTML+CSS

Acest lucru este convenabil pentru descrieri mai ample.

-->

Atribute
Atributele sunt setări suplimentare de tag-uri care pot fi folosite pentru a modifica proprietățile și
comportamentul unui element. Fiecare tag are atribute obligatorii și opționale, acestea pot fi mai
multe sau chiar deloc.

Atributele sunt scrise în interiorul tag-ului de deschidere, iar valorile lor sunt plasate între ghilimele
duble. Mai multe atribute sunt separate printr-un spațiu.

<a href="https://google.com" class="link">...</a>

<img src="cat.jpg" alt="cute cat" />

<input type="text" name="user_name" />

<button type="submit">...</button>

<p class="text">...</p>

Să ne uităm la câteva atribute ale tag-ului <a> .

<a href="http://google.com" target="_blank" title="Motorul de căutare Google">

Google.com
</a>

href – adresa paginii la care va merge utilizatorul când face clic pe textul link-ului.

target – specifică în ce filă se va deschide pagina când faceți clic pe link.

title – adaugă un indiciu explicativ la textul link-ului.

Să ne uităm la câteva atribute ale tag-ului <img> .

<img
src="https://picsum.photos/640/480"

https://textbook.edu.goit.global/marathons/html-css/ro/docs/tags-attrs 2/6
02/06/2023, 20:29 Tag-uri și atribute | Марафон HTML+CSS

alt="Imagine arbitrară de la generator"

/>

src – adresa imaginii.

alt – textul alternativ care va fi afișat dacă imaginea nu s-a încărcat.

UTIL

Pentru a afla atributele tag-urilor disponibile și scopul lor, puteți accesa documentația sau
referințele, de exemplu htmlreference.io.

Tag-uri pereche
Acestea constau dintr-un tag de deschidere și de închidere care cuprinde un conținut, permițând
schimbarea proprietăților sau afișarea acestuia, gruparea după semnificație. În interiorul tag-urilor
pereche, pot fi imbricate și alte tag-uri , ca o păpușă rusească "Matrioșka".

<!-- Articolul cu titlu și paragraf -->

<article>
<h1>Pe scurt despre tag-urile pereche</h1>
<p>
Majoritatea tag-urilor sunt în perechi. Conținutul lor este cuprins între
tag-uri
de deschidere și de închidere.
</p>
</article>

Tag-uri unice
Acestea constau doar dintr-un tag de deschidere, nu includ conținut textual și derivă conținut sau
comportament din atribute. Sunt folosite pentru a modifica proprietățile unui document, conexiuni
de fișiere etc.

<!-- Meta informații despre codificare -->

<meta charset="utf-8" />

https://textbook.edu.goit.global/marathons/html-css/ro/docs/tags-attrs 3/6
02/06/2023, 20:29 Tag-uri și atribute | Марафон HTML+CSS

<!-- Câmp de intrare -->

<input type="text" />

<!-- Imagine -->

<img src="cat.jpg" alt="cool cat" />

INTERESANT

În standardele HTML anterioare, tag-urile individuale trebuiau scrise cu un simbol invers /

înainte de acolada de închidere. De exemplu <img /> sau <input /> . În standardele actuale,
acest lucru este opțional și nu afectează nimic.

Imbricarea tag-urilor
Conform anumitor reguli, tag-urile pot fi imbricate unul în altul. La imbricare trebuie să urmați
ordinea închiderii lor conform principiului păpușii rusești "Matrioșka".

<tag1>
<tag2>
<tag4>...</tag4>
<tag5>...</tag5>
</tag2>
<tag3>
<tag6>...</tag6>
</tag3>
</tag1>

Mai jos aveți marcajul unui paragraf valid cu un link și un text evidențiat, precum și o listă de
beneficii cu o descriere.

<p>
<a href="squoosh.app">Squoosh</a> - serviciu <em>de optimizare</em>imagini.
</p>

<p>Beneficii</p>
<ul>
<li>Rulează în browser</li>
<li>Nu încarcă sistemul</li>

https://textbook.edu.goit.global/marathons/html-css/ro/docs/tags-attrs 4/6
02/06/2023, 20:29 Tag-uri și atribute | Марафон HTML+CSS

<li>Interfață ușor de utilizat</li>

</ul>

Această versiune are erori (rândurile sunt evidențiate).

<!-- Nu este respectată ordinea de închidere a tag-ului -->

<p><a href="squoosh.app">Squoosh</a> - serviciu <em></a>de optimizare</p>
imagini.</em>

<!-- Nu sunt respectate regulile de imbricare a tag-urilor -->

<ul>
<p>Beneficii</p>
<li>Rulează în browser</li>
<li>Nu încarcă sistemul</li>
<li>Interfață ușor de utilizat</li>
</ul>

Specificația HTML
Specificația HTML Living Standard – documentul principal care descrie standardele, caracteristicile și
dezvoltarea ulterioară a limbajului HTML.

Pentru a studia machetarea, în primul rând, sunt esențiale secțiunile care descriu ce tipuri de
elemente sunt, ce înseamnă fiecare dintre ele și înțelegerea modului în care pot fi imbricate unul în
celălalt.

UTIL

Elementul HTML – un termen care descrie o entitate semantică în standardul HTML. De

exemplu, un paragraf, un titlu, o listă sau un link. Într-un document HTML, un element este
reprezentat printr-un tag (pereche sau unic) – o construcție sintactică a limbajului HTML.

Imbricarea tag-urilor

Algoritmul pentru a determina dacă un tag poate fi imbricat este destul de simplu.

Accesăm specificația și găsim elementul necesar.

https://textbook.edu.goit.global/marathons/html-css/ro/docs/tags-attrs 5/6
02/06/2023, 20:29 Tag-uri și atribute | Марафон HTML+CSS

Verificăm modelul de conținut al elementului (Content model) în care îl introducem.

Verificăm categoriile elementului (Categories) pe care îl imbricăm.
Dacă categoria este potrivită și restricțiile ne permit, atunci putem realiza imbricarea, altfel nu
este posibil.

După câteva zile de utilizare a HTML, vă veți obișnui să imbricați corect elemente unul în celălalt,
deoarece regulile de imbricare vor deveni intuitive după familiarizarea cu tag-urile principale.

Referințe

Pe lângă specificații, este util să aveți la îndemână referințe și notițe. Nu este necesar să țineți minte
tot, mereu puteți arunca o privire la lucrurile mai specifice sau rar folosite.

Referințe Tag-uri HTML

Referințe Proprietăți CSS

https://textbook.edu.goit.global/marathons/html-css/ro/docs/tags-attrs 6/6