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

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

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!