HTML 101/Lekce 3

3. Formátování textu a sémantika

V minulé lekci jsme se podívali na absolutně základní elementy a strukturu HTML dokumentů. V této lekci se zaměříme na text a elementy využívané na jeho formátování. Nejdříve si ale vysvětlíme sémantiku...

Sémantika

Sémantika je nauka o významu slov. V kontextu HTML tato věda znamená v zásadě to stejné, jen v rámci elementů a jejich interpretace prohlížeči. Vývoj webových stránek totiž není pouze o tom, jak věci vypadají pro uživatele - je také o tom, jak "vypadají" i pro počítače. Vezměte si tyto dva elementy - <b> a <strong>. Oba vypadají stejně - činí text tučným. V jejich funkci je ale rozdíl - zatímco <b> se používá pouze pro vizuální zvýraznění, <strong> říká prohlížeči, že text, jenž obklopuje, je nějakým způsobem důležitý. O těchto dvou elementech konkrétně si řekneme později v této lekci.

Správné užití elementů může pomoct čtečkám obrazovek a umístění stránky ve vyhledávacích výsledcích, a tak by se význam elementů neměl ignorovat.

Nadpisy <h1> - <h6>

V HTML existuje celkem šest elementů, které fungují jako nadpisy - <h1>, <h2>, <h3>, <h4>, <h5> a <h6>. Všechny jsou párovými tagy a na rozdíl od všech ostatních elementů, které si v této lekci představíme, by nikdy nemělo jít o potomky <p>.

Každý typ nadpisu má jinou sémantickou úroveň - <h1> je na té nejvyšší a je tak pro prohlížeče nejdůležitější, zatímco <h6> na té nejnižší a je méně důležitý. Nadpis nejvyšší úrovně by se měl na jedné stránce použít pouze jednou.

<h1>Nadpis první a pro prohlížeče nejdůležitější úrovně</h1>
<h2>Nadpis druhé úrovně</h2>
<h3>Nadpis třetí úrovně</h3>
<h4>Nadpis čtvrté úrovně</h4>
<h5>Nadpis páté úrovně</h5>
<h6>Nadpis šesté a pro prohlížeče nejméně významné úrovně</h6>

Hiearchie

Obecně platí, že by měla mezi nimi platit pevná hiearchie - všechny nadpisy <h2> by měly být podřazeny nadpisu <h1>, všechny <h3> nadpisům <h2>, a tak dále. Nikdy by se například nemělo stát, že po <h1> bude přímo následovat <h3>.

Důvodem je fakt, že mnoho uživatelů se čtečkami obrazovek rychle přeskakuje od nadpisu k nadpisu, aby rychle vyhodnotili obsah stránky. Pokud se ale vynechá jedna nebo více úrovní nadpisů, uživatel se bude pravděpodobně divit, kam se poděly. Prohlížeče navíc nadpisy používají k indexaci obsahu stránky.

<!-- Tohle je špatně! -->
<h1>Nadpis první úrovně</h1>
<h3>Nadpis třetí úrovně, přímo podřazen nadpisu první úrovně</h3>
<h2>Nadpis druhé úrovně, přímo podřazen nadpisu první úrovně</h2>
<h3>Nadpis třetí úrovně, přímo podřazen nadpisu druhé úrovně</h3>

<!-- Tohle je správně! -->
<h1>Nadpis první úrovně</h1>
<h2>Nadpis druhé úrovně, přímo podřazen nadpisu první úrovně</h2>
<h3>Nadpis třetí úrovně, přímo podřazen nadpisu druhé úrovně</h3>
<h2>Nadpis druhé úrovně, přímo podřazen nadpisu první úrovně</h2>

Formátování textu

Tučný text <b>, <strong>

Tyto dva elementy jsme si již zmínili - používají se ke ztučnění textu. Zatímco <strong> říká prohlížeči, že text, který obklopuje, je důležitý, u <b> (bold) tomu tak není.

<p>
    Zatímco tohle je <strong>důležitý text</strong>,<br>
    tohle <b>není</b>.
</p>

Vizuálně není mezi nimi žádný rozdíl, jak lze vidět na obrázku níže:

Kurzíva <i>, <em>

Párové tagy <i> (italics) a <em> (emphasis) se používají na vyznačování kurzívy. <em> by se měl používat na slova, na která by měl být kladen důraz, <i> zase na text, který se nějakým způsobem od toho ostatního liší (např. názvy lodí, technické termíny, transliterace (neboli přepis textu z jedné abecedy do jiné) apod).

Stejně jako v případě <b> a <strong> mezi nimi není žádný vizuální rozdíl.

<p>
    HTML <em>není</em> programovacím jazykem, protože není <i>turingovsky kompletní</i>.
</p>

Přeškrtnutí <s>, <del>

