Tag HTML deprecati
Gli elementi deprecati sono ancora consentiti ma sconsigliati, in quanto sostituiti da alternative moderne. Consulta la lista dei tag HTML deprecati.
Questo capitolo spiega quali tag HTML sono deprecati, perché sono caduti in disuso e cosa usare al loro posto. Se hai ereditato del vecchio markup o copiato uno snippet da un tutorial datato, questa è la tua guida alle sostituzioni moderne.
Perché i tag HTML vengono deprecati
La maggior parte dei tag deprecati condivide un'unica causa di fondo: mescolano la presentazione (come appare il contenuto) con la struttura (cosa significa il contenuto). Il primo HTML includeva tag come <font>, <center> e <big> che controllavano colori, allineamento e dimensioni direttamente nel markup. Questo approccio non scala: cambiare l'aspetto di un sito significava modificare ogni pagina a mano.
Lo sviluppo web moderno segue il principio della separazione delle responsabilità: HTML descrive la struttura e il significato del contenuto, mentre CSS gestisce tutto lo stile. Ciò rende le pagine più facili da mantenere, più leggere da scaricare e più flessibili da ridisegnare. Migliora anche l'accessibilità — i lettori di schermo e gli altri strumenti assistivi si basano su markup significativo e semantico, non su trucchi visivi. Per un quadro completo dell'approccio moderno orientato al significato, consulta Elementi semantici in HTML5 e l'introduzione a HTML5.
Deprecato vs. obsoleto
Questi due termini vengono spesso usati in modo intercambiabile, ma non sono la stessa cosa:
- Deprecato — il tag è ancora consentito e la maggior parte dei browser lo visualizza ancora, ma il suo utilizzo è sconsigliato. Potrebbe essere rimosso in futuro.
- Obsoleto — la specifica HTML5 stabilisce che il tag non deve essere utilizzato. I browser possono continuare a visualizzarlo solo per compatibilità con versioni precedenti, ma non si dovrebbe mai scrivere nuovo markup con esso.
Non fare affidamento sul fatto che un tag deprecato "funzioni comunque." Il supporto dei browser può essere abbandonato in qualsiasi momento, e questi tag spesso si comportano in modo incoerente tra i diversi browser. Preferisci sempre la sostituzione moderna.
Prima e dopo: sostituire un tag deprecato
L'esempio classico è <font>, che impostava colore, dimensione e carattere tipografico direttamente nel markup. Ecco il vecchio metodo a confronto con il suo equivalente CSS.
Deprecato, presentazione nell'HTML:
<font color="red" size="5" face="Arial">Important notice</font>Moderno, struttura più CSS:
<p class="notice">Important notice</p>.notice {
color: red;
font-size: 1.5rem;
font-family: Arial, sans-serif;
}La seconda versione separa cosa è il testo (un paragrafo che costituisce un avviso) da come appare. Puoi ridefinire lo stile di ogni .notice nel sito modificando un'unica regola CSS. Scopri di più nelle pagine font CSS e text-align.
Note sull'accessibilità
Alcuni tag deprecati sono sconsigliati specificamente perché creano ostacoli per gli utenti:
<blink>e<marquee>producono testo lampeggiante o in movimento. Il movimento e il lampeggio sono fonte di distrazione per molti lettori, possono rendere il testo impossibile da leggere per persone con differenze cognitive o dell'attenzione, e il lampeggio rapido può persino scatenare crisi epilettiche negli utenti con epilessia fotosensibile. Se hai davvero bisogno di animazioni, usa animation CSS — e rispetta l'impostazioneprefers-reduced-motiondell'utente per permettere di disattivarle.<acronym>è stato sostituito da<abbr>perché la distinzione tra un "acronimo" e un'"abbreviazione" era confusa e incoerente. Il singolo elemento<abbr>li copre entrambi, e le tecnologie assistive possono annunciare agli utenti il testo espanso nell'attributotitle.
Elenco dei tag HTML deprecati
| TAG | Descrizione | ALTERNATIVA |
|---|---|---|
<acronym> | Indica al browser che i caratteri in esso contenuti sono un acronimo o un'abbreviazione. | <abbr> |
<applet> | Definisce un applet Java incorporato. | <object> |
<basefont> | Specifica la dimensione e il colore del carattere predefiniti per il testo. | Stili CSS |
<big> | Aumenta la dimensione del carattere di un'unità convenzionale. | Stili CSS |
<blink> | Crea un testo racchiuso che lampeggia lentamente. | animation |
<center> | Allinea il contenuto al centro. | text-align |
<dir> | Definisce un elenco di titoli di directory. | <ul> |
<font> | Definisce le caratteristiche del carattere tipografico. | Stili CSS |
<frame> | Definisce una finestra specifica, un frame, in cui è possibile caricare un'altra pagina web. | <iframe> |
<frameset> | Definisce la struttura di un frame. | <iframe> |
<isindex> | Visualizza stringhe di ricerca nel documento corrente. | <form> |
<noframes> | Contiene un testo alternativo da visualizzare nei browser che non supportano i frame. | Completamente obsoleto con <frameset>/<frame>; nessuna sostituzione diretta. |
<marquee> | Crea un testo scorrevole o un'immagine in movimento. | animation |
<spacer> | Inserisce spazio vuoto (orizzontale o verticale) per il layout. | Stili CSS (margin/padding) |
<menu> | Definisce un elenco di comandi. | <ul> |
<plaintext> | Indica al browser che il suo contenuto deve essere visualizzato come testo normale senza formattazione. | <pre> |
<strike> | Definisce il testo barrato. | <del> |
<tt> | Definisce il testo da visualizzare con un carattere a spaziatura fissa. | <code> |
Esercitati
Prossimi passi
Ora che sai cosa evitare, scopri le alternative moderne orientate al significato in Elementi HTML e Elementi semantici in HTML5, quindi sposta tutto lo stile visivo in CSS.