====== HTML a meta tagy kódování ====== Správná deklarace kódování v dokumentu HTML zajišťuje, že prohlížeč správně zobrazí speciální znaky, symboly a diakritiku (např. č, ř, ž). V dnešní době je standardem používání univerzálního kódování [[it:sw:unicode|UTF-8]]. ===== 1. Meta tag charset v HTML5 ===== V moderním standardu HTML5 je deklarace kódování maximálně zjednodušena. Používá se k tomu element `` umístěný v sekci ``. Moje encyklopedie ... --- ===== 2. Proč musí být tag na začátku? ===== Prohlížeč začíná číst soubor odshora dolů. Doporučuje se umístit `` jako **úplně první prvek** v sekci ``. * Prohlížeč musí znát kódování dříve, než narazí na jakýkoliv text (včetně tagu ``), který by mohl obsahovat diakritiku. * Standardy vyžadují, aby deklarace byla v rámci prvních **1024 bajtů** dokumentu. --- ===== 3. Starší způsoby zápisu (HTML 4.01 a XHTML) ===== Před příchodem HTML5 byl zápis mnohem delší a vycházel z HTTP hlaviček. V moderních webech se s ním setkáte už jen ve starších projektech: <code> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </code> --- ===== 4. Vztah mezi HTML tagem a HTTP hlavičkou ===== Kódování může být definováno na dvou místech: 1. **HTTP hlavička:** Server pošle informaci v rámci odpovědi (`Content-Type: text/html; charset=UTF-8`). 2. **HTML Meta tag:** Definice přímo v souboru. **Pravidlo priority:** Pokud server pošle informaci v HTTP hlavičce, má tato informace obvykle přednost před tím, co je napsáno v HTML souboru. Proto je důležité mít správně nastavený i webový server (např. Apache nebo Nginx). --- ===== 5. Časté chyby a řešení ===== ==== Problém: Diakritika je poškozená (např. é místo é) ==== * **Příčina:** Soubor je uložen v kódování UTF-8, ale v HTML je deklarováno `ISO-8859-1` (nebo naopak). * **Řešení:** Vždy se ujistěte, že fyzické kódování souboru v textovém editoru (např. VS Code, Notepad++) odpovídá deklaraci v meta tagu. ==== Problém: Záhadné znaky na začátku stránky (BOM) ==== * **Příčina:** Soubor obsahuje neviditelnou značku [[it:sw:unicode#bom|Byte Order Mark]]. * **Řešení:** Uložte soubor v editoru jako "UTF-8 bez BOM". [Image showing a text editor's encoding selection menu: UTF-8 vs Windows-1250] ---- //Související články:// * [[it:sw:unicode|Standard Unicode a UTF-8]] * [[it:net:http_protocol|HTTP protokoly a hlavičky]] * [[it:net:web_servers|Konfigurace webových serverů]] //Tagy: {{tag>web-development html meta-tags encoding utf-8 frontend}}//