HTML article, section, div ve aside Farkı: Hangisini Ne Zaman Kullanmalı?

Dört öğe, dört farklı anlam

MDN <article> öğesini bağımsız bir kompozisyon olarak tanımlar: Belgenin, sayfanın, uygulamanın ya da sitenin içinde yer alan ama tek başına dağıtılabilecek veya yeniden kullanılabilecek bir içerik. Belgede sayılan örnekler bir forum gönderisi, dergi ya da gazete makalesi, bir blog yazısı, bir ürün kartı, kullanıcının yazdığı bir yorum ve etkileşimli bir küçük uygulamadır (widget). Ortak nokta şudur: Bu parçayı sayfadan koparıp bir RSS akışına, başka bir siteye ya da bir e-posta bültenine koyduğunuzda okuyucu yine ne okuduğunu anlar.

<section> ise genel amaçlı bir bölümdür. MDN'e göre onu temsil edecek daha özel bir anlamsal öğe yoksa kullanılır ve neredeyse her zaman bir başlığı olmalıdır. Bir ürün sayfasındaki "Teknik özellikler", "Kargo bilgisi" ve "Yorumlar" bölümleri tipik <section> adaylarıdır: Her biri sayfanın bir parçasıdır, tek başına anlamlı bir yayın değildir ama kendi başlığıyla ayrılmış bir konudur.

<aside>, içeriği belgenin ana içeriğiyle yalnızca dolaylı olarak ilişkili olan bir parçayı temsil eder. Bu tür içerik genellikle kenar çubuğu ya da metnin yanında duran bir bilgi kutusu olarak gösterilir: ilgili bağlantılar, yazar hakkında kısa bilgi, konuya yan bir not. <div> ise akış içeriği (flow content) için genel kaptır; CSS ile biçimlendirilene kadar içeriğe ya da yerleşime hiçbir etkisi yoktur ve kendi başına hiçbir şey ifade etmez.

Seçim sırası: Önce özel öğe, sonra section, en son div

<section> sayfasındaki kullanım notları, hangi öğeyi seçeceğinize karar verirken sormanız gereken soruları dolaylı yoldan verir. Bunları bir kontrol listesine çevirdiğimizde şu sıra çıkar:

• İçerik bir gezinme menüsü mü? O zaman <nav> kullanılır, <section> değil.
• İçerik tek başına anlamlı, başka bir yerde yayımlanabilecek bir birim mi (blog yazısı, yorum, haber)? O zaman <article>.
• İçerik ana konuya yardımcı, ama onun parçası olmayan bir bilgi mi (ilgili bağlantılar, yazar biyografisi)? O zaman <aside>.
• İçerik belgenin ana içerik alanı mı? O zaman <main>.
• Yukarıdakilerin hiçbiri değil ama başlığı olan ayrı bir konu mu? O zaman <section>.
• Öğeyi sadece CSS ile biçimlendirmek ya da birkaç öğeyi bir arada tutmak için mi istiyorsunuz? O zaman <div>.

MDN, <section> için özel bir öğesi olmayan içeriklere örnek olarak arama sonuçlarının listesini ve kontrolleriyle birlikte bir harita görünümünü verir. <div> sayfası da aynı ilkeyi tersinden söyler: <div>, <article> ya da <nav> gibi başka bir anlamsal öğe uygun olmadığında kullanılmalıdır.

Teknik özetler ne söylüyor?

MDN her öğenin sayfasının sonunda bir "Technical summary" tablosu verir. Bu tablo, öğenin hangi içerik kategorilerine ait olduğunu, içine ne alabileceğini (permitted content) ve hangi öğelerin içinde durabileceğini (permitted parents) gösterir. Dört öğe için bu satırlar birbirine çok benzer, ama küçük farklar önemlidir.

<article>, <section> ve <aside> akış içeriği, bölümleme içeriği (sectioning content) ve somut içerik (palpable content) kategorilerindedir. <div> ise bölümleme içeriği değildir; yalnızca akış ve somut içeriktir. Bölümleme içeriği kategorisinin tam listesi <article>, <aside>, <nav> ve <section> öğelerinden oluşur. Bölümleme öğeleri, içlerindeki <header> ve <footer> öğelerinin hangi bölüme ait olduğunu belirler.

