Skip links en inhoudsopgave

Als je dit artikel afdrukt, wordt automatisch een printvriendelijke versie afgedrukt.
Dit artikel is van toepassing op Firefox, Safari, Google Chrome, Opera en Internet Explorer 7 en 8.
Links in dit artikel, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.
Tekst die tussen << en >> staat, is een link naar internet.
Tekst die omgeven is door een lijn (meestal een stippellijn), verwijst naar een andere plaats binnen het artikel. Op de site zijn dit ankers, maar dat werkt nou eenmaal niet op papier.
Laatst herzien op 15 januari 2013.

charset of tekenset

Nu nauwelijks nog voor te stellen, maar in de begintijd kon een computer maar een zeer beperkt aantal tekens weergeven. Een van de eerste genormaliseerde charsets of tekensets is de ASCII-set, die nog steeds wordt gebruikt.

Deze set kon 127 codes bevatten, waarvan er dan ook nog 'ns 32 waren gereserveerd voor controle-tekens zoals 'n nieuwe regel. Waardoor er dus maar 95 letters en dergelijke konden worden weergegeven. In een wereld waar vele tienduizenden tekens nodig zijn om alle geschreven talen weer te kunnen geven, schiet dat niet echt op.

Al vrij snel werd de set van 127 tekens uitgebreid tot 256 tekens. Dat gaf ruimte voor wat accenten (alleen voor westerse talen) en wat speciale tekens als lijntjes. Het aantal moest tot 256 tekens worden beperkt, omdat de tekens werden weergegeven met behulp van een byte. Een byte bestaat uit 8 bit. En omdat een bit alleen 1 of 0 kan zijn, kan een byte 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256 verschillende waarden bevatten. Deze ogenschijnlijk vreemde getallen ontstaan, omdat een computer alleen met een 1 of 0 goed overweg kan.

256 tekens zet dus nog steeds niet echt veel zoden aan de dijk. Daarom ontstond een aantal verschillende sets van 256 tekens, die elk waren aangepast aan een andere taal en de in die taal voorkomende speciale tekens. Deze sets werden min of meer gestandaardiseerd door de ISO.

Als het om het afwijken van een standaard gaat, heeft Microsoft een geduchte reputatie hoog te houden. Dus Microsoft maakte zijn eigen charsets. Die lijken wel veel op die van de ISO, maar zijn net niet helemaal hetzelfde. Mede hierdoor hebben we jarenlang opgescheept gezeten met pagina's, waarin vraagtekens of vreemde tekens verschenen op de plaats, waar 'n letter met 'n accent of 'n ander speciaal teken zou moeten staan.

Een byte kan dus maar 256 verschillende tekens weergeven. Met wat kunst- en vliegwerk zou je misschien nog in één pagina verschillende charsets kunnen gebruiken, zodat je 'n aantal verschillende sets van 256 tekens zou kunnen gebruiken, maar op de vele tienduizenden die er nodig zijn, is dat toch niet echt ideaal. En dan hebben we 't nog niet eens over wetenschappelijke tekens, symbolen, noem maar op.

Als je nu 2 bytes zou gebruiken voor elk teken, dan heb je opeens 256 x 256 = 65.536 mogelijkheden. Dat begint er op te lijken. En als dat nog niet genoeg zou zijn, zou je zelfs 3 bytes kunnen gebruiken. Een fantastische oplossing.

Met helaas één gigantisch nadeel: elke tekst wordt opeens twee keer zo groot, omdat voor elk teken opeens niet één, maar twee bytes worden gebruikt. En als je drie bytes gebruikt, wordt de tekst zelfs drie keer zo groot. Voor 'n website is dit dus niet echt ideaal, want alles moet elektronisch worden verzonden.

Er zijn twee mogelijke oplossingen voor dit probleem.

