Div a span
neutrální HTML tagy
Tagy nesou význam - Obálky bez významu - Rozdíl mezi <div> a <span> - Výhoda: neutrální formát - Použití s CSS - Ztráta semantiky
Tagy nesou význam
V začátcích vývoje HTML se každý tag
- lišil svou funkcí
- a lišil se vzhledem.
Například tag <h1> znamená nejdůležitější nadpis a zobrazuje se velkým tučným písmem. Tag <address> znamená adresu a sám od sebe se v prohlížečích kreslí kurzívou. Atd.
Div a span jsou výjimkou. Význam nenesou.
Obálky bez významu
Časem začalo být evidentní, že by se hodně hodily tagy,
- které nic neznamenají
- a nijak se neformátují.
Prostě neutrální tagy. Proto vznikly HTML tagy <div> a <span>. Jsou užitečné zejména v kombinaci s CSS (kaskádovými styly).
Když chci třeba několika po sobě jdoucím odstavcům (tag <p>) nastavit společné vlastnosti, nemůžu je prostě obalit do dalšího odstavce, protože by to prohlížeče nepochopily.
<p class="obalovaci">
<p>tohle fakt není ono, class="obalovaci" se neprojeví</p>
<p>jiný odstavec</p>
</p>
Jediné, co se s tím dříve dalo dělat, bylo obalit to všechno do buňky tabulky (tag <td>) nebo do tagu <center>, ale to nebylo moc elegantní (prostě je to prasárna). Takže se to obalí do tagu <div>, například:
<div class="obalovaci">
<p>odstavec</p>
<p>další odstavec</p>
...
</div>
Rozdíl mezi <div> a <span>
- Div je element blokový
- span je element řádkový.
Jinak řečeno tag <div> před sebou a za sebou udělá konec řádku. Span se bez problému může vyskytovat v jednom řádku.
text text text <!-- zde vznikne zalomení řádku --> <div>obsah divu</div> <!-- zde vznikne zalomení řádku --> text text text <span>obsah spanu</span> stále v jednom řádku.
Zobrazit tento příklad. To není jediný rozdíl, ale je nejdůležitější.
Kdy použít div a kdy span? Řádkový element span v sobě nemůže obsahovat blokové elementy. To je hlavní pravidlo. Je-li třeba obalit například skupinu odstavců, jednoznačně se používá <div>. Pokud se má třeba jenom vybarvit kus textu, je na to <span>. Příklad nešikovného kódu:
<span><!-- tady by správně měl být <div> -->
<p>tohle není moc dobře</p>
<p>blokový element p uvnitř span nedělá dobrotu, ale prohlížeče to
skousnou</p>
...
</span>
Logické je i následující pravidlo: <div> by se neměl vyskytovat v řádkovém elementu. Takovým řádkovým elementem je (kromě span) například odkaz (tag <a>). Pokud ale tuto chybu uděláte, prohlížeče ji většinou akceptují. Další příklad blbého zápisu:
<a href="kamkoli">
<div class="trida"> <!-- tady by to chtělo <span> -->
tento text možná nepůjde nakliknout
</div>
</a>
Výhoda: neutrální formát
Div bez mezer nad a pod
Když někde v HTML použiju jiný tag na obalení kusu kódu, tak se mi to projeví na vzhledu. Třeba tagy <p>, <ul> nebo <ol> dělají kolem sebe vertikální mezery (je ale fakt, že se ta mezera dá stylem margin: 0px zrušit).
Oproti tomu tag <div> kolem sebe sám od sebe žádné mezery nedělá. Když se použijí dva divy po sobě, nalepí se těsně za sebe:
Díky tomu se při plánování přesného designu nemusejí používat tabulky. To byly totiž dříve jediné obalovací tagy, které kolem sebe nedělaly mezery.
Span normálním písmem
Podobně když chci vyznačit kus textu, tak mi každý použitelný tag něco provede se vzhledem písma. Například <strong> udělá tučné písmo, <em> udělá kurzívu. Samozřejmě je možné zase v CSS předefinovat tagy, aby nic nedělaly (například strong {font-weight: normal}), ale lepší je použít <span>, ten vzhled písma nemění.
Například budu chtít mít kousek textu, nad kterým se při přejetí myši zobrazí nápověda ve žluté bublině. To se dělá pomocí atributu title, je ale otázka, k jakému tagu ten title přidat. Doporučuji tag <span>:
Normální text a najednou <span title="text žluté bubliny">text, který má bublinu</span>.
Vypadá to takhle, zkuste si přejíždět myší:
Normální text a najednou text, který má bublinu.
Použití s CSS
Nejsem si jistý, ale vůbec bych se nedivil, kdyby tagy <div> a <span> byly do HTML přidány spolu s kaskádovými styly (CSS). Jejich použití v kombinaci s CSS totiž přináší fantastické možnosti. Nebudu to zdlouhavě oslavovat a omezím se na pár nápadů, jak to používat.
Rozvržení stránky
Asi největší použití tagu <div> je pro prostorové vyčlenění oddílů na stránce. Obsah stránky se obalí do tagů <div> a těm se stylem přiřadí pozice. Schematicky zapsáno:
<body>
<div class="hlavicka">
složitý kód hlavičky...
</div>
<div class="levysloupec">
kód levého sloupce s odkazy...
</div>
<div class="hlavni">
jakkoliv složitý HTML kód hlavního obsahu stránky
</div>
</body>
Samotné třídy (class) hlavicka, levysloupec a hlavni se postarají o to, aby se stránka vykreslila tak, jak má. Samozřejmě je třeba přihodit odkaz na css styl, který tyto třídy definuje. Většinou se to dělá pomocí obtékání (styl float) nebo pozicováním. Kompletní příklady a výklad úskalí naleznete v textu design pomocí CSS pozicování.
Výhody takového kódu jsou mnohé. Jednak je to kód hezký, strukturovaný, úsporný a přehledný. Narozdíl od tabulkového designu se dá prohlížet na libovolném zařízení.
Vlastní styly (class)
Další obrovská výhoda <div> a <span> je ve výše zmíněné možnosti dělat si vlastní vzhledy, tak zvané třídy, anglicky class. Píšu o tom na stránce třídy a identifikátory.
Například budu chtít udělat řádkový (in-line) styl pro text, který je anglicky. Chci, aby takový text měl slabě šedé (silver) pozadí. Vytvořím si ve stylu třídu, která se jmenuje "anglicky":
<style>
.anglicky {background-color: silver} /* pozadí
stříbrné */
</style>
Protože na anglický text neexistuje tag, třídu "anglicky" použiju na span:
Kočka se americky řekne <span class="anglicky" lang="en-us">cat</span>.
Takhle to vypadá:
Kočka se americky řekne cat.
Mimochodem: možná jste si všimli, že span zároveň dává možnost označit kusu textu jazyk, to je ten atribut lang="en-us" (en-us je americká angličtina). To je prý dobré pro vyhledávací stroje.
Problémy prohlížečů
Internet Explorer 4 neumí spanu (a obecně jakémukoli řádkovému elementu) vykreslit padding, margin, border, height, width a možná ještě něco.
Mozilla začne chápat span, který má nastavenou šířku (width) jako blokový element. To nemám ověřené, ale občas mi to tak připadá.
Netscape 3 tagy <div> a <span> nezná a zcela je ignoruje. To nevadí, Netscape 3 už skoro nikdo nemá.
Ztráta semantiky
Nevím sice přesně, co "semantika" je, ale myslím, že jsem to z článků Martina Kopty pochopil. Semantika je něco jako "vymezení významu", prostě vyznačení toho, co znamená co. HTML byl původně vytvořen jako jazyk pro semantiku. Proto v něm neutrální tagy <div> a <span> původně nebyly.
Nadužívání tagů <div> a <span> přináší jisté riziko ztráty významu kódu. Pokud budou uvnitř těla (<body>) dokumentu použity jenom tagy <div> <span>, <img> a <a>, mohlo by se stát, že značkovací jazyk HTML ztratí svůj význam jako jazyk značkovací. Proto pokud můžete, používejte jiné tagy, které znamenají to, co obalují. Například na nadpisy určitě používejte tagy <h1><h3><h3>, odstavce dělejte odstavci a zvýrazněné písmo tagem <strong> nebo <em>.
Na druhou stranu je ale důležité, aby ty stránky hlavně nějak fungovaly. Pokud vám tedy tagy <div> a <span> usnadní práci, používejte je na cokoliv. Opravdu to jde a nedělá to problémy.
Reklama
