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.

—

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:

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

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í

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

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

Obsah