HTML Div Tagı

bLastX · 22 Şub 2024

Div tagı HTML'de en sık kullanılan tagların başında gelir. Çoğunlukla diğer taglar için taşıyıcı olarak kullanılır. Div tagı ön tanımlı değeri bloktur (block), bunun anlamı yatay olrak içinde bulunduğu tagın genişliği kardar bir alanda görünür olmasıdır, tagın yüksekliğini de tagın içinde bulunan içerikler belirler ya da CSS olarak biz belirleyebiliriz.

HTML div örneği:

HTML:

    <div>
        Div tagı örneği.
    </div>

Div tagı blok kullanım dışında da sıkça kullanılır. Sayfada benzer öğeleri yan yana sıralamak istediğimizde de bu iş için de div tagını kullanabiliriz. Bunun için CSS ile display özelliğine inline-block değeri verilerek div genişliğinin ve yüsekliğinin içinde bulunan içeriklerin boyutu kadar olması sağlanır. Aynı özelliğe sahip div oluşturursak bu div'ler yan yana sıralanır.

div'leri yan yana sıralama örneği:

HTML:

    <style>
        .box{
            display: inline-block;
            background-color: #ddd;
            margin: 8px;
            padding: 8px;
            text-align: center;
        }
    </style>
    <div class="box">Div 1</div>
    <div class="box">Div 2</div>
    <div class="box">Div 3</div>
    <div class="box">Div 4</div>

Div'lerin kullanımı genel olarak iç içe olacak şekildedir. Sayfa önce div'lerle ana böümlere ayrılır daha sonra bu div'lerin içine içerikler yerleştirilir.