Skip to main content

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.
  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"
  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" />

<!-- 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>
  <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.
  • 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.