Div a span

Div a span jsou neutrální tagy – nedávají obsahu v HTML dokumentu význam a sami o sobě nijak HTML dokument neformátují. Jedná se o párové tagy.

Napíšeme-li do HTML dokumentu například

<div>Div je neutrální tag.</div>

a dokument poté zobrazíme v prohlížeči, uvidíme, že tag div se nijak zvlášť neprojevil.

Obrovského využití však neutrální tagy naleznou ve spojení s CSS. Pomocí CSS vlastností se tyto tagy dají všemožně formátovat (můžeme jim přidělovat rozměry, umísťovat je na stránce, kam se nám zlíbí – pozicovat je, barvit je atd.).

Především pomocí divů se pak tvoří layouty stránek (rozmístění jednotlivých prvků). Jeden div určuje hlavičku, další třeba sloupec s menu, jiný zas patičku atp.

Div a span – rozdíl

Div je blokový a span řádkový.

TagVýznam tagu
divBlokový prvek – před sebou i za sebou zalamuje řádek; roztáhne se přes celou dostupnou šířku.
(Mezi blokové prvky patří také odstavec, nadpisy a další.)
spanŘádkový prvek – nezalamuje řádek, tudíž jich v jednom řádku může být více.

Při striktním Doctype by pak měl být (nejen) tag span umístěn v nějakém blokovém tagu. Obecně by pak blokový tag neměl být v tagu řádkovém. Navíc div by neměl být ani v jiném blokovém tagu než zase v divu.

<span><p>Řádkové a blokové tagy</p></span> – špatný zápis
<p><span>Řádkové a blokové tagy</span></p> – správný zápis

<p><div>Řádkové a blokové tagy</div></p> – špatný zápis
<div><p>Řádkové a blokové tagy</p></div> – správný zápis

Jak spanům tak divům můžeme přiřazovat třídy a identifikátory.

Div a span – příklady

CSS

.barva-1 {color: green; font-size: 120%;}
.barva-2 {color: magenta; font-size: 120%;}

HTML

<p>Mezi moje oblíbené barvy patří <span class=“barva-1″>zelená</span>
a <span class=“barva-2″>purpurová</span>.</p>

CSS

.oramovany {border: 1px solid violet;}
.box {width: 200px; background-color: #0066CC; color: white;
border: 3px solid yellow;}

HTML

<div class=“oramovany“>Ukázka orámovaného divu</span>
<div class=“box“>
<p>Další ukázka divu formátovaného pomocí CSS.</p>
<p>Druhý odstavec v divu&hellip;</p>
</div>

Jak je vidět na prvním divu, pokud mu šířku nenastavíme, roztáhne se přes celou dostupnou šířku. Rámeček jsem mu přidali, aby byl výsledek názornější.

Pokud bychom měli jen jeden odstavec a chtěli ho vybarvit a orámovat jako div ve druhém případě, stačí nastavit stejné css vlastnosti přímo tomu odstavci a nemusíme ho balit do divu.

Po<div>ný kód

Poměrně častým nešvarem je tzv. podivný kód. Tak můžeme nazvat HTML kód, který obsahuje divy i na místech, kde nemají co hledat nebo jich (divů) je v kódu víc, než je třeba, případně obojí.

<div class=“nazev“>Název mého webu </div>
<h1>Název mého webu </h1>

Jelikož pomocí CSS můžeme div i h1 naformátovat zcela stejně, jejich vzhled v prohlížeči bude shodný.

Avšak nejen, že stránky s podivným kódem budou pro vyhledávače hůře viditelné, ale takový kód je méně přehledný a tím jsou složitejší jeho úpravy. Navíc, pokud si takový dokument zobrazíme bez stylů, skákat radostí nebudeme.

O tom, že každý tag v HTML má svůj účel a k tomu účelu by se měl používat, pojednává
sémantika v HTML.

Jiří Šarišský
Latest posts by Jiří Šarišský (see all)

Související příspěvky:

Třídy a identifikátory Zápis CSS Připojení CSS k HTML Co je CSS