Je kunt 'n beperkte charset gebruiken, die alleen maar 'n beperkt aantal tekens bevat. Zoals alle westerse letters, cijfers en de meest gebruikte accenten. Dan heb je maar 1 byte per teken nodig. Maar dan moet elke bezoeker ook precies diezelfde charset op z'n computer hebben staan, en je zit nog steeds met het maximum van 256 tekens. De tweede oplossing is beter.

utf-8

Deze betere oplossing heet utf-8. Deze charset heeft codes die variëren in grootte. Voor de meest gebruikte westerse letters en dergelijke wordt slechts 1 byte gebruikt. Voor talen als Chinees worden twee bytes gebruikt. Voor weinig gebruikte tekens kunnen nog meer bytes worden gebruikt. Het voert te ver om hier uit te leggen, hoe die codering verder precies werkt. Links naar pagina's met meer technische informatie kun je vinden op de pagina met links.

Door deze geniale truc heb je de beschikking over 'n gigantisch aantal tekens, terwijl het document toch nauwelijks groter wordt. Er is op die manier in de utf-8 ook voldoende ruimte voor allerlei wetenschappelijke tekens, symbolen, pictogrammen, en dergelijke, en zelfs voor dingen als runen, spijkerschrift en dominostenen.

Er zitten echter wel wat haken en ogen aan. Een computer slaat een pagina van 'n site op als 'n serie codes. Er zitten geen 'letters' in de computer, alleen bits. De browser zet die codes weer om naar voor mensen begrijpelijke letters en dergelijke. Maar om dat te kunnen doen, moet die letter wel in de computer zijn geïnstalleerd. Als je geen font met runen hebt geïnstalleerd, weet de computer niet, hoe hij een code moet omzetten naar een runenteken.

utf-8 geeft in potentie echter wel de mogelijkheid om dit soort dingen weer te geven. Als mensen bijvoorbeeld in runen zijn geïnteresseerd en daarvoor 'n forum bezoeken, mag je aannemen dat ze ook zo'n font met runen hebben geïnstalleerd, of dat in ieder geval willen doen. En op dat moment kunnen de forumbezoekers dus via runentekens met elkaar communiceren.

Het gebruik van utf-8 heeft 'n hele reeks voordelen boven het gebruik van andere tekensets.

utf-8 wordt over de hele wereld gebruikt, dus ook 'n Chinees kan jouw pagina op de goede manier weergeven: in westerse letters (tenzij je Chinees schrijft, maar daar ga ik maar even niet van uit). Mogelijk begrijpt ze er niets van, maar 't wordt in ieder geval goed weergegeven. En nog mooier: als je het juiste font hebt geïnstalleerd, kun jij ook 'n Chinese pagina in het Chinees bekijken!

Elke niet volstrekt prehistorische browser kan met utf-8 overweg, zelfs het vreselijke Internet Explorer 6. Problemen met 'n verschillende weergave tussen bijvoorbeeld 'n Mac of 'n Windows-computer zijn dus verleden tijd bij het gebruik van utf-8.

Elke goede editor, tekstverwerker, enz. kan tekst opslaan als utf-8. Dat wil zeggen dat accenten en dergelijke door de editor automatisch worden omgezet naar de juiste utf-8-code. Als het programma dat je gebruikt om 'n site mee te maken geen utf-8 op kan slaan, zou alleen dat al 'n reden moeten zijn om het acuut niet meer te gebruiken. Het is dan óf volstrekt verouderd, óf absolute bagger.

Dit laatste betekent dat je de meest gebruikte accenten en dergelijke kunt invoeren met de sneltoetsen, die gebruikelijk zijn voor het programma of het besturingssysteem. Het programma 'vertaalt' de accenten en dergelijke automatisch naar de juiste utf-8-code. Je kunt dus gewoon de sneltoetsen gebruiken, waar je mogelijk al aan gewend bent.

Zo kan ik op mijn Linux-systeem overal de € invoeren door simpelweg rechter-control gevolgd door C gevolgd door = in te typen. Op Linux heb je zo enkele honderden simpel te onthouden combinaties. Op 'n Mac en op Windows heb je soortgelijke mogelijkheden.

