Web geliştirme dünyasına ilk adımınızı attığınızda, karşınıza en sık çıkacak olan ve her web sitesinin kaynak kodunda yüzlerce kez göreceğiniz HTML etiketi hiç şüphesiz <div> olacaktır. İngilizce “division” (bölüm, bölme) kelimesinin kısaltması olan bu etiket, modern web tasarımının en temel yapı taşlarından biridir.
Bu rehberde, ilk defa kod yazacak biri olarak <div> etiketinin ne olduğunu, nasıl çalıştığını, neden kullanmanız (veya bazen neden kullanmamanız) gerektiğini ve SEO (Arama Motoru Optimizasyonu) ile Erişilebilirlik kuralları çerçevesinde nasıl doğru kurgulanacağını detaylı örneklerle öğreneceksiniz.
1. <div> Etiketi Nedir ve Ne İşe Yarar?
En temel tanımıyla <div>, HTML akış içeriği (flow content) için kullanılan genel bir kapsayıcıdır (container). Kendi başına içeriğinize veya sayfa düzeninize görsel olarak hiçbir etkisi yoktur. Yani boş bir <div> oluşturursanız, ekranda hiçbir şey göremezsiniz.
Bir metaforla açıklayalım: <div> etiketini şeffaf bir plastik kutu veya saklama kabı olarak düşünebilirsiniz. Kendi başına bir anlamı veya rengi yoktur. Ancak içine eşyalar (metinler, başlıklar, görseller) koyup, dışına etiketler yapıştırdığınızda (CSS ile şekillendirdiğinizde) bir amaca hizmet etmeye başlar. <div> öğeleri, temel olarak web sayfanızdaki içerikleri mantıksal birimler halinde gruplamak ve onlara CSS (stil) veya JavaScript (etkileşim) uygulamak için kullanılır.
2. Kutu Modeli: Blok (Block) vs. Satır İçi (Inline) Elementler
HTML’deki her elementin bir görüntülenme davranışı vardır. <div> elementi her zaman bir blok (block-level) kutu olarak işlenir. Bu, <div> etiketinin sayfanın o anki satırındaki tüm genişliği kaplayacağı ve kendinden sonra gelen içeriği bir alt satıra iteceği anlamına gelir.
Buna karşılık, metinlerin içindeki küçük parçaları gruplamak için kullanılan <span> etiketi ise satır içi (inline) bir kutudur. Web tasarımına yeni başlayanların en sık yaptığı hatalardan biri, blok yapısındaki bir <div> etiketini, satır içi olan bir <span> etiketinin içine yerleştirmektir; bu HTML kurallarına göre gereksiz yere kafa karıştırıcıdır ve yapılmasına izin verilmez.
3. <div> Nasıl Kullanılır? (Kod Örnekleri)
Sayfanızda bir yazar profil kartı oluşturmak istediğinizi düşünelim. İçinde bir başlık, bir paragraf ve bir buton olsun. Bu üç bağımsız elemanı bir arada tutmak, onlara bir arka plan rengi ve kenarlık vermek için onları bir <div> içine alırız.
<div class="profil-karti" id="yazar-1">
<h2>Ahmet Yılmaz</h2>
<p>Ahmet, web geliştirme üzerine makaleler yazan bir uzmandır.</p>
<button>Profili İncele</button>
</div>
Bu kodda <div> etiketine class (sınıf) ve id (kimlik) nitelikleri ekledik. Bu sayede CSS kullanarak bu spesifik kutuya hayat verebiliriz:
.profil-karti {
background-color: lightgray;
border: 1px solid black;
padding: 20px;
width: 300px;
}
Eğer <div> kullanmasaydık, başlık, paragraf ve butona ayrı ayrı arka plan rengi ve kenarlık vermemiz gerekirdi ki bu da tasarımı imkansız hale getirirdi.
4. Madalyonun Karanlık Yüzü: “Div-itis” Hastalığı
<div> ve <span> etiketlerinin kendi başlarına hiçbir anlam (semantics) taşımaması, sadece birer genel kapsayıcı olmaları hem en büyük avantajları hem de en büyük dezavantajlarıdır. Geçmişte web tasarımcıları tabloları (tables) bırakıp CSS’e geçtiklerinde, sayfadaki her şeyi ama her şeyi <div> etiketleriyle bölmeye başladılar. Sektörde bu kötü alışkanlığa web geliştiricilerinin maruz kaldığı bir “hastalık” olan “div-itis” (div çılgınlığı) adı verilir.
Eğer sayfanızın başlığını, ana menüsünü, yazılarını ve en alt kısmını sırf bloklara ayırmak için sürekli <div> kullanarak kurgularsanız, sayfanızın yapısı anlamını yitirir.
5. Semantik (Anlamsal) HTML ve SEO Etkisi
Arama motoru botları (örneğin Google) sitenizi okuduğunda sizin gibi göremez; sadece kodlarınızı inceler. Web sitenizin tamamen <div> etiketleriyle dolu olması, arama motorlarının içeriğin yapısını, neresinin ana içerik neresinin menü olduğunu anlamasını çok zorlaştırır. Bu yüzden sadece <div> kullanmak yerine HTML5 ile gelen ve içeriğin amacını açıklayan şu semantik etiketleri kullanmalısınız:
<header>: Sayfanın veya bir bölümün başlık ve giriş kısmıdır.<nav>: Sayfanızdaki yönlendirme menülerini (linkleri) gruplar.<article>: Blog yazısı gibi tek başına anlam ifade eden bağımsız içerikler içindir.<section>: Tematik olarak birbiriyle ilişkili içerikleri gruplamak için kullanılır.
SEO Açısından Altın Kural: Makalenizi <article> içine almak, arama motorlarına “burada değerli bir okuma metni var” sinyali verir. Aynı metni anlamsız bir <div> içine koyarsanız, Google bunun sadece sıradan bir kutu olduğunu düşünür. <div> etiketini sadece başka hiçbir uygun semantik etiket bulamadığınız durumlarda veya sadece CSS ile hizalama/tasarım (örneğin Grid ve Flexbox düzenleri) yapmak için kullanmalısınız. Aşırı kullanım (overuse) SEO puanınıza ve sayfa hiyerarşinize zarar verir.
6. <div> ve Erişilebilirlik (Accessibility) Problemleri
Semantik HTML kullanmamanın tek zararı SEO’ya değildir. Görme engelli bireyler, web sitelerini gezerken onlara sayfayı sesli okuyan ekran okuyucular (screen reader) kullanırlar. Bir ekran okuyucu <div> etiketini gördüğünde bunun ne işe yaradığına dair kullanıcıya hiçbir bağlam veya ipucu sunamaz.
Sahte Butonlar (Fake Buttons) Tehlikesi: Yeni geliştiriciler bazen bir <div> etiketini CSS ile renklendirip, üzerine JavaScript tıklama (click) özellikleri ekleyerek bir butona dönüştürürler. Bu çok tehlikeli bir pratiktir. Eğer gerçek bir <button> yerine sahte bir <div> butonu yaparsanız, bu öğe klavyedeki “Tab” tuşu ile erişilebilirliğini kaybeder ve engelli bir kullanıcının o butona basması imkansız hale gelebilir. Her zaman doğru iş için doğru elementi seçin.
Bazen çok özel tasarımlar için (örneğin karmaşık bir “popover” veya özel bir açılır menü) mecburen <div> kullanmanız gerekebilir. Eğer bir <div> etiketi interaktif olacaksa veya erişilebilirlik semantiğine sahip olmayan bir yapıda kullanılacaksa, o öğeyi engelli kullanıcılar için erişilebilir kılmak adına uygun ARIA (Accessible Rich Internet Applications) niteliklerini (örneğin role="button" veya role="dialog") eklemeniz zorunludur.
Özetle <div> Kullanım Rehberi
- Kapsayıcı Olarak Kullanın: CSS ile (örneğin Flexbox veya Grid) öğeleri yan yana dizmek, arka plan vermek veya boşlukları ayarlamak için elemanları gruplarken
<div>kullanın. - Anlam Katmayın:
<div>bir paragraf değildir, bir başlık değildir, bir buton değildir. Anlam taşıyan hiçbir veriyi sırf şekillendirmek için sadece<div>içine hapsetmeyin. - Semantik Etiketleri Önceliklendirin: Eğer o kutu sitenizin navigasyon menüsüyse
<nav>, ana içeriğiyse<main>, bir makale ise<article>etiketlerini tercih edin.<div>her zaman son çareniz olmalıdır.
HTML dilinin genel esnekliği sayesinde sayfaları tamamen <div> kullanarak inşa etseniz bile web tarayıcıları bu kodu çalıştırır ve sayfanız bozuk görünmez. Ancak 2026’nın modern web standartlarında amaç sadece ekranda güzel görünen değil; arama motorları tarafından anlaşılabilen, engelli bireyler tarafından erişilebilen ve diğer yazılımcılar tarafından kolayca bakımı yapılabilen profesyonel kodlar yazmaktır.
