Complete Gids voor HTML Entities

HTML entities zijn een van de meest fundamentele maar vaak verkeerd begrepen aspecten van webontwikkeling. Ze zijn het mechanisme waarmee browsers tekens kunnen weergeven die anders als HTML-markup zouden worden geïnterpreteerd, en ze spelen een kritieke rol in webbeveiliging. Of je nu speciale tekens encodeert om cross-site scripting-aanvallen te voorkomen, wiskundige symbolen weergeeft, of ervoor zorgt dat je inhoud correct wordt weergegeven in verschillende encodings, het begrijpen van HTML entities is essentieel voor elke webontwikkelaar.

Wat Zijn HTML Entities?

Een HTML entity is een reeks tekens die één enkel teken in HTML vertegenwoordigt. Entities beginnen met een ampersand ( & ) en eindigen met een puntkomma ( ; ). Wanneer de browser een entity tegenkomt, vervangt deze deze door het bijbehorende teken tijdens het renderen. Dit mechanisme stelt je in staat tekens in je HTML op te nemen die anders onmogelijk of problematisch direct te vertegenwoordigen zouden zijn.

< ) start een tag, het groter-dan-teken ( > ) beëindigt een tag, en de ampersand ( & ) start een entity-referentie. Als je deze tekens als zichtbare inhoud wilt weergeven in plaats van markup, moet je ze als entities encoderen.

Veelvoorkomende HTML Entities

Terwijl HTML meer dan 2.000 benoemde entities definieert, wordt een klein handvol constant gebruikt in het dagelijkse webontwikkeling. Dit zijn de entities die je het vaakst zult tegenkomen en gebruiken:

De Vijf Vereiste Entities

Veelgebruikte Symbool Entities

Numerieke vs Benoemde Entities

HTML entities komen in twee vormen voor: benoemd en numeriek. Het begrijpen van het verschil helpt je de juiste te kiezen voor elke situatie.

Benoemde Entities

< vertegenwoordigt bijvoorbeeld het kleiner-dan-teken, en vertegenwoordigt het copyright-symbool. Benoemde entities zijn gemakkelijker te lezen en te onthouden, wat je HTML-broncode beter onderhoudbaar maakt. Benoemde entities bestaan echter slechts voor een beperkte set tekens — ongeveer 2.000 van de meer dan 140.000 tekens in Unicode.

Numerieke Entities

Numerieke entities refereren naar een teken via zijn Unicode-codepunt. Ze komen in twee vormen voor: decimaal en hexadecimaal. Decimale numerieke entities gebruiken het formaat &#NNN; waarbij NNN het decimale codepunt is. Hexadecimale entities gebruiken het formaat &#xHHH; waarbij HHH het hexadecimale codepunt is. Het copyright-symbool kan bijvoorbeeld worden geschreven als © (decimaal) of © (hexadecimaal).

Numerieke entities kunnen elk Unicode-teken vertegenwoordigen, waardoor ze essentieel zijn voor tekens die geen benoemde entity-referenties hebben. Als je een zeldzaam CJK-teken, een historisch schrift-glyf, of een emoji die geen benoemde entity heeft wilt weergeven, moet je de numerieke vorm gebruiken.

Wanneer Elke Te Gebruiken

• < , > , " , ) en veelvoorkomende symbolen zoals , , en . Ze zijn beter leesbaar en zelfdocumenterend.
• Gebruik numerieke entities wanneer er geen benoemde entity bestaat voor het teken dat je nodig hebt, of wanneer je programmatisch HTML genereert en een consistente, universele encoding-methode nodig hebt.
• Gebruik hexadecimale numerieke entities bij het werken met Unicode-codepunten, aangezien hexadecimaal de standaardnotatie is in Unicode-documentatie en tekenoverzichten.

Wanneer HTML Entities Te Gebruiken

Weten wanneer je entities moet gebruiken is net zo belangrijk als weten hoe. Hier zijn de belangrijkste scenario's waarin entities noodzakelijk of voordelig zijn:

1. Gereserveerde Tekens Weergeven

< schrijven. Als je een kale < schrijft, zal de browser proberen dit te parseren als het begin van een HTML-tag, wat je pagina-indeling kan breken of beveiligingskwetsbaarheden kan creëren.

2. Dubbelzinnige Ampersands Voorkomen

Een ampersand gevolgd door letters en een puntkomma wordt altijd geïnterpreteerd als een entity-referentie. Als je een ampersand in je inhoud hebt die geen deel uitmaakt van een entity (zoals in "Tom & Jerry"), moet je deze encoderen als . Een niet-gecodeerde ampersand gevolgd door tekst die toevallig overeenkomt met een entity-naam wordt onjuist gedecodeerd. "AT&T" zonder encoding kan bijvoorbeeld "AT&T" worden als de browser interpreteert als een entity-referentie (hoewel geen geldige entity is, is het gedrag nog steeds technisch een fout).

3. Niet-toetsenbordtekens Opnemen

Tekens zoals em-strepen, copyright-symbolen en wiskundige operatoren kunnen moeilijk te typen zijn op een standaard toetsenbord. Entities bieden een betrouwbare manier om deze tekens op te nemen zonder afhankelijk te zijn van de invoermethode of tekenkaart van je editor. is bijvoorbeeld vaak gemakkelijker te typen dan het em-streepteken op een toetsenbord te vinden.

4. Niet-Afbreekbare Spaties

De entity creëert een niet-afbreekbare spatie, wat voorkomt dat de browser tekst op die positie afbreekt. Dit is essentieel om gerelateerde woorden bij elkaar te houden op dezelfde regel, zoals "10 kg", "Hoofdstuk 3", of merknamen die niet over regels moeten worden gesplitst. Het wordt ook veel gebruikt om visuele spatiering te creëren in layouts waar CSS niet geschikt is.

Beveiligingsimplicaties: XSS-preventie

HTML entity encoding is een van de belangrijkste verdedigingen tegen Cross-Site Scripting (XSS)-aanvallen. XSS treedt op wanneer een aanvaller uitvoerbare code kan injecteren in een webpagina die door andere gebruikers wordt bekeken. Entity encoding voorkomt dit door gevaarlijke tekens om te zetten in hun veilige entity-equivalenten.

Hoe Entity Encoding XSS Voorkomt

, wat de browser weergeeft als letterlijke tekst in plaats van uit te voeren als code.

Context-Specifieke Encoding-regels

Entity encoding is effectief in HTML-inhoud en attribuut-contexten, maar verschillende contexten vereisen verschillende encoding-strategieën:

• < , > , & als entities. Dit voorkomt injectie van nieuwe HTML-tags.
• < , > , & , " , ' als entities. Aanhalingstekens moeten worden gecodeerd om te voorkomen dat je uit de attribuutwaarde breekt.