Guida completa alle entità HTML
Le entità HTML sono uno degli aspetti più fondamentali ma spesso fraintesi dello sviluppo web. Sono il meccanismo che consente ai browser di visualizzare caratteri che altrimenti verrebbero interpretati come markup HTML, e svolgono un ruolo cruciale nella sicurezza web. Che tu stia codificando caratteri speciali per prevenire attacchi cross-site scripting, visualizzando simboli matematici o garantendo che i contenuti vengano renderizzati correttamente in diverse codifiche, comprendere le entità HTML è essenziale per ogni sviluppatore web.
Cosa sono le entità HTML?
Un'entità HTML è una sequenza di caratteri che rappresenta un singolo carattere in HTML. Le entità iniziano con una e commerciale (&) e terminano con un punto e virgola (;). Quando il browser incontra un'entità, la sostituisce con il carattere corrispondente durante il rendering. Questo meccanismo ti consente di includere caratteri nell'HTML che altrimenti sarebbero impossibili o problematici.
<) inizia un tag, il segno di maggiore (>) termina un tag e la e commerciale (&) inizia un riferimento a entità. Se desideri visualizzare questi caratteri come contenuto visibile anziché come markup, devi codificarli come entità.
Entità HTML comuni
Sebbene l'HTML definisca oltre 2.000 entità con nome, solo alcune vengono utilizzate frequentemente nello sviluppo web quotidiano. Queste sono le entità che incontrerai e utilizzerai più spesso:
Le cinque entità obbligatorie
| Carattere | Entità con nome | Entità decimale | Entità esadecimale | Utilizzo |
|---|---|---|---|---|
| & | & | & | Deve essere sempre codificata per evitare ambiguità con i riferimenti a entità | < |
| < | < | < | Deve essere codificato per impedire l'apertura di tag HTML | > |
| > | > | > | Deve essere codificato per impedire la chiusura di tag HTML | " |
| " | " | " | Deve essere codificato all'interno di valori di attributo con virgolette doppie | ' |
| ' | ' | Deve essere codificato all'interno di valori di attributo con virgolette singole | Spazio unificatore (impedisce l'interruzione di riga) | Simbolo del copyright |
Entità simbolo di uso comune
| Carattere | Entità con nome | Descrizione |
|---|---|---|
| Simbolo di marchio registrato | Simbolo di marchio commerciale | Trattino em (lineetta lunga) |
| Trattino en (per intervalli) | Virgolette angolari doppie sinistre | Virgolette angolari doppie destre |
| Carattere punto elenco | Ellissi orizzontale (tre punti) | Registered trademark symbol |
| ™ | ™
| Trademark symbol |
| — | —
| Em dash (long dash) |
| – | –
| En dash (short dash, for ranges) |
| « | «
| Left-pointing double angle quotation mark |
| » | »
| Right-pointing double angle quotation mark |
| • | •
| Bullet character |
| … | …
| Horizontal ellipsis (three dots) |
Entità numeriche vs entità con nome
Le entità HTML esistono in due forme: con nome e numeriche. Comprendere la differenza ti aiuta a scegliere l'entità giusta in ogni situazione.
Entità con nome
< rappresenta il segno di minore e © rappresenta il simbolo del copyright. Le entità con nome sono più leggibili e memorabili, rendendo il tuo codice sorgente HTML più manutenibile. Tuttavia, le entità con nome esistono solo per un insieme limitato di caratteri — circa 2.000, mentre Unicode ne contiene oltre 140.000.
Entità numeriche
Le entità numeriche fanno riferimento ai caratteri tramite il loro punto di codice Unicode. Esistono in due forme: decimale ed esadecimale. Le entità numeriche decimali utilizzano il formato &#NNN;, dove NNN è il punto di codice decimale. Le entità esadecimali utilizzano il formato &#xHHH;, dove HHH è il punto di codice esadecimale. Ad esempio, il simbolo del copyright può essere scritto come © (decimale) o © (esadecimale).
Le entità numeriche possono rappresentare qualsiasi carattere Unicode, rendendole essenziali per i caratteri che non hanno un riferimento con nome. Se hai bisogno di visualizzare caratteri CJK rari, glifi di scritture storiche o emoji che non hanno un'entità con nome, devi utilizzare la forma numerica.
Quale usare e quando
- <, >, ", ') e per simboli comuni come ©, ®, ™. Sono più leggibili e auto-documentanti.
- Usa entità numeriche quando il carattere di cui hai bisogno non ha un'entità con nome, o quando generi HTML a livello di codice e hai bisogno di un metodo di codifica coerente e universale.
- Usa entità numeriche esadecimali quando lavori con punti di codice Unicode, poiché l'esadecimale è la notazione standard nella documentazione Unicode e nelle tabelle dei caratteri.
Quando usare le entità HTML
Sapere quando usare le entità è importante quanto sapere come usarle. Ecco gli scenari principali in cui le entità sono necessarie o vantaggiose:
1. Visualizzare caratteri riservati
<. Se scrivi un < nudo, il browser tenterà di analizzarlo come l'inizio di un tag HTML, il che potrebbe rompere il layout della tua pagina o creare vulnerabilità di sicurezza.
2. Prevenire l'ambiguità della e commerciale
Una e commerciale seguita da lettere e un punto e virgola viene sempre interpretata come riferimento a entità. Se il tuo contenuto contiene una e commerciale che non fa parte di un'entità (ad esempio in "Tom & Jerry"), devi codificarla come &. Una e commerciale non codificata seguita da testo che corrisponde per caso al nome di un'entità verrà decodificata erroneamente. Ad esempio, "AT&T" non codificato potrebbe diventare "AT&T" se il browser interpreta &T come riferimento a entità (sebbene &T non sia un'entità valida, questo comportamento è comunque tecnicamente scorretto).
3. Includere caratteri non disponibili da tastiera
Caratteri come trattini, simboli di copyright e operatori matematici possono essere difficili da digitare su una tastiera standard. Le entità forniscono un modo affidabile per includere questi caratteri senza dipendere dal metodo di input del tuo editor o dalla mappa caratteri. Ad esempio, — è spesso più facile da digitare che cercare il carattere del trattino sulla tastiera.
4. Spazio unificatore
L'entità crea uno spazio unificatore che impedisce al browser di andare a capo in quella posizione. Questo è fondamentale per mantenere insieme parole correlate sulla stessa riga, come "10 kg", "Capitolo 3" o nomi di marchi che non dovrebbero essere divisi tra le righe. Viene anche comunemente usato per creare spaziatura visiva nei layout dove i CSS non sono appropriati.
Implicazioni di sicurezza: protezione XSS
La codifica delle entità HTML è una delle linee di difesa più importanti contro gli attacchi cross-site scripting (XSS). L'XSS si verifica quando un utente malintenzionato può iniettare codice eseguibile in una pagina web visualizzata da altri utenti. La codifica delle entità lo previene convertendo i caratteri pericolosi nei loro equivalenti sicuri come entità.
Come la codifica delle entità previene gli XSS
e la pagina viene renderizzata senza codifica, il browser eseguirà lo script. Tuttavia, se l'output è codificato come entità, diventa <script>alert('xss')</script>, e il browser lo visualizza come testo letterale anziché eseguire codice.
Regole di codifica specifiche per contesto
La codifica delle entità funziona nei contesti di contenuto HTML e attributi, ma contesti diversi richiedono strategie di codifica diverse:
- <, >, & come entità. Questo impedisce l'iniezione di nuovi tag HTML.
- <, >, &, ", ' come entità. Le virgolette devono essere codificate per impedire l'uscita dal valore dell'attributo.