Di Riccardo Esposito | Pubblicato il - Aggiornato il
I caratteri speciali HTML sono entità che devono essere codificate utilizzando l’UTF-8. Serve un meta tag charset nella sezione <head> della pagina. Altrimenti devi usare delle entità specifiche, come avviene per le lettere accentate.
Usi un CMS diverso da WordPress e trovi simboli strani tipo �, caselle vuote e lettere che non comprendi? Colpa dei caratteri speciali che in HTML hanno bisogno di una codifica, come avviene ad esempio quando scrivi lettere accentate o simboli particolari.
Perché ci sono questi problemi di visualizzazione? Deve esserci una codifica dei caratteri – noto anche come charset – che dovrebbe avvenire nel documento web. In alternativa puoi inserire stringhe di codice che permettono di scrivere i caratteri speciali HTML.
Indice dei contenuti
Perché si utilizza lo standard UTF-8?
Di base l’informatica si basa su trasmissione di informazioni numeriche. Questo vale anche per internet. Di conseguenza serve un codice per trasformare informazioni digitali in umane. Questo avveniva con il codice ASCII che però contiene solo 95 caratteri.
La scrittura online, come puoi ben immaginare, è composta da un numero maggiore di elementi. La mancanza di questi codici comunicativi porta a far apparire su una pagina web dei simboli strani al posto delle lettere accentate o di apostrofi e virgolette.
Per risolvere questo problema si utilizza lo standard UTF-8 o Unicode Transformation Format, 8 bit che consente di restituire le pagine web così come si dovrebbero leggere, senza simboli strani e lettere mancanti che peggiorano la leggibilità online.
Da leggere: come gestire caratteri speciali nell’URL
Come inserire caratteri speciali in HTML?
Vuoi fare in modo che lettere accentate, simboli particolari e apostrofo appaiano nel modo giusto nelle pagine web? Questo avviene con un’impostazione standard.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />Questo serve per l’HTML4. Di base, un sito internet su WordPress con un tema aggiornato dovrebbe essere già impostato al meglio. Per verificare devi assicurarti che sia stato inserito il meta charset=UTF-8 nella sezione <head>. Con l’HTML5 questo avviene attraverso il tag <meta charset="UTF-8">, ecco un esempio preso da My Social Web.
Per visualizzare lettere accentate e apostrofi – ma anche di altri simboli speciali – sulle pagine web devi seguire queste indicazioni. Utilizzando l’una o l’altra opzione, ricordando che le nuove versioni dei browser prediligono lo standard HTML5.
Quali sono le entità HTML dei caratteri speciali
Oltre alla codifica lato UTF-8 dei caratteri speciali in HTML è possibile scrivere lettere con accenti, sia maiuscole che minuscole, o altri caratteri strani che non si trovano sulla tastiera con le entità. Che possono essere numeriche (unicode) o nominali.
La sintassi da usare sarà sempre quella che prevede apertura e chiusura con & e ; con all’interno il codice che corrisponde al simbolo. Ad esempio, é è il nominale di é di perché. Ecco la lista dei caratteri speciali HTML da fare con la tastiera.
Come inserire lettere accentate in HTML
Per realizzare accenti in HTML basta utilizzare il classico <meta charset="UTF-8">. Ma se non funziona puoi sempre ottenere e accento di diverso tipo, insieme alle altre lettere e vocali, con delle semplici entità. Ecco la lista che puoi copiare e incollare.
Fare a con accento maiuscola e minuscola
| Vocale | Entità HTML | Unicode | Lettere accentate |
|---|---|---|---|
| á | á | á | a minuscola con accento acuto. |
| Á | Á | Á | A maiuscola con accento acuto. |
| à | à | à | a minuscola con accento grave. |
| À | À | À | A maiuscola con accento grave. |
| â | â | â | a minuscola con accento circonflesso. |
| Â | Â | Â | A maiuscola con accento circonflesso. |
| å | å | å | a minuscola con anello o occhiello. |
| Å | Å | Å | A maiuscola con anello o occhiello. |
| ã | ã | ã | a minuscola con tilde. |
| Ã | Ã | Ã | A maiuscola con tilde. |
| ä | ä | ä | a minuscola con dieresi. |
| Ä | Ä | Ä | A maiuscola con dieresi. |
| æ | æ | æ | ae minuscola con legatura fonetica. |
| Æ | Æ | Æ | AE maiuscola con legatura fonetica. |
Come fare e maiuscola e minuscola con accento in HTML
| Vocale | Entità HTML | Unicode | Lettere accentate |
|---|---|---|---|
| é | é | é | e minuscola con accento acuto. |
| É | É | É | E maiuscola con accento acuto. |
| è | è | è | e minuscola con accento grave. |
| È | È | È | E maiuscola con accento grave. |
| ê | ê | ê | e minuscola con accento circonflesso. |
| Ê | Ê | Ê | E maiuscola con accento circonflesso. |
| ë | ë | ë | e minuscola con dieresi o umlaut. |
| Ë | Ë | Ë | E maiuscola con dieresi o umlaut. |
Come fare o maiuscola minuscola con accento
| Vocale | Entità HTML | Unicode | Lettere accentate |
|---|---|---|---|
| ó | ó | ó | o minuscola con accento acuto. |
| Ó | Ó | Ó | O maiuscola con accento acuto. |
| ò | ò | ò | o minuscola con accento grave. |
| Ò | Ò | Ò | O maiuscola con accento grave. |
| ô | ô | ô | o minuscola con accento circonflesso. |
| Ô | Ô | Ô | O maiuscola con accento circonflesso. |
| ø | ø | ø | o minuscola barrata. |
| Ø | Ø | Ø | O simbolo di diametro. |
| õ | õ | õ | o minuscola con tilde. |
| Õ | Õ | Õ | O maiuscola con tilde. |
| ö | ö | ö | o minuscola con dieresi. |
| Ö | Ö | Ö | O maiuscola con umlaut. |
U maiuscola e minuscola con accento in HTML
| Vocale | Entità HTML | Unicode | Lettera accentata |
|---|---|---|---|
| ú | ú | ú | u minuscola con accento acuto. |
| Ú | Ú | Ú | U maiuscola con accento acuto. |
| ù | ù | ù | u minuscola con accento grave. |
| Ù | Ù | Ù | U maiuscola con accento grave. |
| û | û | û | u minuscola con accento circonflesso. |
| Û | Û | Û | U maiuscola con accento circonflesso. |
| ü | ü | ü | u minuscola con umlaut. |
| Ü | Ü | Ü | U maiuscola con dieresi. |
Tabella con caratteri unicode per i maiuscola e minuscola accentata
| Vocale | Entità HTML | Unicode | Lettera accentata |
|---|---|---|---|
| í | í | í | i minuscola con accento acuto. |
| Í | Í | Í | I maiuscola con accento acuto. |
| ì | ì | ì | i minuscola con accento grave. |
| Ì | Ì | Ì | I maiuscola con accento grave. |
| î | î | î | i minuscola con accento circonflesso. |
| Î | Î | Î | I maiuscola con accento circonflesso. |
| ï | ï | ï | i minuscola con umlaut. |
| Ï | Ï | Ï | I maiuscola con diaeresis. |
Caratteri unicode ed entità: punteggiatura
Nell’elenco dei caratteri speciali da scrivere in HTML ci possono essere anche gli elementi noti come punteggiatura. Posso creare il punto fermo, i punti di sospensione e qualsiasi altro elemento. Come scrivere i simboli che non ci sono sulla tastiera?
| Simbolo | Entità HTML | Unicode | Punteggiatura |
|---|---|---|---|
| ! | ! | ! | Punto esclamativo. |
| ´ | ´ | ´ | Accento acuto o apostrofo senza lettera. |
| – | – | – | Trattino o meno. |
| — | — | — | Trattino lungo. |
| ¦ | ¦ | ¦ | Barra verticale spezzata. |
| ¡ | ¡ | ¡ | Punto esclamativo rovesciato. |
| ¿ | ¿ | ¿ | Punto di domanda rovesciato. |
| “ | " | " | Virgolette dritte. |
| “ | “ | “ | Virgolette inclinate a sinistra. |
| ” | ” | ” | Virgolette inclinate a destra. |
| ‘ | ‘ | ‘ | Virgoletta inclinata a sinistra. |
| ’ | ’ | ’ | Virgoletta inclinata a destra. |
Inserire simboli e frecce come caratteri
Ci sono tanti caratteri speciali che si possono utilizzare con frecce direzionali utili per gestire un testo nel miglior modo possibile. Quali sono entità HTML e relativi unicode?
| Simboli | Entità HTML | Unicode | Risultato |
|---|---|---|---|
| → | → | → | Freccia a destra. |
| ← | ← | ← | Freccia a sinistra. |
| ↑ | ↑ | ↑ | Freccia in basso. |
| ↓ | ↓ | ↓ | Freccia in basso. |
| ↔ | ↔ | ↔ | Doppia freccia orizzontale. |
| ↺ | ↺ | ↺ | Freccia in senso antiorario. |
| ↻ | ↻ | ↻ | Freccia in senso orario. |
Come inserire caratteri speciali in HTML?
Vuoi inserire simboli particolari ed elementi della punteggiatura non comuni nella scrittura online con la tastiera anche se la codifica UTF-8 non funziona? Ecco le entità HTML (case sensitive) e unicode decimale per mettere simboli particolari su una pagina.
| Simboli | Entità HTML | Unicode | Risultato |
|---|---|---|---|
| ß | ß | ß | Simbolo Beta. |
| ÿ | ÿ | ÿ | y minuscola con dieresi o umlaut. |
| « | « | « | Virgolette a sinistra. |
| » | » | » | Virgolette a destra. |
|   | Spazio vuoto HTML. | |
| & | & | & | E commerciale. |
| © | © | © | Copyright. |
| ÷ | ÷ | ÷ | Divisione. |
| > | > | > | Simbolo maggiore. |
| < | < | < | Simbolo minore. |
| µ | µ | µ | Micron. |
| · | · | · | Punto centrale. |
| ¶ | ¶ | ¶ | Delimitatore o simbolo di paragrafo. |
| ± | ± | ± | Simbolo più o meno. |
| ® | ® | ® | Marchio registrato. |
| § | § | § | Tilde o delimitatore di sezione. |
| ™ | ™ | ™ | Trademark. |
Entità HTML per scrivere simboli delle valute
Un ultimo passaggio necessario per aggiungere simboli speciali in HTML quando il sito web affronta il tema delle valute e delle misure economiche delle monete. Ecco la tabella con lista delle entità specifiche e dei valori unicode delle valute monetarie online.
| Simbolo | Entità HTML | Unicode | Valuta |
|---|---|---|---|
| $ | $ | $ | Dollaro. |
| ¢ | ¢ | ¢ | Centesimo. |
| £ | £ | £ | Pound. |
| ¥ | ¥ | ¥ | Yen. |
| € | € | € | Euro. |
Ricorda che la fonte di queste tabelle è unicode-table.com/en/html-entities. Ovviamente se hai domande su come inserire caratteri speciali, simboli, lettere accentate in HTML puoi lasciare tutto nei commenti in modo da affrontare insieme questo argomento.
Categoria: Guide per webmaster | Tag: Codice HTML