HTML Semantik Etiketler: header, nav, main, aside, footer, search

Tam bir sayfa iskeleti

<body>
  <a href="#icerik">Ana içeriğe geç</a>
  <header>
    <a href="/">Örnek Kahve</a>
    <nav aria-label="Ana menü">
      <ul>
        <li><a href="/">Anasayfa</a></li>
        <li><a href="/urunler/">Ürünler</a></li>
        <li><a href="/iletisim/">İletişim</a></li>
      </ul>
    </nav>
    <search>
      <form action="/ara/">
        <label for="site-ara">Sitede ara</label>
        <input type="search" id="site-ara" name="q" />
        <button type="submit">Ara</button>
      </form>
    </search>
  </header>
  <main id="icerik">
    <h1>Filtre kahve rehberi</h1>
    <p>Filtre kahve hazırlamanın temel adımları.</p>
    <aside>
      <h2>Biliyor muydunuz?</h2>
      <p>Kahve çekirdeği aslında bir meyvenin çekirdeğidir.</p>
    </aside>
  </main>
  <footer>
    <address>
      Örnek Kahve:
      <a href="mailto:iletisim@example.com">iletisim@example.com</a>
    </address>
    <p><small>© 2026 Örnek Kahve</small></p>
  </footer>
</body>

Bu iskelette her öğe tek bir görevi üstlenir. Aşağıdaki tablo, öğelerin bu bağlamda (doğrudan <body> altında) aldığı örtük ARIA rollerini özetler:

header: giriş içeriği ve banner bölgesi

<header> giriş niteliğindeki içeriği, tipik olarak bir grup giriş ya da gezinme yardımcısını temsil eder. İçinde başlık öğeleri bulunabilir, ama logo, arama formu ya da yazar adı da olabilir. MDN'nin önemli ayrımı bağlama dayanır: <header> bölümleme içeriğinin, <main> öğesinin ya da bunlarla aynı role sahip bir öğenin içinde değilse site genelindeki banner bölgesiyle aynı anlamı taşır. Bu, çoğunlukla sayfanın üstünde yer alan ve logo, şirket adı, arama ve genel menüyü içeren site başlığıdır.

Bir <article>, <section>, <aside>, <nav> ya da <main> içine yerleştirildiğinde ise bölge niteliğini kaybeder, generic rolünü alır ve yalnızca çevreleyen bölümün giriş içeriğini temsil eder; genellikle o bölümün başlığını içerir ama bu zorunlu değildir. MDN, bu durumda <header> öğesinin aria-label ya da aria-labelledby ile adlandırılamayacağını belirtir.

<article>
  <header>
    <h2>Yeni hasat kahveler geldi</h2>
    <p>Yayın tarihi: <time datetime="2026-11-07">7 Kasım 2026</time></p>
  </header>
  <p>Bu sezonun çekirdekleri mağazamızda.</p>
</article>

Kural olarak bir <header> başka bir <header> ya da <footer> içeremez ve bir <address>, <footer> veya başka bir <header> öğesinin torunu olamaz. <head> ile karıştırmayın: o öğe makine için meta verileri taşır ve HTML belge yapısı yazısında anlatılıyor. Tarih bilgisini taşıyan <time> öğesi için HTML time etiketi yazısına bakın.

nav: önemli gezinme blokları

<nav> amacı gezinme bağlantıları sunmak olan bir sayfa bölümünü temsil eder; bağlantılar aynı belgenin içine ya da başka belgelere gidebilir. Menüler, içindekiler tabloları ve dizinler tipik örneklerdir. Örtük rolü navigation olur. MDN üç kullanım notu verir:

• Sayfadaki her bağlantının <nav> içinde olması gerekmez; öğe yalnızca önemli gezinme blokları içindir. Örneğin <footer> içindeki bağlantı listesi çoğu zaman <nav> gerektirmez.
• Bir belgede birden fazla <nav> olabilir: biri site gezinmesi, biri sayfa içi gezinme için. Bu durumda her birini aria-labelledby ile adlandırmak erişilebilirliği artırır.
• Ekran okuyucular gibi kullanıcı aracıları, yalnızca gezinme içeren bölümlerin ilk okumada atlanıp atlanmayacağına karar vermek için bu öğeyi kullanabilir.

<nav> bir liste içermek zorunda değildir; MDN, bağlantıların düz yazı içinde verildiği bir gezinme bloğunun da geçerli olduğunu gösterir. Yine de menülerde <ul> ya da sıranın önemli olduğu içerik haritalarında (breadcrumb gibi) <ol> sık kullanılır; listeler için HTML listeler yazısına bakın. Birden fazla bölgeyi adlandırmanın yolları aria-label ve aria-labelledby yazısında anlatılıyor.

main: sayfanın ana içeriği

<main> belgenin <body> içindeki baskın içeriğini temsil eder: sayfanın ana konusuyla doğrudan ilgili olan ya da onu genişleten içerik veya bir uygulamanın ana işlevi. Kurallar nettir:

