Meydan okuma - Anlamsal düzen

Anlamsal landmark'larla bir haber sitesi ana sayfası yazarsın.

Anlamsal landmark'lar

Anlamsal etiketler sayfanın bölgelerini tanımlar. <header> site başlığını, <nav> menüyü, <main> ana içeriği, <footer> alt bilgiyi taşır. <article> bağımsız, <section> tematik grup, <aside> yan içerik verir.

Her <article> ve <section> bir başlıkla başlamalı; böylece belge taslağı oluşur. <address> iletişim bilgisini taşır.

Uygulama Haber sitesi ana sayfası yaz

Bir haber sitesi ana sayfası yaz. <header> içinde <h1> ve aria-label'lı bir <nav> olsun. <main> içinde en az iki <article>; her birinin kendi <h2> başlığı olsun. Bir <aside> ve <footer> ekle; <footer> içinde <address> bulunsun.

Örnek çözümü göster

<header>
  <h1>Gündem Gazetesi</h1>
  <nav aria-label="Ana menü">
    <a href="/anasayfa">Ana sayfa</a>
    <a href="/yazilar">Yazılar</a>
    <a href="/iletisim">İletişim</a>
  </nav>
</header>
<main>
  <article>
    <h2>Şehir bisiklet ağı genişliyor</h2>
    <p>Belediye 40 km yeni yol ekleyecek.</p>
  </article>
  <article>
    <h2>Kütüphane 7/24 açılıyor</h2>
    <p>Yeni düzenleme martta başlıyor.</p>
  </article>
</main>
<aside>
  <h2>Bültene abone ol</h2>
  <p>Haftalık özet için kaydol.</p>
</aside>
<footer>
  <address>İletişim: bilgi@gundem.example</address>
</footer>

Kendini test et

Landmark ve rolü

header

site başlığı
nav

menü
main

ana içerik
aside

yan içerik
footer

alt bilgi

Erişilebilir menü

<____ aria-label="Ana menü">
  <a href="/anasayfa">Ana sayfa</a>
</nav>

Cevabı göster

<nav aria-label="Ana menü">
  <a href="/anasayfa">Ana sayfa</a>
</nav>

Birincil içeriği sarmak için hangi etiket?
- section
- article
- aside
- main
Cevabı göster

main — Doğru. main, sayfanın birincil içeriğini taşır.

Sıradaki ders: Meydan okuma - Orta seviye projesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler