A HTML div elem használata

Tanulj meg mindent a HTML div-ek használatáról magyar nyelven, ingyen.

HTML div használatát szemléltető kép

A HTML div elem használata

A HTML div eleme egy szakaszt, vagy részt határoz meg a HTML dokumentumban. Ezt a szakaszt arra használják, hogy feltöltsék HTML elemekkel. Bármilyen HTML elem elhelyezhető a div-ben, amely a HTML dokumentumban is elhelyezhető.

Mire használják a div elemet?

A HTML div elemét arra használják, hogy a weboldalon egy jól elkülöníthető egységet elkülönítsenek. Általában egymáshoz szorosan kapcsolódó elemek mennek bele. Úgy kell ezt érteni, hogy ha van a weboldalunkon jobb oldalt egy menü, akkor a menü összes elemét belehelyezhetjük. Míg a tartalom egy másik div-be kerül. Így egymástól elkülönítettük a tartalmat és a menüt, amelyet könnyedén egységesen formázhatunk stílusokkal.

Szintaktika

<div>TARTALOM</div>
Code language: HTML, XML (xml)

Alapvetően a fenti kóddal már létrehozhatunk egy div-et, ha a formázást a kezdőcímkén belül oldjuk meg. Bár a tapasztaltabbak nem így szokták, hanem így:

<div class="NÉV">TARTALOM</div>

VAGY

<div id="NÉV">TARTALOM</div>
Code language: HTML, XML (xml)

Ez a megoldás már sokkal elegánsabb és hasznosabb, mert így a dokumentum head részében vagy egy külső fájlban határozhatjuk meg a stílusbeállításokat, amelyeket később sokkal egyszerűbb módosítani.

Példa HTML div használatára

HTML kód

<html>

<head>
   <style>

      .felso
         {background-color:red;
height:50px;}

      .tartalom
         {background-color:green;
height:150px;}

      .lablec
         {background-color:yellow;
height:50px;}

   </style>
</head>

<body>

   <div class="felso">
      Felső Menüsor
   </div>

   <div class="tartalom">
      Tartalom
   </div>

   <div class="lablec">
      Lábléc
   </div>

</body>
</html>
Code language: HTML, XML (xml)

Eredmény

Felső Menüsor
Tartalom
Lábléc

A fenti példában három div-et hoztam létre, mindegyiknek adtam egy osztálynevet, ami alapján a <style>-ban formázni tudtam őket.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!