CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Nav ve main

HTML kursu · Başlangıç · Ders 60/68

<nav> ve <main> etiketleriyle sayfanın ana bölümlerini işaretlersin.

Nav etiketi

<nav> etiketi sayfanın asıl menüsünü işaretler. İçine bir liste biçiminde bağlantılar konur. Böylece ekran okuyucular 'menü burada' der ve kullanıcı menüye atlayabilir.

Örnek: <nav><ul><li><a href="/ana-sayfa">Ana sayfa</a></li><li><a href="/about">Hakkında</a></li></ul></nav>. Yalnızca asıl menü için <nav> kullanılır; sayfadaki tüm bağlantıları sarmak için değil.

Main etiketi

<main> etiketi sayfanın ana içeriğini işaretler. Bir sayfada yalnızca bir <main> olur ve içinde başlık, menü ya da alt bilgi değil, sayfanın asıl anlattığı içerik yer alır.

Örnek: <main><h1>Yazı Başlığı</h1><p>Yazı metni...</p></main>. Ekran okuyucu kullanıcıları 'ana içeriğe atla' deyince buraya gelir. Arama motorları da asıl içeriği böylece ayırt eder.

Uygulama Menü ve ana içeriği yaz

Body içine bir <nav> ve bir <main> ekle. Nav içine bir <ul> ve içinde bir <li> olsun; <li>'nin içine <a href="/about">Hakkında</a> yaz. Main içine bir <h1> ekle ve metni Hakkımızda olsun.

Örnek çözümü göster 
<body>
  <nav>
    <ul>
      <li><a href="ben-kimim.html">Hakkında</a></li>
    </ul>
  </nav>
  <main>
    <h1>Hakkımızda</h1>
  </main>
</body>

Kendini test et

  1. Bir sayfada kaç <main> etiketi olur?

    • İki
    • Üç
    • Bir
    • Sınırsız
    Cevabı göster

    Bir — Doğru. main sayfada yalnızca bir kez kullanılır.

  2. Nav etiketini yaz

    <____>
  <ul>
    <li><a href="/ana-sayfa">Ana sayfa</a></li>
  </ul>
</nav>
    Cevabı göster 
    <nav>
  <ul>
    <li><a href="/ana-sayfa">Ana sayfa</a></li>
  </ul>
</nav>

  3. Etiketi rolüyle eşleştir

    <nav>
    Asıl menü
    <main>
    Ana içerik
    <ul>
    Liste kabı
    <a>
    Bağlantı

Başlangıç bölümündeki tüm dersler

1 Belge temelleri

  1. HTML nedir?
  2. Belge iskeleti
  3. Head ve meta etiketleri
  4. Başlık ve dil
  5. Yorumlar ve okunabilirlik
  6. Özet - İlk HTML sayfam

2 Metin içeriği

  1. Başlıklar: h1–h6
  2. Paragraflar
  3. Satır sonu ve yatay çizgi
  4. Vurgu ve önemli metin
  5. Alıntı ve kaynak
  6. Özet - Makale sayfası

3 Proje: Hakkımda sayfası

  1. Proje: Hakkımda sayfası
  2. İskelet ve başlık
  3. Tanıtım metni
  4. Vurgu ve ayrım
  5. Proje sonu - Hakkımda

4 Bağlantılar ve gezinme

  1. Çapa bağlantıları
  2. Mutlak ve göreli URL'ler
  3. Sayfa içi bağlantılar
  4. Bağlantı hedefleri
  5. E-posta ve telefon bağlantıları
  6. Özet - Gezinme menüsü

5 Listeler

  1. Sırasız listeler
  2. Sıralı listeler
  3. Açıklama listeleri
  4. İç içe listeler
  5. Liste öğelerinde bağlantı
  6. Özet - İçindekiler tablosu

6 Proje: Kartvizit sayfası

  1. Proje: Kartvizit sayfası
  2. İsim ve unvan
  3. İletişim listesi
  4. Beceriler ve bağlantılar
  5. Proje sonu - Kartvizit

7 Görseller ve medya

  1. Görsel ekleme
  2. Görsel boyutları
  3. Figure ve figcaption
  4. Ses ve video
  5. Alternatif kaynaklar
  6. Özet - Medya galerisi

8 Tablolara giriş

  1. Tablo iskeleti
  2. Başlık hücreleri
  3. Tablo bölümleri
  4. Başlık ve caption
  5. Hücre birleştirme
  6. Özet - Ders programı tablosu

9 Proje: Tarif sayfası

  1. Proje: Tarif sayfası
  2. Tarif başlığı ve özet
  3. Malzeme listesi
  4. Adımlar ve pişirme tablosu
  5. Proje sonu - Tarif sayfası

10 Formlara giriş

  1. Form iskeleti
  2. Etiketli input
  3. Input türleri
  4. Textarea ve button
  5. Seçim alanları
  6. Özet - Geri bildirim formu

11 Anlamsal etiketlere giriş

  1. Anlamsal etiketler neden önemli
  2. Header ve footer
  3. Nav ve main
  4. Article ve section
  5. Aside ve address
  6. Özet - Anlamsal blog iskeleti

12 Başlangıç finali

  1. Meydan okuma - Belge iskeleti
  2. Meydan okuma - Metin ve bağlantılar
  3. Meydan okuma - Listeler ve tablolar
  4. Meydan okuma - Form ve anlamsal yapı
  5. Meydan okuma - Başlangıç projesi