Div elementi, ilk iki derste bahsettiğimiz gibi bir "küme", bir "alan" oluşturur. Div elementini a, span, b gibi elementlerden ayıran en önemli özellik, bunun bir Blok Elementi olmasıdır. Bunu daha iyi anlayabilmeniz için, şöyle bir örnek verebiliriz:

HTML'de elementler temelde "blok seviyesinde element" ve "satır içi element" olarak ikiye ayrılır.
Sakın canınızı sıkmayın, aslında durum çok basit:

Satır içi elementler, içine ne koyarsanız o boyuttadır. Sönük bir balon gibi.
Bloklar ise alabileceği maksimum genişliktedir. Tüm sayfanın, tüm satırın genişliğine ulaşmak ister.

Yan yana 5 tane satır içi element koyarsanız, yan yana dururlar. Diğer elementlerle yan yana durmak hoşlarına bile gider.
Yan yana 5 tane blok elementi koyarsanız hepsi alt alta görünür, her biri koca bir satır yer kaplar. Bir Blok, sağında ve solunda başka element görmekten hoşlanmaz.
Aşağıdaki örnekte, iki adet satıriçi elementin arasına önce bir satıriçi element, sonra ise bir blok element koyuyoruz:

a, span gibi elementler satır içi element iken, div, h1, p gibi elementler blok düzeyindeki elementlerdir. P elementinden önce ve sonra kendiliğinden satır atlanmasının asıl sebebi de zaten blok olmasıdır.



Div elementinin elbette class, id style ve title özellikleri var. Bu özelliklerin ne işe yaradığını zaten önceki derslerimizden biliyorsunuz. Bunun dışında dir, ve lang gibi henüz bahsetmeyeceğimiz ve pek kullanılmayan iki özelliği daha var.
Bulabileceğiniz çoğu online türkçe kaynakta div elementinin bir de "align" özelliği olduğu yazıyor. Oysa bu özellik HTML5 ve sonrasında desteklenmiyor, yani artık "eski" ve zaman içerisinde kullanımdan kalkacak.

Div elementinin en çok kullanılan özelliği, "style" özelliğidir. Div, esasında CSS ile istenilen her formata sokulabildiği için bu kadar popüler.

Kod:

<div style="height:150px;text-align:center;background-color:slateblue;color:#fff;">
<h1>Hoş Geldiniz</h1>
</div>

Sonuç:

Hoş Geldiniz

Elbette henüz CSS öğrenmediğiniz için style özelliğine verdiğimiz şu değerlere kafa yormanıza gerek yok:
height:150px;text-align:center;background-color:slateblue;color:#fff;

Merakınızı giderecekse; style="" özelliğini kullanarak, DİV'in arkaplanını mor, yüksekliğini 150piksel yapıp, içeriği ortalayıp rengini beyaz yapacak css kodlarını yazdık. Eğer biraz ingilizce bilginiz varsa, zaten şimdiden css'in ne kadar basit olduğunu hissetmişsinizdir.

Dikkatinizi çektiyse, div elementi alabildiği en büyük genişliği aldı. Bulunduğu alanı enlemesine doldurdu. Eğer isteseydik, CSS kullanarak bu div'in genişliğini bile kendimiz ayarlayabilirdik.

Bu kadar! Css öğrenene kadar div mucizelerini çok fazla kurcalamayacağız. Yine de bir sonraki derse kadar oyalanmanız ve Kod Deneme Editörümüz ile pratik yapmanız için, birkaç kod örneği vermeyi ihmal etmeyeceğim:

Örnek 1(aslında ilk dersimizde bu örnek kulanılmıştı):

<div style="background-color:red;width:200px;height:150px;"><a style="color:white;">deneme</a></div>

Örnek 2:

<div style="border:2px solid black;height:150px;">
     <div style="border:2px solid red;height:100px;">
          Kutu içinde kutu
     </div>
</div> 

Örnek 3:

<div dir="rtl">
         merhaba, nasılsınız<br/>acaba?
</div>

Kodları Denemek İçin Buraya Tıklayın