Hoe codeer je speciale tekens in html?

Om rare tekens te voorkomen, kun je het beste een speciale html-codering gebruiken.

Het volgende ben je vast wel eens tegengekomen op internet:

Het is duidelijk dat daar ‘één’ had moeten staan, maar om de een of andere reden zijn die twee tekens met accenten vervangen door een combinatie van vreemde karakters. Hoe kan dat?

Eigenlijk is het helemaal niet zo ingewikkeld: er is niets anders aan de hand dan dat deze webpagina – toen die werd gemaakt – is opgeslagen in een bepaalde karakterset, terwijl de browser die de pagina vertoont van een andere karakterset gebruikmaakt. Dát zorgt ervoor dat die rare tekens verschijnen op de plaats waar – meestal – tekens met accenten hadden moeten staan:

Zo is het bestand waarin de zin hierboven staat, opgeslagen in de karakterset utf-8, terwijl in de head van datzelfde bestand het volgende staat: <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Twee verschillende karaktersets

De twee karaktersets die voor Nederlandse websites het belangrijkst zijn, zijn iso-8859-1 en utf-8. De eerste set bevat wat minder karakters dan de tweede, maar voldoende voor het Nederlandse taalgebied. De tweede karakterset – utf-8 – is een enorm grote karakterset, die tekens uit praktisch alle talen ter wereld kan weergeven. Dus daarom raad ik meestal aan je webpagina’s op te slaan in utf-8.

(Niet in alle html-editors kun je zelf kiezen in welke karakterset je je webpagina’s wilt opslaan. Is er geen keuze, dan worden je pagina’s opgeslagen in utf-8.)

Instructies voor de browsers

Wat je verder moet doen om rare tekens in je pagina’s te voorkomen, is de browsers laten weten welke karakterset ze moeten gebruiken als ze je pagina’s laten zien aan je bezoekers. Dat moet dezelfde karakterset zijn als die waarin je pagina’s zijn opgeslagen. Vertel je ze niks, dan gebruiken ze iso-8859-1; wil je dat ze utf-8 gebruiken, dan zul je ze dat moeten doorgeven. Dat doe je door in de head van je website-pagina’s de volgende regel te zetten:

<meta charset="utf-8">

Ook in je stylesheet kun je een karakterset-code aangeven. Ik heb het zelf eigenlijk nooit gedaan, en er nooit problemen mee ondervonden, maar voor de volledigheid noem ik het hier toch even. Helemaal bovenaan je stylesheet kun je zetten:

@charset "utf-8";

Codes voor speciale tekens

Om problemen met de weergave van speciale tekens (zoals letters met accenten erop) te vermijden, kun je het beste een code intypen als je zo’n letter of symbool wilt gebruiken. Want dan heeft een mismatch tussen de karakterset waarin je pagina is opgeslagen en de karakterset die de browsers gebruiken als ze je pagina weergeven niet zo veel effect. Als je dan een keer per ongeluk je pagina’s opslaat in de verkeerde karakterset, blijven je pagina’s er toch nog goed uitzien.

Daarom heb ik hieronder een overzichtje gezet van de html-codes die je in beide karaktersets kunt gebruiken voor veel voorkomende speciale tekens. Alle onderstaande codes volgen een bepaald patroon: ze beginnen allemaal met een ampersand (&) en eindigen met een puntkomma (;). Daartussenin staat de afzonderlijke code voor de speciale tekens:

• letters met een accent aigue (´): &letteracute; – é is dus: &eacute;
• letters met een accent grave (`): &lettergrave; – à is dus: &agrave;
• letters met een trema (¨): &letteruml; – ï is dus: &iuml;
• letters met een circonflex (ˆ): &lettercirc; – ê is dus: &ecirc;
• letters met een cedille (¸): &lettercedil; – ç is dus: &ccedil;
• gedachtenstreepje: – (kort) = &ndash; of — (lang) = &mdash;
• enkel aanhalingsteken links (‘): &lsquo; – staat voor: left single quote
• enkel aanhalingsteken rechts (’): &rsquo; – staat voor: right single quote
• dubbel aanhalingsteken links (“): &ldquo; – staat voor: left double quote
• dubbel aanhalingsteken rechts (”): &rdquo; – staat voor: right double quote
• euro-teken (€): &euro;
• dollar-teken ($): &#36;
• pound-teken (£): &pound;
• copyright-teken (©): &copy;
• teken voor trademark (™): &8482;
• teken voor registered trademark (®): &reg;
• at symbool (@): &#64;
• zacht afbrekingsstreepje (breekt dus alleen af als er niet genoeg ruimte op de regel is): &shy; – staat voor: soft hyphen
• harde spatie (zorgt ervoor dat twee woorden bij elkaar blijven en er niet een op de ene regel terechtkomt en de volgende op de regel erna): &nbsp; – staat voor: non breaking space

Klik hier voor een uitgebreider overzicht met karaktercodes.