Ben's Hobbyhoekje -- Speciale karakters in HTML

Speciale karakters in HTML

Dit verhaal is ontstaan in de tijd dat HTML 4 de gangbare standaard was. Dat is al jaren niet meer het geval. Er is nu HTML5, dat op gebied van het tonen van speciale karakters veel meer mogelijkheden heeft. De essentie van het verhaal is echter niet veranderd. Dit verhaal blijft hier dus gewoon staan.

Het hele internet draait om informatie. Informatie breng je over met behulp van plaatjes, maar vooral met tekst. Tekst bestaat uit zinnen die weer uit woorden en leestekens bestaan. De meeste letters waarmee de woorden gevormd worden kun je direct invoeren vanaf je (standaard-)toetsenbord.
Letters met accenten staan niet op een standaard toetsenbord. Moderne tekstverwerkers hebben daar een oplossing voor. Als je bijvoorbeeld de combinatie 'e tikt, verschijnt er é op je scherm.
In HTML werkt het anders. Daar moet je karakter referenties gebruiken. Dat zijn codes waarmee je letters met acccenten, maar ook speciale tekens kunt maken zoals het Euro-teken €.

Er zijn twee soorten karakter referenties: numerieke karakterreferenties en karakter entiteitsreferenties.

numerieke karakterreferenties
Een numerieke karakterreferentie heeft de vorm: &#xxxx; (let op de punt-komma)
Op de plaats van xxxx vul je het rangnummer in (max. vier cijfers) binnen de karakterset. Dat is een gestandaardiseerde lijst met karakters. Wereldwijd worden er ongeveer 15 van deze lijsten gebruikt, die zijn vastgelegd in de internationale norm ISO 8859. In de westerse wereld is de lijst iso-8859-1 (Ook bekend als Latin-1) het meest gebruikt.

In deze lijst heeft elk karakter een nummer. Zo is de letter A nr. 65, B is nr. 66, a is nr. 97, enz.
Ook speciale karakters kun je op deze manier aanduiden; de letter è is nr. 232, é is nr. 233, … is nr. 8230, ‰ is nr. 8240, enz.
Het €-teken is nr. 8364.

Een toelichtend verhaal over karaktersets staat HIER.
Het voert te ver om hier alle numerieke karakter-codes te noemen. In het dagelijkse gebruik zijn ze ook onhandig omdat het moeilijk is om al die aparte codes te onthouden. Je kunt beter gebruik maken van karakter entiteitsreferenties. Daar zit veel meer structuur in.

karakter entiteitsreferenties
De aparte numerieke karakter codes zijn moeilijk te onthouden. Daarom definieert de HTML-standaard de karakter entiteitsreferenties, waarmee het veel eenvoudiger werken is.
De referenties zijn er alleen voor de "speciale" karakters, niet voor de gewone letters en cijfers. Ze hebben de vorm &naam; (let op de punt-komma). Zo is bijvoorbeeld è is è, é is é, ‰ is &permil;, … is …, enz.
Het €-teken is €.

Alle browsers ondersteunen de numerieke karakterreferenties. De gangbare karakter entiteitsreferenties (zoals letters met accenten) worden door alle moderne browsers ondersteund. Bij de wat minder gangbare entiteitsreferenties (zoals wiskundige symbolen) kun je voor verassingen komen te staan. De entiteiten worden als gewone tekst op het scherm gezet, of je krijgt in plaats van het teken een vierkantje te zien, of er wordt niets getoond. Dat kun je voorkomen door een <META>-tag in de <head> van je HTML-bestand te zetten:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

In voorkomende gevallen is het te proberen om de numerieke karakterreferentie op te zoeken en in je code te zetten.
Dit soort problemen zal langzamerhand gaan verdwijnen, omdat de ondersteuning voor karakter entiteitsreferenties met elke nieuwe versie van de browsers wordt verbeterd.

Merk op dat de spelling van karakter entiteitsreferenties hoofdlettergevoelig is. Dit is een uitzondering op de regel in HTML, dat niet gevoelig is voor hoofd- of kleine letters. Zo geeft de entiteit ë het karakter ë op je scherm, maar Ë geeft Ë.
Een overzicht van de bestaande entiteitsreferenties in HTML 4 vind je HIER.
N.B.: In HTML5 zijn er veel meer karakter entiteiten dan hier wordt getoond. Zie daarvoor de overzichten A t.m. Z bij de HTML entities op w3schools.com. Die overzichten omvatten de gehele karakterset UTF-8.

In de manier waarop de karakter entiteiten zijn gedefinieerd zit een zekere structuur.

Een letter met accent is: De letter gevolgd door het accent.
á toont á op je scherm.
Ligamenten (twee letters aan elkaar): De letters gevolgd door lig.
&OElig; toont Œ op je scherm.
Er wordt gebruik gemaakt van logisch klinkende keywords.
÷ toont het teken voor 'delen' ÷ op je scherm.

Het gebruik van karakterreferenties is niet dwingend voorgeschreven. Als verwarring uitgesloten is mag je het "echte" karakter gebruiken in plaats van de referentie. De meest zekere aanpak is echter karakterreferenties gebruiken.
Als je HTML-code wilt weergeven op je web-pagina, zoals dat op deze site heel veel gebeurt, is er gauw sprake van verwarring. De browser zal niet meer weten wat er nu tekst is en wat er nu tag is. Dat kun je zelf bepalen door gebruik te maken van de entiteiten <, >, " en & om de tekens <, >, " en & weer te geven.

Opmerking
Bij oudere browsers werken niet alle karakterreferenties. Je krijgt dan de code te zien, niet het teken. In plaats van bijv. de karakters ⅓, ⅔, ⅛, ⅜, ⅝ en ⅞, zie je op het scherm: &frac13;, &frac23;, &frac18;, &frac38;, &frac58; en &frac78;.