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í 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>`.

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

—

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:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

—

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í

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 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:

Tagy: web-development html meta-tags encoding utf-8 frontend

IT ENCYKLOPEDIE

Obsah