• Bir belgede hidden özniteliği taşımayan birden fazla <main> olamaz.
• İçerik o belgeye özgü olmalıdır. Kenar çubukları, gezinme bağlantıları, telif bilgisi, site logosu ve arama formları gibi sayfalar arasında tekrarlanan içerik, arama sayfanın ana işlevi değilse <main> içine konmaz.
• <main> belgenin ana hattına katkıda bulunmaz; sayfanın yapısını etkileyen başlıklar ve <body> gibi değildir, yalnızca bilgilendiricidir.
• Örtük rolü main olur. MDN, eski tarayıcı desteği gibi bir kaygı yoksa role="main" yerine <main> öğesinin kullanılmasını önerir.

MDN ayrıca tarayıcıların okuma modu (reader mode) işlevlerinin, içeriği sadeleştirilmiş görünüme dönüştürürken <main> öğesine, başlıklara ve bölümleme öğelerine baktığını belirtir.

Atlama bağlantısı (skip link)

<main> öğesine bir id vermek, onu bir atlama bağlantısının hedefi yapar. Atlama bağlantısı <body> içinde olabildiğince erken yer alan ve ana içeriğin başına giden bir bağlantıdır; klavye kullanıcılarının ve anahtar kontrolü, sesli komut gibi yardımcı teknolojilerle gezinen kişilerin her sayfada tekrarlanan menüyü geçmesini sağlar. MDN'ye göre bu bağlantı genellikle odaklanana kadar CSS ile ekran dışında gizlenir. Yukarıdaki iskeletin ilk satırı bir atlama bağlantısıdır.

aside: dolaylı ilgili içerik

<aside> belgenin ana içeriğiyle yalnızca dolaylı ilişkisi olan bir bölümü temsil eder; genellikle kenar çubuğu ya da bilgi kutusu olarak gösterilir. MDN, parantez içindeki metni <aside> ile işaretlememenizi söyler, çünkü bu tür metin ana akışın parçasıdır. Örtük rolü complementary olur; ancak erişilebilir bir adı yoksa ve bölümleme içeriğinin içine yerleştirilmişse generic rolünü alır. Bir <aside> öğesi <address> içinde yer alamaz.

<article>
  <h2>Etiyopya kahvesi</h2>
  <p>Etiyopya, kahvenin ana vatanı olarak kabul edilir.</p>
  <aside>
    <p>Bu ürün mağazamızda yalnızca kış aylarında satılır.</p>
  </aside>
  <p>Çekirdekler genellikle meyvemsi aromalarıyla bilinir.</p>
</article>

footer: alt bilgi ve contentinfo bölgesi

<footer> en yakın bölümleme içeriği atasının ya da bölümleme kökünün alt bilgisini temsil eder. Genellikle bölümün yazarı, telif bilgileri ya da ilgili belgelere bağlantılar içerir. En yakın ata <body> olduğunda alt bilgi bütün sayfaya aittir ve örtük rolü contentinfo olur; <article>, <aside>, <main>, <nav> ya da <section> içinde ise generic rolündedir. <footer> bölümleme içeriği değildir; yeni bir bölüm oluşturmaz.

Yazar bilgisi <address> öğesine yazılıp <footer> içine konabilir. Bir <footer> başka bir <footer> ya da <header> içeremez. MDN ayrıca Safari 13 öncesinde VoiceOver'ın contentinfo bölgesini doğru sunmadığını, eski Safari sürümlerini desteklemeniz gerekiyorsa role="contentinfo" eklenebileceğini not eder.

search: arama ve filtreleme bölgesi

<search> sayfanın ya da uygulamanın arama veya filtreleme işlemiyle ilgili form denetimlerini ve içeriğini kapsayan bir kaptır. Arama bütün siteyi, yalnızca geçerli sayfayı ya da bütün interneti hedefleyebilir. Öğe bir search bölgesi tanımlar; MDN'ye göre bu, bir <form> öğesine role="search" ekleme ihtiyacını ortadan kaldırır.

MDN'nin belirttiği önemli sınır, <search> öğesinin arama sonuçlarını göstermek için olmadığıdır; sonuçlar sayfanın ana içeriğinde sunulmalıdır. 'Hızlı arama' önerileri ise arama işlevinin parçası olduğu için <search> içinde yer alabilir. Arama tamamen JavaScript ile yapılıyor ve form gönderilmiyorsa <form> ve gönder düğmesi gerekmez; <search> yine anlamsal kap olarak kullanılır. Aynı sayfada site araması ve sayfa içi filtre gibi birden fazla arama varsa her birine ayırt edici bir ad verilebilir; MDN örneğinde bunun için title özniteliği kullanılır.

address: iletişim bilgisi

<address> içindeki HTML'in bir kişi, birkaç kişi ya da bir kuruluş için iletişim bilgisi sunduğunu belirtir. Bilgi fiziksel adres, URL, e-posta, telefon, sosyal medya hesabı ya da coğrafi koordinat gibi bağlama uygun herhangi bir biçimde olabilir ve bilginin kime ait olduğunu da içermelidir. MDN, yayın tarihi gibi iletişim dışı bilgilerin <address> içine konmamasını, tarihin <time> öğesine ait olduğunu söyler.

