Tabelle dei simboli HTML

Una delle cose che sempre più spesso vengono sottovalutate quando si fanno siti web, in particolare quando si utilizzando strumenti di editing visuale come il FrontPage o il DreamWeaver, è l’uso dei simboli.

In pratica vediamo che sulla tastiera ci sono determinati simboli e semplicemente premendoli questi vengono inseriti come testo all’interno della pagina sulla quale si sta lavorando.

Nulla di più sbagliato.

Questi simboli verrano visti dalla stragande maggioranza delle persone che utilizzano il nostro stesso set di caratteri. Ma da tutti gli altri?

Per lo loro la pagina riserverà tanti bei quadratini perchè - estremizzando il concetto - il loro sistema operativo non è in grado di interpretare quel determinato simbolo. A parte il discorso puramente estetico, vi è poi un altro problema nascosto.

Per certi versi la pagina non dovrebbe essere validabile. Parlo al condizionale, perchè qualsiasi validatore abbia utilizzato fino ad oggi mi ha sempre e comunque validato la pagina senza storcere muso; anche il validatore del W3C Consortium.

Del resto il compito del validatore è verificare che il documento sia sintatticamente valido, che tutti i tag quindi siano aperti e chiusi correttamente, che sia annidati senza ingarbugliamenti vari, e non verificare che un dato carattere in corrispondenza di uno specifico charset sia visualizzabile.

Una mancanza a cui si dotrebbe ovviare a mio avviso.

Ma facciamo un esempio pratico. Copiate e incollate questi due blocchi di codice in un due file .htm o .html sul vostro desktop o dove più vi piace, quindi apriteli con il browser e vedrete quello di cui sto parlando. In questi due blocchi di codice ho volutamente omesso la definizione del doctype, quindi non sarebbero comunque validabili le pagine, ma per il test che dobbiamo fare sono perfetti così.

Blocco di codice errato:<title>test</title><meta content="text/html; charset=EUC-JP" http-equiv="Content-Type"></meta>竪 una gran bella giornataBlocco di codice corretto:<title>test</title><meta content="text/html; charset=EUC-JP" http-equiv="Content-Type"></meta>è una gran bella giornataCome vedete ho utilizzato un charset appositamente diverso dal nostro, quello giapponese per l’appunto.

Caricando le due pagine, avrete modo di vedere che la prima pagina mostrerà quel quadratino di cui parlavo, mentre nel secondo caso, la e accentata sarà perfettamente visibile, anche per i giapponesi nonostrante loro non abbiano la minima idea di cosa sia la e accentata.

A tal proposito si rivela quindi necessario sostituire tutti i caratteri particolari - al di fuori della convenzionale tabella ASCII - con l’apposito carattere UNICODE formattato all’uopo affinchè sia comprensibile anche per l’HTML e per qualunque sistema in uso.

Il supporto, ad oggi, per l’HTML 4.0 è decisamente migliorato rispetto a tanti anni fa, e si possono praticamente utilizzare tutti i simboli che normalmente si vedono rappresentati sulla tastiera (e all’interno della tabella simboli di alcuni software tra cui gli editor di testi).
Tuttavia, in queste tabelle che seguono mi limiterò a proporre i caratteri e i simboli più comunemente utilizzati.

E sulla falsa riga di una frase famosa … Prendetene tutti e copiatene, ma ricordatevi di lasciare il punto e virgola alla fine di ogni codice perchè fa parte del codice stesso.

Tabella dei simboli
SimboloHTMLHTML Alt.SimboloHTMLHTML Alt.
 &#160;&nbsp;(&#40; 
)&#41; #&#35; 
<&#60;&lt;>&#62;&gt;
%&#37; [&#91; 
]&#93; &&#38; 
{&#123; }&#125; 
*&#42; «&#171;&laquo;
»&#187;&raquo;@&#64; 
&#139; &#155; 
~&#126; ˆ&#136; 
&#133; /&#47; 
^&#94; \&#92; 
&#137; &#134; 
&#135; _&#95; 
|&#124; ¦&#166;&brvbar;
¬&#172;&not;§&#167;&sect;
&#182;&pilcro;¯&#175;&macr;
ª&#170;&ordf;º&#186;&ordm;
°&#176;&deg;&#149; 
·&#183;&middot;&#150; 
&#151; ˜&#152; 
©&#169;&copy;®&#174;&reg;
&#153; ¹&#185;&sup1;
²&#178;&sup2;³&179;&sup3;

Tabella della punteggiatura
SimboloHTMLHTML Alt.SimboloHTMLHTML Alt.
!&#33; &#34; 
&#39; ,&#44; 
.&#46; :&#58; 
;&#59; ?&#63; 
`&#96; &#130; 
&#145; &#146; 
&#147; &#148; 
¡&#161;&iexcl;¨&#168;&uml;
&#132; ´&#180;&acute;
¸&#184;&cedil;¿&#191;&iquest;

Tabella dei simboli matematici
SimboloHTMLHTML Alt.SimboloHTMLHTML Alt.
+&#43; -&#45; 
±&#177;&plusmn;¼&#188;&frac14;
½&#189;&frac12;¾&#190;&frac34;
×&#215;&mult;÷&#247;&div;
=&#61; ƒ&#131; 
µ&#181;&micro;&empty;&#8709;