Etiketi: HTML İçerik Bölümleme Elemanı Nasıl Kullanılır?

Web dünyasının temel yapı taşlarından biri olan HTML, içeriği düzenlemek ve yapılandırmak için çeşitli etiketler sunar. Bu etiketler arasında, belki de en sık kullanılan ve en esnek olanlardan biri

etiketidir. “Division” kelimesinin kısaltması olan

, bir web sayfasının belirli bir bölümünü veya içeriğini mantıksal olarak gruplamak için kullanılan genel amaçlı bir kapsayıcıdır. Kendi başına herhangi bir anlamsal anlam taşımamasına rağmen, CSS ile stil uygulamak ve JavaScript ile etkileşim kurmak için vazgeçilmez bir araçtır. Bu makalede,

etiketinin ne olduğunu, nasıl kullanıldığını, en iyi uygulamalarını, yaygın hatalarını ve modern web geliştirmedeki yerini detaylı bir şekilde inceleyeceğiz.

Giriş: HTML ve Web Geliştirmede
‘in Önemi

HTML (HyperText Markup Language), bir web sayfasının yapısını tanımlayan işaretleme dilidir. Metinler, görseller, bağlantılar ve diğer medya türleri, HTML etiketleri aracılığıyla düzenlenir. HTML etiketleri, tarayıcıya içeriğin nasıl görüntüleneceği ve ne anlama geldiği hakkında bilgi verir. Bazı etiketler, örneğin

(paragraf),

...



Kart Başlığı
Kart içeriği burada.



JavaScript ile Etkileşim
JavaScript, web sayfalarına dinamizm katmak için kullanılır.  elemanları, JavaScript'in DOM (Document Object Model) aracılığıyla hedefleyebileceği ve manipüle edebileceği temel hedeflerden biridir.
*   İçerik Değiştirme: Bir 'in içeriği (metin, HTML) JavaScript ile dinamik olarak değiştirilebilir.
*   Stil Güncelleme: 'in CSS stilleri (renk, boyut, görünürlük vb.) JavaScript ile değiştirilebilir.
*   Etkinlik Dinleme: Bir 'e tıklama, üzerine gelme gibi olay dinleyicileri eklenebilir.
*   Görünürlük Kontrolü: JavaScript ile bir  gizlenebilir veya gösterilebilir.
html



Merhaba Dünya!





Düzen Oluşturma (Layout)
Modern web tasarımında, 'ler genellikle Flexbox (Esnek Kutu Modeli) ve CSS Grid (Izgara Modeli) gibi güçlü CSS düzenleme teknikleriyle birlikte kullanılır. Bu teknikler, duyarlı (responsive) ve karmaşık sayfa düzenlerini kolayca oluşturmayı sağlar.

*   Flexbox ile: Bir 'i esnek bir kapsayıcı (flex container) yaparak, içindeki elemanların (flex items) tek bir yönde (yatay veya dikey) nasıl hizalanacağını ve dağıtılacağını kontrol edebilirsiniz.
*   CSS Grid ile: Bir 'i ızgara kapsayıcısı (grid container) yaparak, içindeki elemanları hem satır hem de sütun bazında iki boyutlu bir ızgarada konumlandırabilirsiniz.
html



1
2
3


A
B
C



 Kullanımına İlişkin En İyi Uygulamalar ve Yaygın Hatalar

 etiketi güçlü ve esnek olsa da, yanlış kullanımı web sitenizin performansı, erişilebilirliği ve bakımı üzerinde olumsuz etkilere yol açabilir.

Semantik HTML Önceliği
HTML5 ile birlikte gelen semantik etiketler, web sayfalarının yapısını daha anlamlı hale getirir. Bu etiketler, tarayıcılara, arama motorlarına ve yardımcı teknolojilere içeriğin ne anlama geldiği hakkında daha fazla bilgi sağlar. Bu nedenle, mümkün olduğunca  yerine semantik etiketleri tercih etmek en iyi uygulamadır.

*   : Sayfanın veya bir bölümün başlık kısmını içerir.
*   : Navigasyon bağlantılarını içerir.
*   : Sayfanın ana ve benzersiz içeriğini içerir.
*   : Bağımsız, kendi kendine yeten bir içerik parçasını (örneğin bir blog yazısı, haber makalesi) temsil eder.
*   : Bir belgenin tematik olarak gruplandırılmış bir bölümünü temsil eder.
*   : Ana içerikten ayrı, ancak onunla ilişkili içeriği (örneğin kenar çubuğu, reklamlar) temsil eder.
*   : Sayfanın veya bir bölümün alt bilgi kısmını içerir.

Ne Zaman  Kullanılmalı?
Semantik etiketlerin uygun olmadığı durumlarda  kullanmak hala geçerlidir:
*   Stil Amaçlı İç Gruplamalar: Bir semantik elemanın (örneğin ) içinde, sadece stil veya düzen amaçlı olarak birkaç elemanı gruplamak için.
*   JavaScript Hedefleri: Belirli bir JavaScript işlevi için anlamsız bir kapsayıcıya ihtiyaç duyulduğunda.
*   Component Wrapper'ları: Modern framework'lerde (React, Vue) bileşenleri sarmalamak için sıklıkla  kullanılır.

Yanlış Kullanım Örneği (Semantik Olmayan):
html
...
...
...
...
Doğru Kullanım Örneği (Semantik):
html
...
...
...

...
 Cehennemi (Div Soup) ve Önlenmesi

"Div Soup" veya "Div Cehennemi", aşırı ve gereksiz yere iç içe  etiketlerinin kullanıldığı, karmaşık ve okunması zor HTML yapılarını ifade eder. Bu durum, kodun bakımını zorlaştırır, performansı düşürebilir ve hata ayıklamayı karmaşık hale getirir.

Neden Kaçınılmalı?
*   Okunabilirlik ve Bakım: Çok fazla iç içe , kodun okunmasını ve anlaşılmasını zorlaştırır.
*   Performans: Tarayıcının DOM ağacını işlemesi ve stil hesaplaması için daha fazla kaynak harcamasına neden olabilir.
*   CSS Karmaşıklığı: Belirli bir elemanı hedeflemek için uzun ve karmaşık CSS seçiciler yazmaya yol açabilir.

Önleme Yolları:
*   Semantik Etiketleri Kullanın: Her zaman önce semantik bir etiket olup olmadığını kontrol edin.
*   Gereksiz Kapsayıcılardan Kaçının: Yalnızca stil veya yapılandırma için kesinlikle gerekli olduğunda  kullanın.
*   CSS Preprocessor'ları (SASS/LESS): İyi yapılandırılmış CSS ile karmaşıklığı azaltmaya yardımcı olabilir.
*   Bileşen Tabanlı Yaklaşım: Küçük, yeniden kullanılabilir bileşenler oluşturarak kodu daha modüler hale getirin.

Erişilebilirlik (Accessibility)
 etiketi kendi başına anlamsız olduğu için, varsayılan olarak herhangi bir erişilebilirlik bilgisi sağlamaz. Bu, ekran okuyucular gibi yardımcı teknolojiler için içeriğin anlaşılmasını zorlaştırabilir.

Erişilebilirlik İçin  Kullanımı:
*   role Nitelikleri: 'e semantik anlam kazandırmak için ARIA (Accessible Rich Internet Applications) role nitelikleri kullanılabilir. Örneğin, role="button", role="tablist", role="dialog" gibi. Ancak, mümkünse yerleşik semantik HTML elemanlarını (örneğin 

html


Tıkla




Tıkla
 ile CSS İlişkisi: Stil Uygulama Sanatı

 ve CSS, web tasarımının ayrılmaz bir parçasıdır.  bir yapıyı sağlarken, CSS bu yapıya görünüm ve estetik kazandırır.

id ve class Nitelikleri

id ve class nitelikleri, CSS'in belirli  elemanlarını hedeflemesini sağlar.
*   id: Bir HTML belgesinde benzersiz olmalıdır. # işaretiyle CSS'te hedeflenir. Yüksek özgüllüğe sahiptir.
*   class: Birden fazla elemana uygulanabilir ve yeniden kullanılabilir. . işaretiyle CSS'te hedeflenir.
html
...
...
...

css

#main-header {

    background-color: #333;

    color: white;

    padding: 1rem;

}
.product-item {

    border: 1px solid #ddd;

    margin: 10px;

    padding: 15px;

}
.product-item.featured { / Hem product-item hem de featured sınıfına sahip div'leri hedefler /

    background-color: #ffe0b2;

    box-shadow: 0 0 10px rgba(0,0,0,0.1);

}
CSS Seçiciler
 elemanlarını hedeflemek için çeşitli CSS seçiciler kullanılabilir:
*   div: Tüm  elemanlarını seçer.
*   #myId: Belirli bir id'ye sahip 'i seçer.
*   .myClass: Belirli bir class'a sahip tüm 'leri seçer.
*   div.myClass: Yalnızca myClass sınıfına sahip  elemanlarını seçer.
*   div > p: div'in doğrudan alt elemanı olan p etiketlerini seçer.
*   div p: div'in içindeki tüm p etiketlerini (doğrudan veya dolaylı) seçer.
*   div + p: div'den hemen sonra gelen p etiketini seçer.
*   div ~ p: div ile aynı seviyede olan ve ondan sonra gelen tüm p etiketlerini seçer.

Box Model
Her HTML elemanı (dolayısıyla  de), tarayıcı tarafından bir kutu olarak işlenir. Bu kutu modeli, içeriğin (content), dolgunun (padding), kenarlığın (border) ve dış boşluğun (margin) nasıl düzenlendiğini tanımlar. 'in boyutunu ve konumunu ayarlarken bu modelin anlaşılması kritik öneme sahiptir.
css

.my-div {

    width: 200px; / İçerik genişliği /

    height: 100px; / İçerik yüksekliği /

    padding: 20px; / İçerik ile kenarlık arası boşluk /

    border: 5px solid blue; / Kenarlık /

    margin: 15px; / Dış boşluk /

    background-color: lightblue;

}
Flexbox ve Grid ile 

Modern CSS düzenleme teknikleri olan Flexbox ve Grid,  elemanlarını kullanarak karmaşık ve duyarlı düzenler oluşturmanın en etkili yollarıdır.

*   Flexbox: Tek boyutlu (satır veya sütun) düzenler için idealdir. Bir 'i display: flex; olarak ayarladığınızda, içindeki doğrudan alt elemanlar esnek öğeler (flex items) haline gelir ve justify-content, align-items, flex-direction gibi özelliklerle hizalanabilir ve dağıtılabilir.
html

Item 1
Item 2
Item 3


css

.flex-container {

    display: flex;

    justify-content: space-between; / Elemanları aralıklı olarak hizalar /

    align-items: center; / Elemanları dikeyde ortalar /

    height: 100px;

    border: 1px solid #ccc;

}
*   CSS Grid: İki boyutlu (satır ve sütun) düzenler için tasarlanmıştır. Bir 'i display: grid; olarak ayarladığınızda, içindeki elemanlar bir ızgara üzerinde konumlandırılır. grid-template-columns, grid-template-rows, gap gibi özelliklerle ızgara yapısı tanımlanır.
html

Header
Sidebar
Main Content
Footer


css

.grid-container {

    display: grid;

    grid-template-columns: 1fr 3fr; / İki sütun: biri 1 birim, diğeri 3 birim /

    grid-template-rows: auto 1fr auto; / Üç satır: otomatik, esnek, otomatik /

    gap: 10px;

    height: 300px;

    border: 1px solid #ccc;

}

.grid-container div:nth-child(1) { grid-column: 1 / -1; } / Header tüm sütunları kaplar /

.grid-container div:nth-child(4) { grid-column: 1 / -1; } / Footer tüm sütunları kaplar /
 ve JavaScript: Dinamik İçerik ve Etkileşim

JavaScript, web sayfalarını etkileşimli hale getirmek için kullanılır ve  elemanları, JavaScript'in en sık manipüle ettiği hedeflerden biridir. DOM (Document Object Model) aracılığıyla, JavaScript bir 'in içeriğini, stilini veya niteliklerini değiştirebilir, hatta yeni 'ler oluşturup mevcut olanlara ekleyebilir.

DOM Manipülasyonu
JavaScript,  elemanlarına erişmek için çeşitli DOM metotları sunar:
*   document.getElementById('myId'): Belirli bir id'ye sahip elemanı seçer.
*   document.getElementsByClassName('myClass'): Belirli bir class'a sahip tüm elemanları bir HTMLCollection olarak döndürür.
*   document.querySelector('.myClass') veya document.querySelector('#myId'): Belirli bir CSS seçicisine uyan ilk elemanı seçer.
*   document.querySelectorAll('.myClass'): Belirli bir CSS seçicisine uyan tüm elemanları bir NodeList olarak döndürür.
html

Bilgi 1
Bilgi 2

javascript

const dynamicDiv = document.getElementById('dynamicContent');

const infoBoxes = document.getElementsByClassName('infoBox');

const firstInfoBox = document.querySelector('.infoBox'); // Sadece ilkini seçer

const allInfoBoxes = document.querySelectorAll('.infoBox'); // Hepsini seçer
İçerik Ekleme/Değiştirme
Bir 'in içeriğini değiştirmek veya yeni içerik eklemek yaygın bir JavaScript görevidir.
*   element.innerHTML: Bir elemanın HTML içeriğini alır veya ayarlar. Bu, hem metin hem de HTML etiketlerini içerir. Dikkat: Güvenlik açıkları (XSS) yaratabileceği için kullanıcıdan gelen verilerle doğrudan kullanmaktan kaçınılmalıdır.
*   element.textContent: Bir elemanın sadece metin içeriğini alır veya ayarlar. Güvenlidir, HTML etiketlerini metin olarak ele alır.
*   element.appendChild(): Yeni oluşturulan bir elemanı mevcut bir elemanın sonuna ekler.
javascript

dynamicDiv.innerHTML = '
JavaScript ile Eklenen Başlık
Bu içerik dinamik olarak eklendi.
';

infoBoxes[0].textContent = 'Güncellenmiş Bilgi';
const newParagraph = document.createElement('p');

newParagraph.textContent = 'Yeni bir paragraf.';

dynamicDiv.appendChild(newParagraph);
Stil Değiştirme
JavaScript, bir 'in CSS stillerini doğrudan değiştirebilir.
*   element.style.propertyName: CSS özelliklerini doğrudan JavaScript üzerinden değiştirir. Örn: dynamicDiv.style.backgroundColor = 'yellow';
*   element.classList.add(), element.classList.remove(), element.classList.toggle(): Bir elemanın class listesini yönetmek için daha iyi bir yöntemdir. Bu sayede stil değişiklikleri CSS dosyalarında tanımlı kalır.
javascript

dynamicDiv.style.backgroundColor = 'lightgreen';

dynamicDiv.style.padding = '10px';
// Class listesi ile stil değiştirme (tercih edilen yöntem)

dynamicDiv.classList.add('highlight'); // CSS'te .highlight sınıfı tanımlı olmalı

dynamicDiv.classList.remove('old-style');

dynamicDiv.classList.toggle('active'); // Eğer active sınıfı varsa kaldırır, yoksa ekler
Olay Dinleyicileri
Bir 'e tıklama, üzerine gelme gibi kullanıcı etkileşimlerini dinlemek için olay dinleyicileri eklenebilir.
*   element.addEventListener('event', function): Belirli bir olayı dinler ve olay gerçekleştiğinde bir fonksiyonu çalıştırır.
javascript

dynamicDiv.addEventListener('click', function() {

    alert('Div tıklandı!');

    dynamicDiv.style.backgroundColor = 'orange';

});
 ve Diğer Blok Seviyesi Elemanlarla Farkları

HTML'de birçok eleman bulunur ve her birinin belirli bir amacı vardır. 'in diğer benzer elemanlardan farkını anlamak, doğru elemanı doğru yerde kullanmak için önemlidir.

 vs 

Bu iki eleman da semantik olmayan genel amaçlı kapsayıcılardır, ancak temel bir farkları vardır:
*    (Division): Blok seviyesi bir elemandır. Kendi başına bir satır kaplar ve içeriği yeni bir satıra iter. Genellikle daha büyük içerik bloklarını, sayfa bölümlerini veya düzen bileşenlerini gruplamak için kullanılır.
*    (Span): Satır içi (inline) bir elemandır. İçeriğiyle aynı satırda kalır ve kendisinden sonra gelen içeriği yeni bir satıra itmez. Genellikle bir metin parçasının veya satır içi içeriğin küçük bir bölümüne stil uygulamak için kullanılır.
html


Bu bir blok div'dir.
Bu da başka bir blok div'dir.

Bu bir paragraftır ve içinde kırmızı ve kalın bir metin var.
Görüldüğü gibi, 'ler alt alta sıralanırken,  aynı satırda kalır ve sadece belirli bir metin parçasını etkiler.

 vs Semantik Elemanlar (header, nav, main, article, section, aside, footer)

Daha önce de belirtildiği gibi, HTML5 ile gelen semantik etiketler, 'e göre daha spesifik ve anlamlı bir yapı sunar.
*   Anlamsal Fark: Semantik etiketler, içeriğin türü ve amacı hakkında bilgi verirken,  sadece bir kapsayıcı olduğunu belirtir.
*   Erişilebilirlik ve SEO: Semantik etiketler, arama motorları ve yardımcı teknolojiler için web sayfasının yapısını daha iyi anlamalarına yardımcı olur, bu da daha iyi SEO ve erişilebilirlik sağlar.
*   Kod Okunabilirliği: Semantik etiketler, kodun amacını daha net bir şekilde ifade ettiği için okunabilirliği artırır.

Ne Zaman  Tercih Edilmez?
*   Sayfanın ana başlık veya alt bilgi bölümlerini oluştururken ( ve  yerine).
*   Navigasyon menülerini oluştururken ( yerine).
*   Ana içeriği tanımlarken ( yerine).
*   Bağımsız bir içerik parçasını (blog yazısı gibi) gruplarken ( yerine).
*   Tematik bir bölümü tanımlarken ( yerine).
*   Kenar çubuğu veya reklam gibi ilgili ancak ana içerikten ayrı bölümleri oluştururken ( yerine).

Ne Zaman  Kullanılır?
*   Semantik bir elemanın içinde, yalnızca stil veya düzen amaçlı olarak elemanları gruplamak.
*   JavaScript ile dinamik olarak oluşturulan veya manipüle edilen anlamsız kapsayıcılar.
*   Belirli bir semantik anlamı olmayan, ancak görsel gruplama gerektiren durumlar.

Özetle,  genel bir araçtır, semantik elemanlar ise özel araçlardır. Mümkün olduğunda özel aracı kullanın, genel aracı ise özel aracın yetersiz kaldığı veya uygun olmadığı durumlarda devreye sokun.

Gelişmiş Kullanım Senaryoları ve İpuçları
 etiketi, basit bir kapsayıcı olmaktan öte, modern web geliştirme yaklaşımlarında da merkezi bir rol oynar.

Component Tabanlı Geliştirme
React, Vue, Angular gibi modern JavaScript framework'leri, web sayfalarını küçük, bağımsız ve yeniden kullanılabilir bileşenlere ayırma fikrine dayanır. Bu bileşenlerin çoğu zaman tek bir kök elemanı olması gerekir ve bu kök eleman genellikle bir 'dir. Bir bileşenin içindeki farklı parçaları gruplamak ve stil uygulamak için de 'ler yaygın olarak kullanılır.
jsx

// React örneği

function ProductCard({ product }) {

  return (

      
{product.name}
{product.description}
      
    
  );

}
Burada  bileşeni, tüm içeriğini bir  içinde sarmalar.

CSS Özel Nitelikler (Custom Properties / CSS Variables)
 elemanları üzerinde CSS özel niteliklerini (değişkenlerini) tanımlamak ve kullanmak, stil yönetimini daha esnek hale getirir. Bu değişkenler, bir 'in belirli bir bölümü için tema renkleri, boyutlar veya diğer stil değerlerini depolamak için kullanılabilir.
html

Bu birincil renkte bir metin.
    

data-* Nitelikleri

HTML5 ile birlikte gelen data-* nitelikleri, geliştiricilerin HTML elemanlarına özel, anlamsal olmayan veri depolamasına olanak tanır. Bu veriler, JavaScript tarafından kolayca erişilebilir ve kullanılabilir. 'ler, bu tür verileri depolamak için sıkça kullanılır.
html

Kullanıcı Adı
Profil Bilgileri

javascript const userProfileDiv = document.querySelector('.user-profile'); const userId = userProfileDiv.dataset.userId; // "12345" const userStatus = userProfileDiv.dataset.status; // "active" console.log(Kullanıcı ID: ${userId}, Durum: ${userStatus});`Bu, özellikle JavaScript ile etkileşim kuran dinamik içeriklerde veya bileşenlerde çok kullanışlıdır.

`Sonuç:`

`'in Gücü ve Sorumluluğu`

 etiketi, HTML'in en temel ve en çok yönlü elemanlarından biridir. Semantik bir anlam taşımamasına rağmen, web sayfalarının yapılandırılmasında, stil uygulamasında ve dinamik etkileşimlerin oluşturulmasında merkezi bir rol oynar. CSS ile birleştiğinde, karmaşık düzenlerin ve görsel tasarımların temelini oluşturur; JavaScript ile birleştiğinde ise web sayfalarına hayat verir.

Ancak,

'in gücü aynı zamanda bir sorumluluk da getirir. Aşırı ve gereksiz kullanımı, "Div Cehennemi"ne yol açarak kodun okunabilirliğini, bakımını ve performansını olumsuz etkileyebilir. Modern web geliştirme pratikleri, HTML5'in semantik etiketlerini mümkün olduğunca kullanmayı ve

'i yalnızca gerçekten gerekli olduğunda, yani belirli bir anlamsal karşılığı olmayan görsel veya yapısal gruplamalar için kullanmayı teşvik eder.

Doğru kullanıldığında,

temiz, bakımı kolay ve erişilebilir web sayfaları oluşturmak için vazgeçilmez bir araçtır. Geliştiricilerin,

'in ne zaman kullanılacağını ve ne zaman semantik alternatiflere başvurulacağını iyi anlaması, daha sağlam ve sürdürülebilir web projeleri inşa etmelerini sağlayacaktır. Web'in gelişimi devam ettikçe,

`’in rolü evrimleşmeye devam edecek, ancak temel işlevi olan içerik bölümleme elemanı olarak yeri hep baki kalacaktır.

byFatih Soysal

Yorumlar

İçeriği beğendiniz mi? Bir tartışma başlatın veya görüşlerinizi paylaşın.

Yorum Yaz

Bir yanıt yazın Yanıtı iptal et

Robot Köpeğim Telefonumu Çaldı: Yapay Zeka Destekli Evcil Hayvanlar ve Güvenlik
26 Ekim 2026

Bitcoin Grid Bot ile Otomatik Ticaretin Gücü: Geliştirme ve Sanal Test Süreci
26 Ekim 2026

Modern Web Kullanılamaz Yapay Zeka Çorbasına mı Dönüşüyor?
26 Ekim 2026

Robot Köpeğim Telefonumu Çaldı: Yapay Zeka Destekli Evcil Hayvanlar ve Güvenlik
26 Ekim 2026

Bitcoin Grid Bot ile Otomatik Ticaretin Gücü: Geliştirme ve Sanal Test Süreci
26 Ekim 2026

Modern Web Kullanılamaz Yapay Zeka Çorbasına mı Dönüşüyor?
26 Ekim 2026

Etiketi: HTML İçerik Bölümleme Elemanı Nasıl Kullanılır?