<div> elem használata

A <div> egy univerzális HTML elem, amely blokkszintű konténerként szolgál. Segítségével strukturálhatjuk a tartalmat, elrendezést alakíthatunk ki és csoportosíthatjuk az elemeket.

Mi az a <div>?

A <div> elem nem hordoz önmagában jelentést, de gyakran használjuk egy vagy több elem csoportosítására, például egy szövegblokk vagy kép köré. Ez különösen hasznos, amikor CSS stílusokat vagy JavaScript műveleteket akarunk alkalmazni.

<div>
  <h2>Welcome</h2>
  <p>This is a short paragraph.</p>
</div>

Weboldal elrendezések készítése

Sok modern weboldalban a teljes oldal <div> elemekből áll. Tipikus példák a fejléc, fő tartalom és lábléc elkülönítése egymástól különálló <div> segítségével.

<div class="header">Header content</div>
<div class="main">Main content</div>
<div class="footer">Footer content</div>

class és id használata

A <div> elemeket gyakran látjuk class vagy id attribútummal ellátva. Ezek kulcsfontosságúak a CSS és JavaScript alkalmazásához. A class többször is használható, míg az id egyedi kell legyen az oldalon belül.

<div id="sidebar">Sidebar</div>
<div class="card">Card content</div>

Stílusok alkalmazása div-re

A <div> elemeket gyakran stílusozzuk CSS-sel. Ezt tehetjük külön CSS fájlban, inline módon, vagy akár class segítségével is. Az alábbi példa egy világoskék háttérszínt és belső térközt ad hozzá.

<div style="background-color: lightblue; padding: 10px;">
  Styled box
</div>

Egymásba ágyazott <div> elemek

A <div> elemek egymásba ágyazása lehetővé teszi komplex elrendezések létrehozását. Ez különösen hasznos rácsszerkezetek (grid), vagy többszintű tartalmak kialakításánál.

<div class="container">
  <div class="row">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
  </div>
</div>

Ne használd feleslegesen!

Gyakori hiba, hogy a kezdők túl sok <div> elemet használnak. Próbáld elkerülni a „div div div” típusú szerkezeteket, és törekedj letisztult, olvasható kódra.

Mikor jobb a szemantikus elem?

Bár a <div> rendkívül hasznos, nem mindig ez a legjobb választás. Ha például egy cikket, navigációs menüt vagy láblécet jelölsz, érdemes helyette <article>, <nav> vagy <footer> elemet használni.