---

Prvek <strong> vs. <b>

Už vám někdy někdo říkal že by jste měli zapomenout na prvky typu <b> a <i> a začali místo nich konečně používat <strong> a <em>, přičemž vám nevysvětlil proč? Tento článek by vám měl vysvětlit co tyto prvky umí a jak by se s němi podle standardů mělo pracovat.

Naším hlavním cílem při tvorbě stránek by mělo být oddělení prezentačního kódu od kódu sémantického. K tomu se nám nesmírně hodí CSS. Do nějakého externího souboru si uložíme informace o vizuální podobě stránky, a software bude pracovat pouze s údaji o struktuře stránky. Údaji o struktuře stránky myslím kód bez vizuálních prvků jako je třeba <b> , <center> , <i> atd, jelikož tyto prvky sdělují prohlížeči pouze informace o způsobu zobrazení a nic víc (jako třeba informace o významu/struktuře). Opakem těchto prvků je například párový tag <h1> , který říká prohlížeči že se jedná o nadpis, a prohlížeč mu proto také přidělí větší důležitost než ostatnímu textu na stránce. A také proto má tento tag význam strukturální, jelikož stránce přiděluje nějakou strukturu. A to nejlepší na tom je, že většina prohlížečů ho ještě zobrazí větším tučným písmem. Ale nyní k našemu problému.

Nejdříve se podívejme jak W3C charakterizuje prvky <strong> a <em> :

Prvky frází dodávají částem textu informace o struktuře. Obvyklý význam prvků frází je následující: <em> značí důraz, <strong> značí větší důraz. Prezentace prvků fráze závisí na uživatelském zařízení (user agent). Obecně vzato, vizuální uživatelská zařízení prezentují text vybavený prvkem <em> jako kurzívu, text s prvkem <strong> tučně. Uživatelská zařízení v podobě syntezátoru hlasu zase mění paramentry syntézy jako hlasitost, výška, rychlost.

Možná už vás napadlo, co se sémantickým (strukturálním) kódem myslí. Vysvětlil bych to na příkladu se čtečkami obrazovky (syntezátory hlasu). Pokud bychom v textu použili prvek <b> , čtečka obrazovky by text v tomto tagu přečetla stejně jako vedlejší normální text, ale pokud bychom použili prvek <strong> , čtečka by s tímto textem naložila podle svých možností (zvýšení důrazu, hlasitosti...). A právě v tomto tkví význam sémantického (strukturálního) kódu.

A proto bychom se před použitím těchto prvků měli rozmyslet, jaký má být konečný efekt. Pokud však vám jde pouze o vizuální podobu, měli byste místo <b> použít CSS, čímž docílíte oddělení vizuální podoby stránky.

Podívejme se na dva příklady, abychom si dokázali představit rozdíl.

Vaše heslo je: <b> karel </b> . Vaše heslo je: <strong> karel </strong> .

Tento příklad je přesně ten, kde by se mělo místo <b> použít <strong> , protože se snažíme zdůraznit nějaké slovo (v našem případě heslo nějakého uživatele). Čtečky obrazovky podle svých schopností zvýši hlas, výšku nebo rychlost. V případě, kdyby jste chtěli dosáhnout pouze vizuálního efektu tučného písma, doporučuji používat CSS. O tom však až za chvíli.

Tučný text bez struktury

Je-li vašim záměrem dosáhnout pouze tučného řezu písma, a nechcete softwaru sdělovat nic o struktuře a významu textu, doporučuji využít pouze CSS. Docílíte tím oddělení vizuální podoby od struktury a později pro vás bude grafická úprava stránek pomocí CSS velice jednoduchá.

Aby toho nebylo málo, tak si ještě vysvětlíme následující 3 příklady:

<a href="index.php" title="odkaz">Odkaz</a> <a href="index.php" title="odkaz"> <b> Odkaz </b> </a> <a href="index.php" title="odkaz"> <strong> Odkaz </strong> </a>

Metoda A

Obyčejný odkaz.

Metoda B

Obyčejný odkaz, který se sice zobrazí tučně, ale prohlížeči nepředává žádnou informaci o struktuře (v tomto případě o důležitosti odkazu), ale pouze o vizuální podobě. Prostě způsob, kdy odkaz nechceme strukturálně zdůraznit, ale pouze ho vizuálně zobrazit tučným řezem. Jednoduchý funkční kód, který je správný. Ale my už jsme trochu dál a chceme přece také dosáhnout o oddělení vizuálního kódu pomocí CSS, takže bych tento způsob vylepšil tak, že se prvku <b> zbavíme a použijeme například následující CSS.

a {
font-weight: bold;
}

Metoda C

Znovu obyčejný odkaz, na který je však kladen větší důraz. Software bude vědět o tomto důrazu a podle svých možností s ním naloží (prohlížeč ho většinou zobrazí tučně, čtečka obrazovky změní hlasitost, výšku nebo rychlost).

Jistota je jistota

Kdyby však daný software s prvkem <strong> neuměl pracovat, můžeme mu trošku pomoci díky CSS.

strong {
font-weight: bold;
}

Prvek <em> vs. <i>

Podobně jako u <strong> můžeme prvkem <em> vyjádřit důraz, a ne jenom změnit řez písma. Rozdíl mezi těmito prvky je vysvětlen výše v charakteristice podle W3C ( <em> značí důraz, <strong> značí větší důraz). Rozdíl je také ve způsobu zobrazení, kdy se prvek <em> zobrazí kurzívou.

Dnes jsme nekončili v 15.00, ale až v <i> 17.00 </i> . Dnes jsme nekončili v 15.00, ale až v <em> 17.00 </em> .

Vše je podobné jako v předchozím případě. <em> přidá textu strukturu (v tomto případě důraz), přičemž <i> předá informaci pouze o vizuální podobě. Znovu bych se prvku <i> vyhnul a použil pouze CSS.

Dnes jsme nekončili v 15.00, ale až v <span class="italic"> 17.00 </span> . .italic {
font-style: italic;
}

Shrnutí

Prvek <strong>

Značí větší důraz a poskytuje informaci softwaru o struktuře.

Prvek <em>

Značí důraz a poskytuje informaci softwaru o struktuře.

Prvek <b>

Předává softwaru informaci pouze o vizuální podobě (tučné písmo). Měli bychom však vizuální podobu oddělit od struktury stránky, a tak doporučuji místo tohoto prvku používat CSS.

Prvek <i>

Předává softwaru informaci pouze o vizuální podobě (kurzíva). Měli bychom však vizuální podobu oddělit od struktury stránky, a tak doporučuji místo tohoto prvku používat CSS.

4.7.2005