Běžné HTML značky mají dvojí funkci: definují význam textu (např. nadpis) a prohlížeče jim rovněž přidělují různý vzhled (např. tučné velké písmo).
V jazyce HTML ovšem existují dva neutrální elementy, které
nic neznamenají (nenesou význam) a
nijak se neformátují. Jsou jimi prvky
div a span. V obyčejném HTML jsou k ničemu,
ale náramně se hodí ve spojení s kaskádovými styly.
div (z anglického division, oddíl)
je prvek blokový (takové jsou např. h1,
p, blockquote, apod.), tj. před sebou a po sobě
odřádkuje. Může obsahovat další blokové i řádkové prvky
(např. další divy nebo spany).
span je prvek řádkový, může se vyskytovat
uprostřed odstavce (dalšími řádkovými prvky jsou a,
em, abbr, atd.). Řádkové elementy (tj. ani
span) nesmí obsahovat elementy
blokové, ale zase jen elementy řádkové (i když to
prohlížeče většinou nějak zkousnou).
<div id="hlavicka-stranky"> <h1>Naše firma, s.r.o.</h1> <img src="logo.png" alt="Logo firmy" title="Naše firma,s.r.o." /> <p>Plujeme mořem <span class="zvyrazneno">bezpečně!</span></p> </div>
div#hlavicka-stranky { /* vzhled samotného bloku div a společné vlastnosti podřízených prvků */
margin: 20px;
border-top: 1px solid blue;
border-bottom: 1px solid blue;
background: #F4FFE4;
border-left: 2em solid #99CC66;
}
div#hlavicka-stranky h1 { text-align: center; } /* vzhled nadpisu h1 uvnitř prvku div#hlavicka-stranky */
.zvyrazneno { color: red; } /* vzhled všech prvků třídy .zvyrazneno */
V uvedeném příkladě jsou informace o firmě, uvedené v záhlaví stránky,
obaleny prvkem div a ve stylovém předpisu jsme jim díky tomu mohli přidělit
speciální vzhled.