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.