Anasayfa
Forum
Hakkında
Ders 12: Sayfa Bölümleri ve İçerik Yapısı
Ders 12: Sayfa Bölümleri ve İçerik Yapısı
Neden?
Bölümlere ayrılmış içerik, uzun sayfaların anlaşılmasını kolaylaştırır.
Ne öğreneceğiz?
Bu derste içerik bölümlerini ve başlık hiyerarşisini öğreneceğiz.
Nasıl ilerleyeceğiz?
Önce kavramın amacını düşünün. Ardından aşağıda verilen örneği kendiniz yazın. Kodu kaydedin, tarayıcıda açın ve küçük bir değişiklik yaparak sonucu gözlemleyin.
Öğrenme kuralı: Kodu yalnızca kopyalama. Her satır için “Bu satır neden burada?” ve “Bu satırı silersem ne değişir?” sorularını sor.
Derse başlamadan önce kendini yokla
- Bu konuyu gerçek bir web sayfasında hangi ihtiyacı çözmek için kullanırım?
- Örnekteki hangi HTML elementi içeriğin anlamını taşıyor?
- Uygulamayı kendi fikrimle nasıl değiştirebilirim?
Ders sonunda kontrol
- Kodu kendim, bakmadan tekrar yazabildim mi?
- Tarayıcıda sonucu test ettim mi?
- Karşılaştığım bir hatayı neden oluştuğunu açıklayarak düzelttim mi?
Ders hedefi
Yola
İçeriği mantıklı bölümlere ayırabilecek ve başlık hiyerarşisini koruyabileceksiniz.
Bir HTML sayfasını hazırlarken önce içerik planını düşünün. Sayfanın tek bir ana amacı olmalıdır. Sonra bu amacı açıklayan bölümleri belirleyin. Örnek bir ürün sayfası yapısı:
PHP Kod:
<main>
<section aria-labelledby="urun-baslik">
<h1 id="urun-baslik">Kablosuz Kulaklık</h1>
<p>Günlük kullanım için tasarlanmış bir kulaklık.</p>
</section>
<section aria-labelledby="ozellik-baslik">
<h2 id="ozellik-baslik">Özellikler</h2>
<ul>
<li>Uzun pil ömrü</li>
<li>Bluetooth bağlantısı</li>
</ul>
</section>
</main>
Her bölümün açıklayıcı bir başlığı olmalıdır. Bir bölümün başlığı görsel olarak gizlenmiş olsa bile ekran okuyucu kullanıcıları için içerik ilişkisini açıklayabilir. aria-labelledby ile bölümün başlığı ilişkilendirilebilir.
section konu grupları için, article bağımsız ve paylaşılabilir içerikler için kullanılmalıdır. Bir ürün kartı, haber veya blog yazısı çoğu zaman article olabilir.
