HTML <div> Etiketi Kullanımı Sayfalarınızı Düzenlemenin Güçlü Aracı

HTML (Hypertext Markup Language), web sayfalarını oluşturmak için kullanılan temel bir işaretleme dilidir. HTML, belgeleri yapılandırmak ve içeriği tanımlamak için bir dizi etiket içerir. Bu makalede, özellikle web sayfalarında düzen oluşturmak için kullanılan <div> etiketi üzerinde duracağız.

HTML <div> Etiketi Nedir?

<div>, "division" kelimesinin kısaltmasıdır ve HTML içinde blok düzeyinde bir konteyner olarak kullanılır. Sayfanın farklı bölümlerini gruplamak, stil uygulamak veya JavaScript ile etkileşimli öğeler oluşturmak için kullanılır.

Div etiketi Temel Kullanımı

<div> etiketini kullanmak oldukça basittir. Aşağıda temel bir örnek verilmiştir:

<div>
    <!-- Buraya içerik ekleyebilirsiniz -->
</div>

Bu temel yapı, içeriği gruplamak için kullanılabilir. Ancak, <div> etiketinin gerçek gücü, özellikle CSS (Cascading Style Sheets) ile birlikte kullanıldığında ortaya çıkar.

HTML div Etiketine Stil Uygulama

Web tasarımında, sayfaların görünümünü belirlemek için CSS kullanılır. <div> etiketi, sayfa üzerinde belirli bir bölümü hedeflemek ve ona özel stil uygulamak için kullanılır. Aşağıdaki örnek, bir <div> etiketi içindeki metni kırmızı renkte ve ortalanmış olarak göstermektedir:

<style>
    .ozel-div {
        color: red;
        text-align: center;
    }
</style>

<div class="ozel-div">
    Bu metin özel bir stile sahiptir.
</div>

Bu örnekte, class özelliği ile belirlenen ozel-div sınıfı, CSS içinde tanımlanan stil kurallarını kullanır.

İç İçe <div> Etiketleri kullanımı

Sayfalar karmaşık hale geldikçe, iç içe geçmiş <div> etiketleri kullanmak yaygındır. Bu, sayfayı daha düzenli hale getirmek ve belirli öğeleri gruplamak için kullanışlıdır. Örneğin:

<div class="ana-div">
    <div class="alt-div">
        <!-- İçerik ekleme -->
    </div>
    <div class="alt-div">        <!-- İçerik ekleme -->
    </div>
</div>

Bu şekilde, sayfanın farklı bölümlerini daha iyi organize edebilir ve bakımını kolaylaştırabilirsiniz.

JavaScript ile Kullanımı

<div> etiketi, JavaScript ile birlikte kullanılarak dinamik içerik oluşturmak için de kullanılabilir. JavaScript kullanarak sayfa üzerindeki öğeleri kontrol etmek ve güncellemek için <div> etiketleri çok yaygın olarak tercih edilir.

<script>
    function guncelleMetin() {
        document.getElementById("demo").innerHTML = "Yeni metin!";
    }
</script>

<div id="demo">
    Bu metin JavaScript tarafından güncellenmiştir.
</div>

<button onclick="guncelleMetin()">Metni Güncelle</button>

Bu örnekte, JavaScript işlevi, bir düğmeye tıklandığında <div> etiketi içindeki metni güncellemek için kullanılır.