<address> yalnızca en yakın <article> ya da <body> atasının iletişim bilgisini temsil edebilir; bu yüzden bir makalenin içine konduğunda makalenin yazarını, sayfa altlığına konduğunda sitenin sahibini anlatır. İçinde başka bir <address>, başlık öğesi, bölümleme içeriği, <header> ya da <footer> bulunamaz. Varsayılan görünümü italiktir, ancak MDN iletişim bilgisi için <i> yerine <address> kullanmanın ek anlam taşıdığı için daha uygun olduğunu belirtir.

<article>
  <h2>Kahve kavurma üzerine notlar</h2>
  <p>Kavurma derecesi aromayı doğrudan etkiler.</p>
  <footer>
    <address>
      Yazar: Deniz Yılmaz,
      <a href="mailto:deniz@example.com">deniz@example.com</a>
    </address>
  </footer>
</article>

Uygulamalı örnek: div iskeletini anlamsal iskelete çevirmek

Eski bir şablonda sayfa iskeletinin yalnızca sınıf adlarıyla ayrıldığını düşünün:

<div class="ust">
  <div class="logo"><a href="/">Örnek Kahve</a></div>
  <div class="menu">
    <a href="/">Anasayfa</a>
    <a href="/urunler/">Ürünler</a>
  </div>
</div>
<div class="icerik">
  <h1>Ürünler</h1>
  <p>Tüm kahve çeşitlerimiz.</p>
</div>
<div class="alt">© 2026 Örnek Kahve</div>

Bu işaretleme görsel olarak doğru görünebilir, ancak sınıf adları yardımcı teknolojiler için bir anlam taşımaz; ekran okuyucu kullanıcısı bu sayfada atlayabileceği hiçbir bölge bulamaz. Dönüşüm doğrudan yapılır: class="ust" olan kap <header>, menü kabı <nav> (bağlantılar bir <ul> içine alınarak), içerik kabı <main>, alt kap ise <footer> olur. Sınıf adlarını CSS için koruyabilirsiniz; değişen yalnızca öğe adlarıdır. Sonuçta sayfa, bu yazının başındaki iskeletle aynı banner, navigation, main ve contentinfo bölgelerini sunar ve bir atlama bağlantısı eklemek için gereken <main> hedefi de hazır olur.

Sık yapılan hatalar

• Her şeyi div ile yazmak: <div> anlam taşımaz; site başlığı, menü ve ana içerik için yukarıdaki öğeleri kullanın. Seçim kuralları article, section ve div yazısında.
• İki görünür main kullanmak: hidden taşımayan tek bir <main> olabilir.
• Tekrarlanan içeriği main içine koymak: menü, logo ve telif bilgisi <main> dışında kalmalıdır.
• Her bağlantı grubunu nav yapmak: <nav> yalnızca önemli gezinme blokları içindir.
• Aynı türden bölgeleri adlandırmamak: iki <nav> varsa her birine ayırt edici bir ad verin.
• Arama sonuçlarını search içine koymak: sonuçlar ana içeriğe aittir.
• address içine tarih yazmak: yayın tarihi <time> ile, iletişim bilgisinin dışında verilir.
• Gereksiz role eklemek: <nav role="navigation"> gibi yazımlar örtük rolü tekrarlar; ARIA'nın ne zaman gerektiği ARIA nedir yazısında.

Sık Sorulan Sorular

Her sayfada header ve footer olmak zorunda mı?

Hayır, bu öğeler zorunlu değildir. Ancak site başlığı ve alt bilgi gibi içerikleriniz varsa onları bu öğelerle işaretlemek, ekran okuyucu kullanıcılarına banner ve contentinfo bölgelerini sunar.

Bir article içinde header ve footer kullanabilir miyim?

Evet. Bu durumda öğeler bölge niteliğini kaybeder ve yalnızca o makalenin giriş ve alt bilgisini temsil eder. Bir sayfada birden fazla <header> ve <footer> bulunması bu yüzden normaldir.

main öğesi body dışında bir yere konabilir mi?

MDN'ye göre <main> flow içerik beklenen yerlerde, ancak yalnızca hiyerarşik olarak doğru konumdaysa kullanılabilir; ayrıntılı tanım için MDN, HTML standardındaki 'hierarchically correct main element' tanımına bağlantı verir. Pratikte <main> öğesini <body> altında, tekrarlanan bölümlerin dışında tutmak en güvenli yoldur.

search öğesi form öğesinin yerini alır mı?

Hayır. <search> yalnızca anlamsal bir kaptır ve arama bölgesini tanımlar. Arama sorgusunu bir sunucuya gönderiyorsanız MDN örneğindeki gibi <search> içine bir <form> koyarsınız. Form gönderiminin ayrıntıları HTML form etiketi yazısında. <search> yeni bir öğe olduğundan tarayıcı desteği için MDN uyumluluk tablosuna bakı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 · article, section ve div farkı · HTML başlık etiketleri · ARIA nedir · WCAG temelleri