Als je opslaat als utf-8, is het in ieder geval onmogelijk dat je 'n sneltoets gebruikt voor 'n teken dat niet in de charset zit. Simpelweg omdat álle tekens erin zetten. Bij een beperktere charset kan dat wel gebeuren.

Als 'n teken niet in de charset zit en je gebruikt geen entiteit (zie hieronder), wordt het teken niet volgens de standaard opgeslagen. Bij het weergeven van de pagina in je browser krijg je dan mogelijk zo'n vreemd vierkant vraagteken of 'n vreemde reeks tekens. Of nog erger: jij ziet het wel goed, omdat jouw browser (toevallig) de goede charset gebruikt. Maar bezoekers van je site zien 'n raadsel, omdat de browser van je bezoeker niet de door jou gebruikte charset heeft.

Niet voor elk accent en dergelijke bestaat in elk programma 'n sneltoets. Om het nog maar niet over Chinees en zo te hebben. Daarom is er een tweede manier om tekens in te voeren.

Elk teken uit de utf-8 tekenset kan met behulp van een speciale code worden ingevoerd. Een utf-8-code begint altijd met &#x, en eindigt altijd met ;.

Het teken & geeft het begin van een entiteit aan. Het teken # wordt vaak gebruikt in computertalen om een getal aan te geven. De letter x wordt vaak gebruikt om aan te geven, dat het om een hexadecimaal getal gaat: een getal dat bestaat uit cijfers en letters. Op de theorie daarvan ga ik hier verder niet in, op internet is er genoeg over te vinden. Het volledige begin &#x geeft dus aan dat het hier om een hexadecimale entiteit gaat. De ; geeft het einde van de entiteit aan.

Tussen &#x en ; komen vier cijfers en/of letters te staan. In de lijst met utf-8-codes en entiteiten kun je opzoeken, welke je nodig hebt. Als je hexadecimale getallen niet begrijpt, maakt dat niets uit. Je neemt gewoon de vier letters en/of cijfers over, zoals je ook met 'n gewoon getal zou doen. Zo geeft &#x215b; de breuk ⅛.

(Als je me niet gelooft, kun je even in de broncode van deze pagina kijken. Daarin is geen breuk te vinden, maar wel de utf-8-code voor een-achtste.)

De tekens die in de lijst achter bovenstaande link staan, worden op vrijwel alle systemen weergegeven, zonder dat extra fonts nodig zijn, zelfs door Internet Explorer 6 op Windows 98. In de enkele gevallen dat dat niet zo is, staat dat erbij. Maar ook hier geldt: je moet alles goed controleren. Ook in een editor kan een foutje zitten.

Entiteit

De meest gebruikte accenten en dergelijke kun je in veel programma's met sneltoetsen invoeren. Als zo'n toets er is, kun je die gebruiken. Dat is veel makkelijker dan zo'n lastige utf-8-code invoeren. Maar niet voor elk vaak gebruikt accent en dergelijke bestaat 'n sneltoets, omdat er nou eenmaal maar een beperkt aantal sneltoetsen beschikbaar is.

Er zijn meer veel gebruikte accenten, leestekens, breuken, enz. dan er sneltoetsen zijn. Daarom is er nog een andere manier om veel gebruikte tekens in te voeren, die voor mensen makkelijker te onthouden is dan utf-8: entiteiten.

Een entiteit begint altijd met & en eindigt altijd met ;. Daartussen staat 'n voor mensen relatief makkelijk te onthouden naam, in ieder geval makkelijker te onthouden dan 'n viercijferig hexadecimaal getal. Zo wordt bijvoorbeeld het copyright-teken © ingevoerd als &copy;.

Entiteiten kun je altijd gebruiken, onafhankelijk van welke charset je gebruikt. Maar 'n ä is natuurlijk veel makkelijker te onthouden en in te voeren als (bij mij) Shift+" gevolgd door a, dan als &auml;, vooral omdat dit in mijn computer voor elk programma exact hetzelfde is voor honderden bijzondere toetsen (wie riep hier dat Windows gebruiksvriendelijker is dan Linux?).

