HTML Div Etiketi

HTML <div> etiketi, web sayfanızda öğeleri gruplamak ve düzenlemek için en sık kullanılan etiketlerden biridir. <div>, semantik anlam taşımayan, sadece yapısal düzenlemeler için kullanılan bir blok seviyesindeki (block-level) etikettir. CSS ile stillendirilebilir ve JavaScript ile etkileşimli hale getirilebilir, bu da onu web sayfalarındaki düzenlemeler için vazgeçilmez bir araç yapar.

<div> Etiketinin Kullanım Alanları

1. Sayfa Yapısal Düzenleme: <div> etiketi, bir sayfa üzerinde farklı bölümleri ayırmak için yaygın olarak kullanılır. Örneğin, başlık, içerik ve alt bilgi (footer) gibi ana bölümleri ayırabilirsiniz.
2. CSS ile Stil Verme: <div> etiketi, CSS ile stil vermek için sıklıkla kullanılır. Herhangi bir sayfa öğesinin görünümünü değiştirmek için id veya class sınıfları ile hedeflenebilir.
3. JavaScript ile Etkileşim: <div> etiketine JavaScript ile etkileşim ekleyebilirsiniz. Kullanıcı etkileşimi veya animasyonlar için bir kutu (box) oluşturulabilir.

<div> Etiketi Kullanımı

Bir <div> etiketini HTML belgesinde şu şekilde kullanabilirsiniz:

Örnek:

<div>
    <h1>Web Sayfamın Başlığı</h1>
    <p>Bu bir pargraf içerik örneğidir.</p>
</div>

Bu örnekte, başlık ve paragraf <div> etiketi içinde gruplanmıştır. Böylece bu öğeler birbirine bağlanmış olur.

CSS ile <div> Stil Verme

Bir <div> etiketi, sayfa düzeninizi daha şık hale getirmek için CSS ile stilendirilebilir. Örneğin, bir <div> etiketinin arka plan rengini değiştirebilir, kenar boşluklarını düzenleyebilir veya genişliğini ayarlayabilirsiniz.

Örnek:

<div style="background-color: lightblue; padding: 20px; border-radius: 8px;">
    <h2>Hoş Geldiniz</h2>
    <p>Web sitemize hoş geldiniz! Burası <b>HTML</b> ve <b>CSS</b> öğrenmeye başladığınız yerdir.</p>
</div>

Bu örnekte, <div> etiketi içinde yer alan içeriklere arka plan rengi, iç boşluk (padding) ve kenar yuvarlatma (border-radius) gibi stiller uygulanmıştır.

<div> Etiketi ile Sayfa Düzeni

Web sayfasındaki öğeleri düzenlerken, <div> etiketi ile sayfa şablonları oluşturabilirsiniz. Örneğin, başlık kısmını, içerik alanını ve alt bilgi kısmını her biri bir <div> etiketiyle tanımlayarak sayfanın yapısını belirleyebilirsiniz.

Örnek:

<div id="header">
    <h1>Web Sitem</h1>
    <nav>
        <ul>
            <li><a href="#home">Anasayfa</a></li>
            <li><a href="#services">Hizmetler</a></li>
            <li><a href="#contact">İletişim</a></li>
        </ul>
    </nav>
</div>

<div id="content">
    <h2>Öne Çıkan Yazılar</h2>
    <p>Web tasarımını ve gelişmiş yazılımları öğrenmek için harika bir kaynak!</p>
</div>

<div id="footer">
    <p>© 2025 Web Sitem. Tüm hakları saklıdır.</p>
</div>

Bu örnekte, sayfanın başlık, içerik ve alt bilgi bölümleri <div> etiketleriyle düzenlenmiştir. Bu yapı, CSS ile daha şık hale getirilebilir.

SEO ve Erişilebilirlik İpuçları

• Semantik HTML Kullanımı: <div> etiketi semantik bir anlam taşımaz. Bu nedenle, mümkünse içerik için daha anlamlı etiketler (örneğin, <header>, <footer>, <article>, <section>) kullanmak SEO açısından daha faydalıdır. Ancak, <div> etiketi hala yapısal düzenlemelerde çok önemlidir.
• CSS ve JavaScript ile Stil Verme ve Etkileşim: <div> etiketine CSS sınıfları veya id’ler ekleyerek sayfanızın tasarımını özelleştirebilirsiniz. Ayrıca, JavaScript ile etkileşimli öğeler oluşturabilirsiniz.
• Erişilebilirlik: <div> etiketiyle oluşturduğunuz yapılar, ekran okuyucu kullanıcıları için daha anlamlı hale gelebilir. Bu yüzden, her <div> elementine açıklayıcı özellikler eklemek faydalı olabilir.