charset och Unicode-hantering av specialtecken
Använd UTF-8 och HTML-entiteter för att visa alla tecken korrekt
charset och Unicode-hantering av specialtecken är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
charset-deklarationen
Varje HTML-dokument måste deklarera sin teckenkodning. Standarden är UTF-8: <meta charset="utf-8"> som det allra första elementet i <head>. Utan den gissar webbläsaren, vilket ofta blir fel för text som inte är ASCII.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>Varför UTF-8?
UTF-8 kodar alla Unicode-tecken: alla skriftsystem, alla emoji och alla symboler. Det är bakåtkompatibelt med ASCII (a-z och 0-9 fortsätter att använda en byte) och är den dominerande kodningen på den moderna webben – över 98 % av sidorna var UTF-8 år 2024.
Placeringen är avgörande
Meta-taggen charset måste finnas bland dokumentets första 1024 byte – vanligtvis på den första raden i <head>. Webbläsaren identifierar kodningen utifrån dessa byte; om charset deklareras senare kanske det inte påverkar identifieringsresultatet.
Spara filer i UTF-8
Meta-taggen deklarerar kodningen, men redigeraren måste faktiskt spara filen med den kodningen. VS Code, IntelliJ och Sublime använder alla UTF-8 som standard i moderna versioner. Filer som sparas som Windows-1252 eller ISO-8859-1 ger mojibake (förvrängda tecken) även när meta-taggen är korrekt.
HTML-entiteter
Specialtecken i HTML (<, >, &, ") måste escapas för att förhindra att parsningen blir tvetydig: < för <, > för >, & för & och " för ". Inuti attributvärden är " obligatoriskt när värdet omges av dubbla citattecken.
Numeriska teckenreferenser
Alla Unicode-tecken kan refereras till med sin kodpunkt: ☃ eller ☃ för en snögubbe (☃). Använd detta när det är opraktiskt att skriva tecknet direkt (för sällsynta symboler och kontrolltecken), men föredra det bokstavliga Unicode-tecknet när redigeraren stöder det.
Emoji och surrogatpar
Emoji är Unicode-tecken ovanför U+FFFF och representeras som surrogatpar i UTF-16 (kodningen som används i JavaScript-strängar). UTF-8 kodar dem som sekvenser på 4 byte. När charset="utf-8" är angivet återges emoji direkt utan entiteter.
Vanliga kodningsfel
Att "Don't" återges som "Donât" betyder att filen tolkas som Latin-1 men sparades som UTF-8. Åtgärda det genom att spara filen som UTF-8 och kontrollera att <meta charset="utf-8"> finns. Moderna webbläsare använder UTF-8 som standard endast när meta-taggen saknas och filen sannolikt är UTF-8.
HTTP-huvudet Content-Type
Servern kan också deklarera kodningen via svarshuvudet: Content-Type: text/html; charset=utf-8. Huvudet har företräde framför meta-taggen, så felkonfigurerade servrar kan orsaka kodningsfel även i perfekt skriven HTML.
Arbeta med formulär
Formulär skickas som standard med sidans kodning. UTF-8-sidor skickar UTF-8-kodad formulärdata, som servern bör avkoda som UTF-8. Skillnader mellan sidans kodning och serverns avkodning är en vanlig källa till förvrängd användarinmatning på flerspråkiga webbplatser.
Undvik BOM
UTF-8-filer kan börja med en byteordningsmarkör (BOM, 0xEF 0xBB 0xBF). De flesta webbläsare tolererar den, men vissa verktyg och CDN:er gör det inte – och BOM visas som ett synligt tecken i vissa textredigerare. Spara filer som "UTF-8 utan BOM" för att undvika överraskningar.
Kunskapskontroll
Varför måste finnas bland de första 1024 byten i ett HTML-dokument?
Sammanfattning
Deklarera <meta charset="utf-8"> som det första barnet i <head> och spara filer i UTF-8. UTF-8 kodar alla Unicode-tecken, inklusive emoji och alla skriftsystem. Escapa <, >, & och " som entiteter; använd numeriska referenser för sällsynta tecken. Var uppmärksam på att HTTP Content-Type kan åsidosätta meta-taggen och att BOM visas som ett synligt tecken i vissa verktyg.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”charset och Unicode-hantering av specialtecken” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”charset och Unicode-hantering av specialtecken”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”charset och Unicode-hantering av specialtecken”?
Använd UTF-8 och HTML-entiteter för att visa alla tecken korrekt Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”charset och Unicode-hantering av specialtecken”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Attributet lang och skärmläsare
- dir=rtl för höger-till-vänster-text
- Elementen bdi och bdo
- charset och Unicode-hantering av specialtecken