&, < en >

Er zijn twee tekens die altijd als entiteit moeten worden ingevoerd: de ampersand & en het kleiner-dan teken <. Dat is ook vrij logisch. De & geeft het begin van een entiteit aan. Als je dit gewoon als & in zou voeren, denkt de browser dus dat er een entiteit gaat volgen, en dat kan problemen geven. Het <-teken is het begin van een tag, dus de browser gaat ervan uit dat hierna de rest van een tag volgt, en ook dat kan problemen opleveren.

De & wordt ingevoerd als &amp; (ampersand) en de < als &lt; (less than, kleiner dan).

Het teken > kan ook het best als entiteit worden ingevoerd. Dit teken geeft het einde van een tag aan. Als je dit teken gewoon als > in zou voeren, kan dit in sommige gevallen problemen geven, omdat de browser denkt dat het om het einde van een tag gaat. Dit teken wordt ingevoerd als &gt; (greater than, groter dan).

Het opgeven van de charset

Omdat een computer niet zo vreselijk slim is, moet je opgeven welke charset je gebruikt. Dat doe je met behulp van een speciale opdracht in de head van je pagina. Het kan ook worden opgegeven via de server, maar de meeste mensen zullen geen server hebben die ze kunnen instellen.

Als je geen charset opgeeft, moet de browser gaan raden welke charset er is gebruikt, en regelmatig gaat dat mis.

De volledige regel is:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Er staat meer in dan alleen de charset, omdat zo'n regel ook aan de algemene eisen voor een meta-tag moet voldoen. Deze regel eindigt op '>' Dit hoort bij een doctype voor html 4.01 en eerder. Bij een doctype voor xhtml moet de regel eindigen op ' />' (spatie plus />). Alle browsers kunnen ook overweg met de regel voor html5, die met voorsprong het makkelijkste is:

<meta charset="utf-8">

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de head, omdat hij anders door sommige browsers niet wordt gelezen.

De code moet door de editor worden opgeslagen in hetzelfde formaat als dat van de opgegeven charset. Als je dat niet doet, krijg je van die vreemde vraagtekens of andere tekens in je pagina.

Soms wordt een charset van een bestaande pagina omgezet naar een andere, bijvoorbeeld van windows-1252 naar het gestandaardiseerde utf-8. Je moet dan de code opnieuw opslaan in het formaat van de nieuwe charset. Als je dat niet doet, is de kans groot dat je bij weergave van de pagina vierkante vraagtekens en andere ongein ziet.

Als de tekst is opgeslagen volgens de indeling van windows-1252, maar bovenin je pagina staat dat hij moet worden weergegeven volgens de indeling van utf-8, tja... Het is ook wat lastig een Frans boek te begrijpen als je alleen een Duits woordenboek hebt.

Bekende problemen en bugs

Internet Explorer 7 in combinatie met Notepad (Kladblok)

Als je 'n site in Notepad (editor op Windows, in het Nederlands Kladblok) maakt en die opslaat als utf-8, kunnen in Internet Explorer 7 lege regels worden tussengevoegd. Notepad is sowieso onhandig om html mee te schrijven, want het heeft geen enkel hulpmiddel voor 't schrijven van code.

Notepad kan prima vervangen worden door Notepad++, een gratis open source editor die veel geschikter is om code mee te schrijven. (De site is Engelstalig, het programma is ook Nederlandstalig.)

Meer info over de bug in Notepad: IE 7 bug (extremely weird) en The byte-order mark (BOM) in HTML.

charset wordt niet herkend

Sommige browsers herkennen een charset niet, als deze niet helemaal bovenaan staat. Daarom kun je de charset het beste helemaal bovenaan in de head zetten, als allereerste regel. ('n Andere oorzaak kan natuurlijk 'n typefout zijn...)

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland