0Pricing
HTML Academy · Ders

header nav main ve footer

Bir sayfanın temel yer işaretlerini anlamsal etiketlerle yapılandırın

header nav main ve footer, CoddyKit'te ücretsiz bir HTML 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, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

HTML5 Yapısal Bölge Öğeleri

HTML5, sayfa bölgelerini tanımlayan yapısal bölge öğelerini kullanıma sundu:

  • <header> — giriş içeriği veya gezinme
  • <nav> — gezinme bağlantıları
  • <main> — birincil ve benzersiz içerik
  • <footer> — alt bilgi

Bu öğeler, genel amaçlı <div> öğelerinin yerini anlamlı bir yapıyla alır.

header Öğesi

<header> öğesi giriş içeriğini içerir:

<header>
  <a href="/" class="logo">
    <img src="logo.svg" alt="Company name">
  </a>
  <nav>...</nav>
  <button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->

nav Öğesi

<nav> öğesi gezinme bağlantılarını kapsar:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->

Birden Çok nav Öğesi

Bir sayfada birden çok <nav> öğesi bulunabilir; her birini etiketleyin:

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->

main Öğesi

<main> öğesi, bu sayfaya özgü birincil içeriği belirtir:

<main id="main-content">
  <h1>HTML5 Landmark Elements</h1>
  <p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
  - Only ONE main element per page
  - Should not be a descendant of header, footer, aside, nav
  - id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->

footer Öğesi

<footer> öğesi alt bilgi içeriğini kapsar:

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer navigation">
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->

Sayfa İskeleti

Eksiksiz bir anlamsal sayfa yapısı:

<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Site name"></a>
    <nav aria-label="Main">...</nav>
  </header>

  <main id="main-content">
    <h1>Page Title</h1>
    <p>Primary content here.</p>
  </main>

  <aside>Related content</aside>

  <footer>
    <p>&copy; 2025 Company</p>
  </footer>
</body>

Gezinmeyi Atla Bağlantısı

Klavye kullananların gezinmeyi atlayabilmesi için bir atlama bağlantısı ekleyin:

<a href="#main-content" class="skip-link">Skip to main content</a>

<header>... navigation ...</header>

<main id="main-content" tabindex="-1">
  <h1>Page Heading</h1>
</main>

/* CSS: */
.skip-link {
  position: absolute; top: -100%;
  background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }

Yapısal Bölge Rolleri

HTML5 yapısal bölge öğeleri, ARIA yapısal bölge rollerine eşlenir:

  • <header> → role="banner" (yalnızca sayfa düzeyinde)
  • <nav> → role="navigation"
  • <main> → role="main"
  • <footer> → role="contentinfo" (yalnızca sayfa düzeyinde)
  • <aside> → role="complementary"

Bölümler İçinde header ve footer

header ve footer, <article> ve <section> içinde bulunabilir:

<article>
  <header>
    <h2>Article Title</h2>
    <p>By Jane Smith | March 2024</p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Tags: HTML, CSS</p>
  </footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->

Yaygın Hatalar

Bu anlamsal bölge hatalarından kaçının:

  • Her bağlantı grubunda <nav> kullanmak
  • Tek bir sayfada birden çok <main> öğesi kullanmak
  • <main> öğesini <header> veya <nav> içine yerleştirmek
  • Alt bilgi olmayan içerikler için <footer> kullanmak

Hızlı Kontrol

Bir sayfada kaç main öğesi bulunmalıdır?

Tekrar: header nav main footer

Yapısal bölge öğeleri için temel bilgiler:

  • <header> — giriş içeriği; her bölümde tekrarlanabilir
  • <nav> — önemli gezinme; birden çoksa aria-label ile etiketleyin
  • <main> — benzersiz birincil içerik; sayfa başına tam olarak bir tane
  • <footer> — alt bilgi içeriği; her bölümde tekrarlanabilir
  • id="main-content" hedefini kullanan bir atlama bağlantısı ekleyin

Sıkça Sorulan Sorular

“header nav main ve footer” dersi ücretsiz mi?

Evet — “header nav main ve footer” 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 HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“header nav main ve footer” dersinde ne öğreneceğim?

Bir sayfanın temel yer işaretlerini anlamsal etiketlerle yapılandırın HTML 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.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML 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 ve footer” 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 HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML 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

  1. header nav main ve footer
  2. article Öğesi: Kendi Başına Yeterli İçerik
  3. section Öğesi ve div Karşılaştırması
  4. time address ve mark
← HTML Academy Sayfasına Dön