HTML atribut `lang`

K čemu slouží a vyplatí se používat HTML atribut lang?

21. září 2014

5 minut

Jedná se o universální atribut (lze ho tedy použít na libovolné HTML značce, i když u některých to nedává smysl) a určuje jazyk, ve kterém je příslušný obsah.

Většinou bývá celá stránka jen v jednom jazyce, takže lang spatříme nejčastěji u značky <html>:

<html lang="cs">
  <p>
    Celý obsah stránky je česky
  </p>

Není nic proti ničemu následně lang umístit do vnořené značky <div>, formuláře nebo čehokoliv jiného.

<html lang="en">
  <div lang="cs">
    Kus obsahu v češtině.
  </div>
</html>

Funguje to potom tak, že jazyk dané oblasti vždy určuje nejbližší nadřazený element s lang.

Kódy jazyků by měly být ve formátu ISO 639-1 (seznam kódů). Tj. například:

cs – čeština
sk – slovenština
en – angličtina
de – němčina
fr – francouzština
es – španělština
it – italština
ru – ruština

Využití

Proč se ale zdržovat s určením jazyka? Je určení jazyka i využitelné v praxi?

Určení jazyka může pomoci vyhledávači nebo překladači (např. Překladač Google). Oba typy nástrojů sice mají vymyšleny systémy pro automatickou detekci, ale v jistých případech mohou selhat.
Kontrola pravopisu je dostupná ve všech běžných prohlížečích. V případě, že má uživatel více slovníků, lze použitím langu nastavit preferovaný jazyk pro kontrolu.

Týká se to kontroly ve formulářových polích (<input> a <textarea>) nebo contenteditable.

Tato funkčnost dle mých testů funguje momentálně jen ve Firefoxu. Pokusná stránka – v podporovaném prohlížeči při dostupnosti českého i anglického slovníku díky <html lang="en"> podtrhá jako chyby češtinu.
Hlasové čtečky by rovněž mohly volbu jazyka provést na základě atributu lang.
Z pohledu CSS použití langu nabídne selektor :lang() (funkční od IE 8).

U vícejazyčného webu se hodí mít dostupnou informaci o jazyku dostupnou z CSS/JavaScriptu. Atribut lang je nejspíš elegantnější řešení než třídy nebo ID.
CSS vlastnost hyphens (= dělení slov na konci řádku spojovníkem) může na základě informace o jazyku fungovat korektně podle pravidel daného jazyka.

Nakonec se nabízí využití pro změnu klávesnice na základě jazyka například u mobilních zařízení, aby lépe vyhovovala danému jazyku (diakritika), ale s tím jsem se zatím nesetkal.

Doporučení

Doporučuji tedy atribut lang správně používat. To správně je dost důležité, protože chybné použití – nastavení jiného langu, než je jazyk stránky – nadělá více škody než užitku.

To se může hravě stát při okopírování cizí HTML kostry z anglického prostředí pro použití na české stránce.