`Atributul hidden` în HTML

Ascunde un element care nu este relevant acum; valoarea until-found îl lasă găsibil prin căutarea din pagină a browserului.

Sintaxă tag

<p hidden>Text ascuns</p>
<div hidden="until-found">Text găsit cu Ctrl+F</div>

Ce face `Atributul hidden`

Atributul hidden spune browserului că elementul nu este relevant în momentul de față. Elementul nu este afișat (stilul implicit este display: none) și nu este citit de cititoarele de ecran.

Valoarea hidden="until-found" ascunde conținutul, dar îl lasă disponibil pentru căutarea din pagină (Ctrl+F) și pentru linkurile către un fragment. Când utilizatorul caută un cuvânt din el, browserul scoate atributul, declanșează evenimentul beforematch și afișează conținutul. Este suportat în Chrome 102+, complet în Firefox 148+ (parțial din 139) și parțial în Safari 26.2.

Din JavaScript poți schimba vizibilitatea prin proprietatea element.hidden = true sau false. Atenție: dacă în CSS setezi altă valoare pentru display pe același element, regula ta are prioritate și elementul rămâne vizibil.

Atribute

Atribut	Descriere
`hidden`	Formă booleană (sau `hidden="hidden"`): elementul este ascuns complet.
`hidden="until-found"`	Elementul este ascuns, dar conținutul poate fi găsit și afișat prin căutarea din pagină sau prin fragmentul din URL.

Exemple

Exemplul 1: Mesaj afișat abia după trimiterea formularului

Paragraful de confirmare are hidden la început. Scriptul îl face vizibil prin proprietatea hidden.

<form id="abonare">
  <input type="email" value="ana@exemplu.ro">
  <button>Abonează-te</button>
</form>
<p id="confirmare" hidden>Mulțumim, Ana! Te-ai abonat la newsletter.</p>

<script>
  document.getElementById("abonare").addEventListener("submit", (e) => {
    e.preventDefault();
    document.getElementById("confirmare").hidden = false;
  });
</script>

Ce afișează browserul

[ana@exemplu.ro] [Abonează-te]
După clic pe buton apare: Mulțumim, Ana! Te-ai abonat la newsletter.

Exemplul 2: Răspuns ascuns care poate fi găsit cu Ctrl+F

Cu until-found, dacă utilizatorul caută „rambursare”, browserul afișează singur paragraful ascuns.

<h3>Pot returna produsul?</h3>
<p hidden="until-found">
  Da, în 14 zile. Rambursarea banilor se face în contul tău în cel mult 5 zile lucrătoare.
</p>