Dördü de içine akış içeriği alır; yani paragraf, liste, tablo, form, başka bölümler ve başlıklar koyabilirsiniz. Başlangıç ve bitiş etiketleri her dördünde de zorunludur. Bir kısıt dikkat çeker: <article>, <section> ve <aside> bir <address> öğesinin torunu olamaz. <div> için WHATWG HTML'de ek bir izin vardır: Bir <dl> listesinin doğrudan çocuğu olabilir ve içinde bir ya da daha fazla <dt> ile onu izleyen <dd> öğelerini gruplayabilir. Bu, tanım listelerini biçimlendirmek için <div>'in meşru kullanımlarından biridir.

<dl>
  <div>
    <dt>HTML</dt>
    <dd>Belgenin yapısı</dd>
  </div>
  <div>
    <dt>CSS</dt>
    <dd>Belgenin görünümü</dd>
  </div>
</dl>

Ekran okuyucular için fark: Varsayılan roller

Bu öğelerin asıl farkı erişilebilirlik ağacında ortaya çıkar. <article> varsayılan olarak article rolündedir. <div> ise generic rolündedir; MDN burada önemli bir ayrıntıyı vurgular: Bu rol none değildir, yani <div> erişilebilirlik ağacından tamamen kaybolmaz. Bu, belirli bir role sahip doğrudan alt öğe bekleyen bazı ARIA birleşimlerini etkileyebilir. ARIA generic rolü sayfası bu rolün yalnızca tarayıcıların kullanması için tasarlandığını, adı olmadığı için aria-label ve aria-labelledby verilmesinin yasak olduğunu belirtir.

<section> için durum koşula bağlıdır: Öğenin bir erişilebilir adı (accessible name) varsa rolü region olur, yoksa generic kalır. Yani başlığı aria-labelledby ile bağlanmamış bir <section>, ekran okuyucu açısından <div>'den farklı değildir. region bir ARIA yer işareti (landmark) rolüdür ve MDN onu, kullanıcıların kolayca gitmek isteyeceği kadar önemli bölümler için ayırmayı önerir. Çok fazla yer işareti ekran okuyucuda gürültü oluşturur; bu yüzden her <section>'a ad vermek zorunda değilsiniz.

<section aria-labelledby="kargo-baslik">
  <h2 id="kargo-baslik">Kargo ve teslimat</h2>
  <p>Bu bölüm teslimat koşullarını anlatır.</p>
</section>

Bu örnekte <section>, görünür başlığına aria-labelledby ile bağlanır ve "Kargo ve teslimat" adlı bir region olur. MDN, aynı sonuç için role="region" verilmiş bir <div> yerine doğrudan <section> kullanmayı önerir: Doğru anlamsal öğe, ARIA ile taklit etmekten her zaman önce gelir. Erişilebilir ad konusunun ayrıntıları aria-label ve aria-labelledby yazısında anlatılıyor.

<aside> varsayılan olarak complementary rolündedir. Ancak erişilebilir adı yoksa ve bir bölümleme öğesinin içindeyse (örneğin bir <article> içindeki küçük bir not kutusu) rolü generic olur. Yani sayfa düzeyindeki kenar çubuğu bir yer işaretidir, makale içindeki ufak bir yan not ise değildir.

İç içe article: Yorumlar ve alt içerikler

Bir sayfada birden çok <article> bulunabilir. Örneğin yazıların arka arkaya listelendiği bir blog ana sayfasında her yazı ayrı bir <article> olur ve her birinin içinde bir veya daha fazla <section> yer alabilir. MDN iç içe kullanımı da açıklar: Bir <article> başka bir <article> içindeyse, içteki öğe dıştakiyle ilişkili bir içeriği temsil eder. Bir blog yazısının altındaki her kullanıcı yorumu, yazının <article> öğesinin içinde kendi <article> öğesi olabilir.

Yazar bilgisini <address> öğesiyle verebilirsiniz; ancak bir <article> içindeki <address>, iç içe geçmiş alt <article> öğelerine uygulanmaz. Yani yazının yazarı, yorumların yazarı sayılmaz. Yayın tarihini de bir <time> öğesinin datetime özniteliğiyle verirsiniz; bunun biçim kuralları time ve data etiketi yazısında ayrıntılı olarak var.

Uygulamalı örnek: Bir blog yazısı sayfası

Aşağıdaki örnek dört öğeyi bir arada kullanır. Yazının kendisi bir <article>, yazının bölümleri <section>, yorumlar iç içe <article>, yazıya eşlik eden ilgili bağlantılar ise <aside> içindedir. <div> yalnızca biçimlendirme için bir sarmalayıcı olarak kullanılır.

<main>
  <div class="icerik-kolonu">
    <article>
      <h1>Alan adı nasıl seçilir?</h1>
      <p>Yayın: <time datetime="2026-11-07">7 Kasım 2026</time></p>
      <section>
        <h2>Kısa ve akılda kalıcı olsun</h2>
        <p>Telefonda kolayca söylenebilen bir ad seçin.</p>
      </section>
      <section>
        <h2>Uzantıyı düşünün</h2>
        <p>Hedef kitlenize uygun bir uzantı seçin.</p>
      </section>
      <section>
        <h2>Yorumlar</h2>
        <article>
          <h3>Çok işime yaradı</h3>
          <p>Kısa ad önerisi bence en önemlisi.</p>
          <footer>
            <p>Ayşe, <time datetime="2026-11-08 09:30">8 Kasım</time></p>
          </footer>
        </article>
      </section>
    </article>
  </div>
  <aside aria-label="İlgili yazılar">
    <h2>İlgili yazılar</h2>
    <ul>
      <li><a href="https://ornek.com/dns-nedir">DNS nedir?</a></li>
    </ul>
  </aside>
</main>

Bu yapıda dikkat edilecek noktalar şunlardır. Her <article> ve her <section> kendi başlığıyla açılır; yorumdaki <h3>, onu kapsayan "Yorumlar" bölümünün <h2> başlığının bir alt seviyesidir. Yorumun <footer> öğesi, en yakın bölümleme atası yorum <article> öğesi olduğu için sayfanın değil yorumun alt bilgisidir. Sayfa düzeyindeki <aside> ise aria-label ile adlandırıldığı için ekran okuyucuda "İlgili yazılar" adlı tamamlayıcı bir bölge olarak görünür. <div> hiçbir anlam katmaz, sadece CSS ile bir kolon oluşturmak için oradadır.

Başlıksız section ne zaman kabul edilir?

MDN, <section> öğesinin başlıksız kullanımına çok az yer bırakır ve bunu belge yapısından çok web uygulaması arayüzleriyle ilişkilendirir. Belge içinde başlığı olmayan ayrı bir bölümün pek anlamı yoktur; başlıklar tüm okuyuculara, özellikle ekran okuyucu kullananlara yardım eder ve arama motorları için de faydalıdır. Örnek olarak iki durum verilir: Genel gezinme zaten bir <nav> içindeyken "önceki yazı / sonraki yazı" bağlantılarından oluşan ikincil bir gezinme alanı ve bir e-posta uygulamasındaki "Yanıtla", "Tümünü yanıtla", "İlet", "Sil" düğmelerinden oluşan bir araç çubuğu.

<section>
  <button type="button">Yanıtla</button>
  <button type="button">İlet</button>
  <button type="button">Sil</button>
</section>

Bu tür bir alanda bile içeriğe göre bir başlık eklemek iyi bir seçenek olabilir. Başlık eklemek istemiyorsanız ama alanın ekran okuyucuda ayrı bir bölüm olarak duyurulmasını istiyorsanız, aria-label ile bir ad vermeyi düşünebilirsiniz; ad vermezseniz öğe generic rolünde kalır.

Sık yapılan hatalar

