Atributul title în HTML

<abbr title="Codul numeric personal">CNP</abbr>

Ce face Atributul title

Atributul global title conține un text de sfat (tooltip) pe care majoritatea browserelor de desktop îl arată după ce ții mouse-ul câteva clipe deasupra elementului. Nu trebuie confundat cu elementul <title> din <head>, care dă titlul paginii.

Tooltipul are limite importante de accesibilitate: nu apare pe telefoane și tablete, nu apare când navighezi cu tastatura și este citit inconsecvent de cititoarele de ecran. De aceea, informația esențială nu trebuie pusă doar în title.

Unde are un rol clar: pe <abbr> și <dfn> (forma completă a abrevierii), pe <iframe> (descrierea conținutului încorporat) și pe câmpurile cu pattern, unde browserul îl adaugă la mesajul de eroare.

Atribute

Atribut	Descriere
title	Text simplu. Un caracter de rând nou din valoare produce un rând nou în tooltip.

Exemple

Exemplul 1: Forma completă a unei abrevieri

La trecerea mouse-ului peste „ANAF” apare numele complet al instituției.

<p>Declarația se depune la <abbr title="Agenția Națională de Administrare Fiscală">ANAF</abbr> până pe 25 mai.</p>

Ce afișează browserul

Declarația se depune la ANAF până pe 25 mai.
(ANAF este subliniat punctat; la hover apare: Agenția Națională de Administrare Fiscală)

Exemplul 2: Explicația formatului într-un câmp cu pattern

Dacă valoarea nu respectă modelul, browserul adaugă textul din title la mesajul de eroare.

<form>
  <label for="cod">Cod poștal</label>
  <input id="cod" name="cod" pattern="[0-9]{6}" title="6 cifre, de exemplu 700259" value="70025">
  <button>Trimite</button>
</form>

Ce afișează browserul

Cod poștal [70025] [Trimite]
La trimitere apare bula: „Potriviți formatul solicitat. 6 cifre, de exemplu 700259” (textul exact diferă între browsere).

Greșeli frecvente

• Repetarea în title a aceluiași text care e deja vizibil (de exemplu pe un link „Contact” cu title="Contact"). Cititoarele de ecran îl pot citi de două ori.
• Folosirea title în loc de <label> pentru câmpuri. Pe mobil eticheta nu apare deloc; fiecare câmp are nevoie de o etichetă vizibilă.
• Folosirea title în loc de alt pe imagini. Textul alternativ al unei imagini se pune în alt.

Comenzi înrudite

• <label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.
• <iframe>: Încorporează un alt document HTML în interiorul paginii curente (videoclipuri YouTube, hărți, widget-uri).
• <title>: Definește titlul paginii, afișat în fila browserului, în istoricul de navigare și în rezultatele Google.