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ý.
| Tag | Význam tagu |
|---|---|
| div | Blokový 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…</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.
