CSS > Div a span

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. Konkrétní ukázky layoutů se budou postupně objevovat v sekci Hotových řešení.

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>

Výsledek v prohlížeči

Mezi moje oblíbené barvy patří zelená a purpurová.

Co by se stalo, kdybychom v HTML kódu zaměnili span za div?

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>

Výsledek v prohlížeči

Ukázka orámovaného divu

Další ukázka divu formátovaného pomocí CSS.

Druhý odstavec v divu…

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.



Další kapitola:

Přehled CSS vlastností

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist