Web, UX & Technologie

HTML

Základní jazyk pro strukturu webových stránek

(HyperText Markup Language)

Co je HTML

HTML (HyperText Markup Language) je značkovací jazyk, kterým se popisuje struktura a význam obsahu webové stránky. Neurčuje, jak co vypadá, ale co to je: tohle je nadpis, tohle odstavec, tohle odkaz, tohle obrázek a takhle se jmenuje. Vzhled si bere na starost CSS.

Značky nesou význam, ne jen formátování

Rozdíl mezi nadpisem a tučným textem vypadá na obrazovce podobně. Pro stroj je propastný. Nadpis říká, kde začíná nové téma, tučné písmo neříká nic. Když redaktor v editoru zvětší písmo místo toho, aby použil nadpis druhé úrovně, člověku to projde a vyhledávači ne.

Stejný příběh mají odkazy a obrázky. Odkaz s textem „zde“ nese nulovou informaci o tom, kam vede. Popisek obrázku v atributu alt je jediné, co si z fotky odnese robot i čtečka obrazovky pro nevidomé. Obojí se přitom vyplňuje klikáním v administraci, ne programováním.

Co si z HTML odnese vyhledávač

Titulek stránky, popisek, nadpisy, odkazy a text v nich. Všechno tohle sedí v HTML a rozhoduje o tom, jak se stránka objeví ve výsledcích hledání. Pokud je obsah v HTML rovnou přítomný, má robot práci hotovou. Když ho tam dopisuje až skript, indexace se protahuje a část textu se do ní nemusí dostat vůbec.

Deset minut ve zdrojovém kódu

Když si beru na starost web klienta, prvních deset minut strávím v prohlížeči s otevřeným zdrojovým kódem. Zajímá mě, jestli má stránka jediný nadpis první úrovně, jestli jsou položky menu opravdu odkazy a ne naklikané prvky obsluhované skriptem, a jestli mají obrázky vyplněné popisky. Bývá to nudné čtení a zároveň nejlevnější seznam věcí, které se dají opravit bez programátora. Redaktor je zvládne z administrace během jednoho odpoledne.

Časté otázky

Musím jako marketér umět psát HTML?

Psát ho nemusíte. Číst se vyplatí. Když v kódu poznáte nadpis, odkaz a popisek obrázku, dokážete zadat opravu přesně a pak si ověřit, že se opravdu stala.

Jaký je rozdíl mezi HTML a CSS?

HTML popisuje, co na stránce je: nadpis, odstavec, odkaz, obrázek. CSS říká, jak to má vypadat: barvy, velikosti, rozestupy. Obsah proto zůstane čitelný i ve chvíli, kdy se styly nenačtou.

Ovlivňuje HTML přístupnost webu?

Ano, a víc než cokoliv jiného. Čtečka obrazovky se orientuje podle nadpisů, popisků obrázků a názvů formulářových polí. Kde jsou vyplněné, projde webem i nevidomý. Kde chybí, čte se z něj změť tlačítek bez jmen.