HTML Div és Span (Blokk vs. Inline)

Ahhoz, hogy később CSS segítségével gyönyörű weboldalakat tudj építeni, meg kell értened a HTML legfontosabb láthatatlan szabályát: a böngészők minden HTML elemet két nagy kategóriába sorolnak. Vannak a Blokk szintű (Block-level) és a Soron belüli (Inline) elemek.

A Blokk szintű elemek (Block-level)

Egy blokk szintű elem mindig új sorban kezdődik, és alapértelmezésben elfoglalja a rendelkezésre álló teljes szélességet (balról jobbra kifeszül a képernyőn). Olyan, mint egy nagy, láthatatlan doboz, ami letolja maga alól a többi elemet.

Ilyen blokk szintű elemeket már ismersz: a bekezdés (<p>), a címsorok (<h1> - <h6>), a listák (<ul>) mind blokk elemek.

A <div> tag (A mindenes doboz)

A <div> (division, azaz divízió/részleg) a leggyakrabban használt blokk szintű elem a webfejlesztésben. Önmagában semmilyen vizuális megjelenése vagy jelentése nincs. Egyetlen célja van: csoportosítani más HTML elemeket, hogy azokat később CSS-sel egyben lehessen formázni (például egy keretet tenni köréjük, vagy egymás mellé rendezni őket).

<div class="kartya-doboz">
    <h2>Prémium Csomag</h2>
    <p>Ez a csomag mindent tartalmaz, amire szükséged van.</p>
    <button>Megveszem</button>
</div>

A fenti példában a <div> összefogja a címsort, a bekezdést és a gombot egyetlen logikai "kártyába".

A Soron belüli elemek (Inline)

Az inline elemek nem kezdenek új sort. Csak pontosan annyi helyet foglalnak el szélességben, amennyi a bennük lévő tartalomhoz (szöveghez) feltétlenül szükséges. Békésen megférnek egymás mellett egy mondaton belül.

Ilyen inline elemeket is ismersz már: a linkek (<a>), a képek (<img>), vagy a félkövér szöveg (<strong>).

A <span> tag (A szövegkiemelő)

A <span> az inline elemek jolly jokere. Ugyanaz a szerepe, mint a div-nek, csak soron belül. Nincs saját jelentése, arra használjuk, hogy egy bekezdésen belül egy konkrét szót vagy mondatrészt megjelöljünk, hogy aztán CSS-sel átszínezzük.

<p>A mai napon minden termékünkre <span class="piros-szoveg">50% kedvezményt</span> adunk!</p>

Ebben a példában a <span> nem töri meg a bekezdést, a szöveg folyamatos marad, de a fejlesztő a CSS-ben meg tudja fogni a "piros-szoveg" osztályt, és meg tudja változtatni a színét.

Összegzés: Mikor melyiket használd?

• Ha egy nagyobb elrendezést (layoutot) építesz, például egy oldalsávot, egy fejlécet vagy egy termékkártyát, használj <div>-et.
• Ha egy mondaton belül akarsz egy szót formázni anélkül, hogy a szöveg új sorba ugorna, használj <span>-t.