• <section>'ı biçimlendirme kabı olarak kullanmak: Sadece arka plan rengi ya da kenar boşluğu vermek için açılan kutular <div> olmalıdır. MDN bunu açıkça söyler: Öğeyi yalnızca biçimlendirme sarmalayıcısı olarak kullanıyorsanız <div> seçin.
• Her kutuyu <article> yapmak: Bir ürün kartı ya da yorum tek başına anlamlıdır, ama "Kampanyalar" başlıklı bir sayfa bölümü ya da bir form adımı tek başına yayımlanabilir bir içerik değildir.
• <aside> içine parantez içi açıklama koymak: MDN, parantez içindeki metnin ana akışın parçası sayıldığını ve <aside> ile işaretlenmemesi gerektiğini belirtir.
• İç içe bölümlerde birden fazla <h1> kullanmak: Başlık sayfası, iç içe bölümleme öğelerinde birden çok <h1> kullanımının eski standart sürümlerinde izinli olduğunu ama artık uygun olmadığını belirtir. Başlık seviyelerini bölümlerin derinliğine göre sırayla siz vermelisiniz.
• Bölüm öğelerini <address> içine koymak: Üç bölümleme öğesi de <address> öğesinin torunu olamaz. <address> yalnızca iletişim bilgisi içindir.
• <div> üzerinde eski align özniteliğini kullanmak: MDN bu özniteliğin artık geçersiz (obsolete) olduğunu, hizalamanın CSS ile yapılması gerektiğini yazar.
• <div>'e ARIA ile anlam yüklemek: <div> her ARIA rolünü kabul eder, ama role="region" ya da role="article" eklemek yerine doğrudan <section> veya <article> yazmak hem daha kısa hem de daha güvenilirdir.

Hangi ARIA rollerine izin var?

Teknik özetlerin "Permitted ARIA roles" satırı, öğenin varsayılan rolünü başka bir rolle değiştirmenize izin verilip verilmediğini gösterir. <article> için izin verilen roller application, document, feed, main, none, presentation ve region ile sınırlıdır. <aside> için liste feed, none, note, presentation, region ve search rollerinden oluşur. <section> çok daha geniş bir liste kabul eder (alert, dialog, navigation, tabpanel ve diğerleri). <div> ise her rolü kabul eder. Bu esneklik, <div>'in her şeye dönüştürülmesi gerektiği anlamına gelmez; ARIA'nın ilk kuralı, işi yapan yerel bir HTML öğesi varsa onu kullanmaktır. Ayrıntılar için ARIA nedir yazısına bakabilirsiniz.

Sık Sorulan Sorular

section ile article arasındaki en kısa fark nedir?

<article> tek başına anlamlı ve dağıtılabilir bir içeriktir; <section> ise bir bütünün başlıklı bir parçasıdır. Bir haber yazısı <article>, o yazının "Arka plan" bölümü <section> olur.

Bir article içinde section, section içinde article olabilir mi?

Evet. Her ikisi de akış içeriği kabul ettiği için birbirinin içinde yer alabilir. MDN'in film incelemesi örneğinde bir <article> içinde "İnceleme" ve "Kullanıcı yorumları" bölümleri vardır; kullanıcı yorumları bölümünün içinde de her yorum ayrı bir <article> öğesidir.

div kullanmak kötü bir uygulama mı?

Hayır. <div> bir hata değil, uygun anlamsal öğe olmadığında kullanılan doğru araçtır. CSS yerleşimi için sarmalayıcılar, bir bölüme lang vermek ya da <dl> içinde terim gruplamak gibi işler için idealdir. Sorun, anlamı olan içeriği <div> ile işaretleyip anlamı kaybetmektir.

Her section için aria-labelledby eklemeli miyim?

Zorunlu değil. Ad verilen her <section> bir region yer işareti olur ve MDN yer işaretlerinin az kullanılmasını önerir. Kullanıcının doğrudan gitmek isteyeceği önemli bölümlere ad verin, diğerlerini görünür başlıklarıyla bırakın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · Semantik etiketler · Başlık etiketleri · ARIA nedir · HTML iç içe kuralları ve sık hatalar · HTML web sayfası oluşturma rehberi