`Atributul id` în HTML

Dă unui element un identificator unic în pagină, folosit de linkuri cu #, de CSS, de JavaScript și de etichetele formularelor.

Sintaxă tag

<section id="contact">...</section>

Ce face `Atributul id`

Atributul id poate fi pus pe orice element și trebuie să fie unic în tot documentul: două elemente nu au voie să aibă același id. Valoarea nu are voie să conțină spații.

Un id are mai multe roluri: este ținta linkurilor interne (href="#contact" derulează pagina la element), leagă un <label> de câmpul lui prin atributul for, este folosit de atribute ARIA (aria-labelledby, aria-describedby) și poate fi găsit rapid din JavaScript cu document.getElementById().

În CSS poți stiliza un element după id cu selectorul #contact, dar acest selector are o specificitate mare și se suprascrie greu. Pentru stiluri se preferă de obicei clasele.

Atribute

Atribut	Descriere
`id`	Un șir unic în pagină, fără spații. Poate conține litere, cifre, cratime și liniuțe jos; e bine să înceapă cu o literă.

Exemple

Exemplul 1: Link intern către o secțiune a paginii

Linkul cu href="#program" derulează pagina până la elementul care are id="program".

<nav>
  <a href="#program">Program</a>
  <a href="#contact">Contact</a>
</nav>

<section id="program">
  <h2>Program</h2>
  <p>Luni – Vineri, 9:00 – 18:00</p>
</section>

<section id="contact">
  <h2>Contact</h2>
  <p>Str. Lăpușneanu nr. 10, Iași</p>
</section>

Ce afișează browserul

Două linkuri: „Program” și „Contact”.
La clic pe „Contact”, pagina derulează la secțiunea Contact, iar adresa din bara browserului devine ...#contact.

Exemplul 2: Legarea unei etichete de câmp și citirea din JavaScript

Atributul for al etichetei folosește id-ul câmpului. Același id este folosit de script pentru a citi valoarea.

<label for="nume">Numele tău</label>
<input id="nume" type="text" value="Ana Popescu">
<p id="salut"></p>

<script>
  const nume = document.getElementById("nume").value;
  document.getElementById("salut").textContent = "Bun venit, " + nume + "!";
</script>