header, nav, main, footer: Dört Büyük Bölge
Sayfanızı kullanıcıların beklediği bölgelere sarın.
header, nav, main, footer: Dört Büyük Bölge, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
A Map for Your Page
Sighted users scan a page in a glance. Screen reader users need a map, and HTML5 landmark elements draw it for them.
Meet the Big Four
Four elements cover most pages: header, nav, main, and footer. Together they split your layout into regions users can jump between. 🗺️
header: The Top Banner
A page-level header holds your site name, logo, and intro content. Screen readers expose it as the banner region.
<header>
<h1>CoddyKit</h1>
</header>nav: Where Links Live
Wrap your primary set of links in nav. It tells assistive tech this block is navigation, so users can find or skip it fast.
<nav>
<a href="/">Home</a>
<a href="/docs">Docs</a>
</nav>main: The Real Content
The main element wraps the unique content of the page. It is the destination users care about most.
<main>
<h1>Article title</h1>
<p>Body...</p>
</main>footer: The Bottom Region
A page-level footer holds copyright, legal links, and contact info. Screen readers announce it as the contentinfo region.
<footer>
<p>© 2026 CoddyKit</p>
</footer>Implicit Roles for Free
These tags carry built-in ARIA roles, so header becomes banner and nav becomes navigation with zero extra attributes.
Context Changes the Role
A header inside an article is just a section header, not the page banner. Only a top-level header counts as the banner landmark.
Why div Cannot Do This
A div has no role, so a screen reader sees nothing to jump to. Landmark tags turn invisible structure into real navigation.
<div class="nav">...</div>A Whole Page Mapped
Stack the four together and a screen reader user instantly hears the shape of your page before reading a word. 🎯
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Free Skip-Ahead Power
With landmarks in place, users can jump past the header straight to main, skipping repeated links on every page.
Quick Check
Which landmark wraps the unique, primary content of a page?
Recap: The Big Four
You learned that header, nav, main, and footer give screen reader users a map. Native tags mean free landmark roles. 🙌
Sıkça Sorulan Sorular
“header, nav, main, footer: Dört Büyük Bölge” dersi ücretsiz mi?
Evet — “header, nav, main, footer: Dört Büyük Bölge” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“header, nav, main, footer: Dört Büyük Bölge” dersinde ne öğreneceğim?
Sayfanızı kullanıcıların beklediği bölgelere sarın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“header, nav, main, footer: Dört Büyük Bölge” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- header, nav, main, footer: Dört Büyük Bölge
- İçeriği main İçine Koyma ve Yalnızca Bir main Kullanma
- Birden Çok Bölgeyi aria-label ile Adlandırma
- Belirteç Gezinmesi: Kullanıcılar Nasıl Atlama Yapar