Neutrální prvky div a span

V souvislosti s třídami a identifikátory se velmi často používá dvojice neutrálních prvků – <div> a <span>. Všechny prvky, s nimiž jste se seznámili v části věnované HTML, mají přiřazen určitý význam. Použití těchto prvků charakterizuje, jaká je role textů v nich obsažených. Například zařadíte-li určitý nápis do prvku <h1>, říkáte o něm, že je nadpisem celé stránky.

Naproti tomu <div> a <span> nejsou spojeny s žádným významem, jsou významově neutrální. Liší se tím, že <div> je prvek blokový (čili vytváří na stránce samostatný blok), zatímco <span> je řádkový (je součástí běžného textu).

Význam těmto prvkům můžete přidělit vy, prostřednictvím tříd či identifikátorů. Viděli jste příklad, kdy jsem zařadil odstavec do třídy poznámka a pomocí CSS mu definoval určitý vzhled. Jenže co když je poznámka delší a obsahuje kromě několika odstavců textu i vložený obrázek?

Nejčistším řešením takové situace je použít <div>, jímž obalíte celou poznámku a přiřadíte mu odpovídající třídu. Díky tomu vznikne v rámci stránky blok s poznámkou, s nímž můžete díky CSS naložit odpovídajícím způsobem. Kód by vypadal asi takto:

<div class="poznamka">
<p>Text prvního odstavce...</p>
<img src="schema.gif" alt="..." ... />
<p>Text druhého odstavce...</p>
</div>

Podobně <span> můžete použít, chcete-li ovlivnit prezentaci části běžného textu. Například pro názvy souborů si můžete zavést třídu „soubor“ a tu pak používat třeba následovně:

<p>Soubor <span class="soubor">/etc/passwd</span> obsahuje
informace o uživatelích.</p>

Nezneužívejte je

Jakmile se naučíte používat třídy a neutrální prvky, může se dostavit pokušení rezignovat na dobrou strukturu dokumentu v HTML, když se požadovaného vzhledu dá dosáhnout i jinak. Proč například používat <h1>, když si mohu definovat třídu „nadpis“ tak, že <div class="nadpis"> bude vypadat úplně stejně?

Stručně řečeno proto, že nevizuální programy nebudou vašim dokumentům rozumět. Když například vaše stránky navštíví robot vyhledávače Google, aby je načetl do databáze, daleko lépe se orientuje v kvalitním kódu. Například uvidí-li <h1>, nastaví slovům v něm vyšší váhu, protože očekává, že charakterizují hlavní obsah stránky. Naproti tomu <div class="nadpis"> jej nechá chladným, protože nerozumí, že se ve skutečnosti jedná o nadpis.

Připomenu, že CSS má sloužit k tomu, abyste své stránky mohli dobře strukturovat a přitom vypadaly pěkně. Nikoli k tomu, abyste jeho prostřednictvím maskovali levárny a nedokonalosti kódu (i když to, pravda, umožňuje).

Dovolím si zformulovat následující doporučení: Kdykoli budete uvažovat o použití <div> či <span>, zamyslete se, zda zamýšlenému účelu neodpovídá některý významový prvek. Pokud ano, dejte mu přednost.

V příkladech uvedených výše by se těžko hledal významový prvek pro poznámku – její <div> je na místě. Naproti tomu ve druhém příkladu bylo cílem zvýraznit jména souborů. Bylo by vhodné, aby byla zvýrazněna i v klientech nepodporujících CSS. Spíše než <span class="soubor"> by bylo lepší použít <em class="soubor">.

Prvek <span> má obecně ten problém, že většinou bývá vhodnější na jeho místě použít některý ze zvýrazňovacích prvků, a proto se používá jen zřídka.