K přeškrtnutí částí textu se používají dva elementy - <s> (strikethrough) a <del> (deleted). <s> slouží pro vyznačení textu, který již není relevantní nebo platný, zatímco <del> pro vyznačení textu, který by měl být z dokumentu odstraněn.

<p>
    Toustovač <s>byl vynalezen Alanem MacMasterem</s> je výsledkem práce mnoha vynálezců.<br>
    <del>Alan MacMaster ho vynalezl roku 1893.</del>
</p>

Podtržení <u>, <ins>

Pro podrtržení textu slouží elementy <u> (underline) a <ins> (inserted). <ins> vyznačuje text, jenž byl do dokumentu vložen až po jeho vydání, a tak často používá v kombinaci s elementem <del>. <u> reprezentuje text, jenž se od toho ostatního stylisticky liší (a používá se např. na vyznačování gramaticky chybných slov, což je užitečné spíše pro skripty).

<p>
    Toustovač je <u>přítsroj</u> sloužící k opékání krajíců chleba.<br>
    <del>Alan MacMaster ho vynalezl roku 1893.</del>
    <ins>Za jeho vynález byl v letech 2012-2022 často kreditován Alan MacMaster. To je ale pouze hoax - MacMaster je pouze vymyšlenou osobou.</ins>
</p>

Zvýraznění <mark>

<mark> je párový tag používaný pro velmi viditelné zvýraznění nějakého důležitého textu, který by měl čtenáře zajímat.

<p>
    Gliese 667 Cc je exoplaneta v systému Gliese 667. Je o 54 % větší než Země a obíhá hvězdy v tzv. obyvatelné zóně. Jeden tamější rok trvá něco přes 28 dní a teplota na povrchu je odhadována na 4 °C. Planeta je svými parametry dosti podobná Zemi a <mark>teoreticky by se na ní mohl vyskytovat život</mark>. 
</p>

Dolní index <sub>

Párový tag <sub> (subscript) je využívaný pro vytváření dolních indexů. Ty jsou využívají například v chemických či algebraických vzorcích.

<p>
    Oxid uhličitý (C0<sub>2</sub>) je bezbarvý plyn těžší než vzduch. 
</p>

Horní index <sup>

Párový tag <sup> (superscript) je používán pro tvorbu horních indexů. Stejně jako dolní indexy se používají v chemii a matematice.

<p>
    2<sup>0</sup> = 1<br>
    2<sup>1</sup> = 2<br>
    2<sup>2</sup> = 4<br>
    2<sup>3</sup> = 8<br>
    2<sup>4</sup> = 16
</p>

Vnořování elementů

Tagy můžete do sebe vnořovat (tzv. nesting). To jsme si ukázali již v minulé lekci v rámci rodičovských elementů a potomků.

V oblasti formátování textu lze toho využít ke kombinaci efektů různých elementů (např. vytvoření tučné kurzívy). Měli byste si ale dávat pozor na uzavírání tagů ve správném pořadí!

<p>
    HTML je <em><strong>značkovací jazyk</strong></em>, ne programovací.<br><br>
    Vzorec pro vodu je <strong>H<sub>2</sub>O</strong>.
</p>

Sémantika a vzhled

Obecně platí, že by se sémantické elementy neměly využívat pro čistě vizuální účely, protože to může snížit umístění vašeho webu ve vyhledávacích výsledcích a zhoršit přístupnost. Ke stylizování se používá pouze CSS.

Nepoužívejte tak například element <sub> pouze na zmenšení velikosti textu.

Formátování v praxi

Níže je příklad HTML dokumentu využívající některé elementy, které jsme v této lekci probrali.

Poznámka: V některých případech je formátování nadbytečné.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 101, lekce 3 - příklad</title>
    </head>
    <body>
        <h1>Longyearbyen</h1>
        <p><strong>Longyearbyen</strong> (rusky <i>Лонгйир</i>) je největší město na souostroví Špicberky. Má okolo 2 144 obyvatel. <mark>Je to nejseverněji položené město na světě</mark>.</p>
        <h2>Historie</h2>
        <p>Město založil v roce 1906 Američan John Munroe Longyear. Tehdy se jmenovalo Longyear City.<br>V roce 1916 se zde začalo <mark>těžit uhlí</mark>, těžbu provozovala firma Store Norske Spitsbergen Kulkompani. V současné době je v okolí města <mark>v provozu pouze jeden důl</mark>.</p>
        <h2>Turistika</h2>
        <p><em>Většina</em> turistů navštíví <strong>Longyearbyen</strong> na jaře a v létě. Asi 3 km západně od města je letiště Špicberky, ze kterého se dá odletět do Tromsø nebo do Osla v Norsku. </p>
    </body>
</html>

Kód uvedený výše vytvoří takovou stránku:

Od minulé lekce dost významný posun! I přesto jde ale o pouhý začátek.

Příští lekce

V příští lekci se podíváme na dělení elementů do dvou skupin (blokové a řádkové) a rozdíly mezi nimi.