🚀 HTML'in Görünmez Kahramanı: <div> ve Mimari Yapı

Selamlar, bugün HTML dünyasının en 'karakterli karaktersize' yani <div> etiketine bakacağız. Bir senior developer olarak şunu söyleyebilirim: div aslında hiçbir şeydir, ama aynı zamanda her şeydir.

Semantik Boşluk Ne Demek?

div (division), tarayıcı için hiçbir anlamsal değer taşımaz. Bir <header> etiketi tarayıcıya "Ben başlığım", <nav> etiketi "Ben menüyüm" derken; div sadece "Ben bir kutuyum" der. Bu anlamsal boşluk, onu mükemmel bir stil ve gruplama aracı yapar. Çünkü üzerinde hiçbir ön tanımlı stil (bazı margin/padding sıfırlamaları hariç) veya kısıtlayıcı kural taşımaz.

Neden Vazgeçilmez?

1. Gruplama: CSS ile ortak stil vermek istediğiniz elemanları bir araya toplar.
2. Layout (Yerleşim): Flexbox ve Grid sistemlerinin temel taşıdır. Kapsayıcı (container) görevini üstlenir.
3. JS Hook: JavaScript ile manipüle etmek istediğiniz bir alanı 'kancalamak' için en güvenli limandır.

Ufak bir tecrübe: Biz Car Crasher oyunumuzun arayüzünü (UI) tasarlarken, skor tablosu, hız göstergesi ve hasar barı gibi birbirinden bağımsız tüm HUD elemanlarını kendi div katmanlarına ayırdık. Godot kullananlar bilir; oradaki 'Node' yapısı neyse, HTML dünyasında da div odur. Hiçbir özelliği yoktur ama her şeyi içinde tutan kök budur.

Dikkat: "Divitis" Hastalığı

div çok güçlüdür ama her şeyi div ile yapmaya çalışmak (sektörde buna divitis denir) kodunuzun okunabilirliğini ve SEO performansını düşürür.

• Eğer bir metin bloğu yazıyorsanız <p> kullanın.
• Eğer bir buton yapıyorsanız <button> kullanın.
• Eğer ana bir bölüme isim veriyorsanız <section> kullanın.

Ancak bu elemanları bir kutu içinde yan yana dizmeniz, onlara bir arka plan vermeniz veya JavaScript ile topluca gizleyip göstermeniz gerekiyorsa; işte o zaman sahneye div çıkar. O, sizin CSS'deki fırçanızın en sadık tuvalidir.

Ovid Game Studio | Teknik Notlar ovidgame.com