<div> és <span>
📌 A <div> címke – Hogyan használjuk HTML-ben?
A <div> az egyik legfontosabb HTML-címke, amely nem tartalmat jelenít meg, hanem egy blokkszintű tároló. Segítségével egy adott szöveget, képet vagy más elemet egy egységként kezelhetünk és formázhatunk.
🔹 1. Hogyan néz ki egy alap <div>?
A <div> nem jelenít meg semmit önmagában, csak egy blokkszintű tárolót hoz létre:
<div>
<p>Ez egy bekezdés egy div-en belül.</p>
</div>
💡 A böngészőben ez úgy jelenik meg, mint egy sima bekezdés.
De nézzük meg, hogyan adhatunk neki stílust! 🎨
🔹 2. Hogyan formázhatjuk a <div>-et?
A style attribútummal már a HTML-ben is tudunk adni neki egy háttérszínt:
<div style=”background-color: lightblue; padding: 10px;”>
<p>Ez egy színezett blokk.</p>
</div>
💡 Mit csinál ez?
✔ Világoskék háttér (background-color: lightblue)
✔ Kis belső térköz (padding: 10px)
Most már látható a div, mert egy háttérszínnel kiemeltük.
🔹 3. Miért fontos a <div>?
✔ Segítségével strukturált blokkokat hozhatunk létre.
✔ Fejléc, menü, oldalsáv, lábléc is div-ekkel épül fel.
✔ A modern weboldalak elrendezésének alapja (CSS nélkül viszont még nem túl szép).
🔹 4. A <span> – soron belüli kiemelés
A <span> nem egy blokkos, hanem egy soron belüli elem, vagyis csak egy szövegrészt formáz a teljes bekezdés helyett.
<p>A <span style=”color: red; font-weight: bold;”>pirosan kiemelt</span> szövegrész egy bekezdésen belül.</p>
Hogyan jelenik meg?
💡 Mit csinál ez?
✔ Csak a „pirosan kiemelt” szövegrész változik
✔ Nem tör sort, tehát a többi szöveg folytatódik mellette
🔹 5. Mikor használjunk <div>-et és mikor <span>-t?
| Elem | Típusa | Mire való? |
|---|---|---|
<div> |
Blokkszintű | Különálló blokkok létrehozására, szakaszok és nagyobb részek formázására. |
<span> |
Soron belüli | Egy szövegrész vagy szó formázására a teljes bekezdés helyett. |
📌 Ha egy teljes bekezdést vagy szakaszt akarsz formázni, használj <div>-et.
📌 Ha csak egy adott szót vagy mondatrészt akarsz kiemelni, akkor <span> a jó választás.
🔹 6. Példa: Kombinálva a <div> és <span> címkéket
<div style=”background-color: lightgray; padding: 15px;”>
<p>Ez egy teljes <span style=”color: blue; font-weight: bold;”>kiemelt</span> blokk.</p>
</div>
Hogyan jelenik meg?
💡 Mit csinál ez?
✔ A <div> szürke háttérszínt kap
✔ A <span> csak a „kiemelt” szót teszi kékre és félkövérre
🔹 5. Összegzés
✔ A <div> egy blokkszintű elem, amely nagyobb tartalmi egységek elrendezésére szolgál.
✔ A <span> egy soron belüli elem, amely kis szövegrészek formázására való.
✔ Mindkettőt CSS-sel tudjuk igazán jól formázni.