====== 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 `<meta>` umístěný v sekci `<head>`.

<code>
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <title>Moje encyklopedie</title>
</head>
<body>
    ...
</body>
</html>
</code>



---

===== 2. Proč musí být tag na začátku? =====

Prohlížeč začíná číst soubor odshora dolů. Doporučuje se umístit `<meta charset="UTF-8">` jako **úplně první prvek** v sekci `<head>`.
  * Prohlížeč musí znát kódování dříve, než narazí na jakýkoliv text (včetně tagu `<title>`), který by mohl obsahovat diakritiku.
  * Standardy vyžadují, aby deklarace byla v rámci prvních **1024 bajtů** dokumentu, aby ji parser stihl zpracovat před vykreslením obsahu.

---

===== 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 formátu 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, přičemž dochází k hierarchii priorit:
  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 uvnitř souboru.

**Pravidlo priority:** Pokud server pošle informaci v HTTP hlavičce, má tato informace přednost před tím, co je napsáno v HTML souboru. Pokud hlavička chybí, prohlížeč se řídí meta tagem.



---

===== 5. Časté chyby a řešení =====

==== Problém: Rozbitá diakritika (např. é místo é) ====
  * **Příčina:** Soubor je uložen v kódování UTF-8, ale v HTML je deklarováno jiné kódování (např. Windows-1250), nebo naopak.
  * **Řešení:** Vždy se ujistěte, že fyzické kódování souboru v textovém editoru (nastavení "Encoding") 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í:** V editoru (např. VS Code nebo Notepad++) zvolte při ukládání možnost **"UTF-8"** (nikoliv "UTF-8 with BOM").



----
//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}}//