<info9>

Dobozok

A weboldalak kialakítása során gyakran van szükségünk általános célú HTML tagekre. Olyanokra, amiket használhatunk egy-egy oldalrész csoportosítására, megfelelő formázás kialakítására, vagy bármi célra, amire nincs specifikusabb elem. Alapvetően a HTML két általános taget ismer ezekre a célokra: a span, valamint a div.

A span alapvetően egy inline elem. Ez azt jelenti, hogy ha szeretnénk például egy szöveg egy részét más módon megformázni, akkor arra nyugodtan használhatjuk a span-t, pl. egy zöld betűszínhez mint itt. A szövegrész ugyanúgy folytonos marad, nem fog önálló dobozként kiszakadni a szövegből, vagy bármi hasonló, a span-t tehát elsősorban folyószövegek részleteinek a formázásához szoktuk használni, természetesen CSS-sel együtt.

Ezzel szemben a div egy blokk típusú elem. Kitölti szélességében a teljes sort, mint egy bekezdés, vagy egy idézetblokk, és alapvetően téglalap alakú, bár ezen CSS-ből valamennyit lehet finomítani, pl. a sarkok lekerekítésével. A div talán a leggyakrabban használt HTML elem, mivel univerzális, könnyen használható az oldal szerkezetének, elrendezésének megfelelő és precíz kialakítására.

Íme néhány példa:

<div class="kartya">
  <div class="felirat">Kártya felirata</div>
  <div class="kicsi">A kártya leírása</div>
</div>
<div class="kartya">
  <div class="felirat">Kártya felirata</div>
  <div class="kicsi">A kártya leírása</div>
</div>

<p>Itt pedig egy bekezdés, amiben a <span class="color">piros</span> 
színt kiemeljük egy egyedi formázással. A formázást persze már CSS-ből 
alakítjuk majd ki.</p>