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 {fong-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 (widht) 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><h2><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.

Vizte tΘ╛: Zßklady HTML, CSS - KaskßdovΘ styly, Design pomocφ CSS pozicovßnφ, Jak ud∞lat levΘ menu, T°φdy a identifikßtory, O°ez a skrollovßnφ, Design pomocφ tabulek