HTML
Bölümleme kuralları
Anlamsal bölümlerin hiyerarşisini doğru kurmayı öğrenirsin.
Belge anahattı
Bir sayfanın belge anahattı (document outline), başlıkların oluşturduğu içerik haritasıdır. Ekran okuyucular bu haritayı kullanarak sayfada 'başlıklara göre gezinme' yapar. Anahat ne kadar düzenliyse, sayfa o kadar kolay gezinilir olur.
Anahat, başlık düzeylerinin sıralı olmasına dayanır: <h1> ana başlık, <h2> ana bölümler, <h3> alt bölümler. Atlama yapmak (örneğin h1'den h4'e geçmek) anahattı bozar; ekran okuyucu kullanıcıyı şaşırtır.
Başlık hiyerarşisi
Başlık düzeyleri iç içe geçen bir merdiven gibidir. <h1> sayfanın ana başlığıdır ve genellikle bir tane olur. <h2> ana bölümleri, <h3> bu bölümlerin alt başlıklarını işaretler. Her derinlikte bir düzey inilir.
Örnek bir magazin anahattı: <h1>Peynir Dergisi</h1> en üstte, onun altında <h2>Bu hafta</h2>, onun da altında <h3>Ezine peyniri</h3>. Bu sıralama hem görsel hem anlamsal olarak tutarlıdır.
section ne zaman seçilir
<section> seçmenin birkaç ipucu var. İçeriği tek başına bir yazı gibi taşıyabiliyorsan <article> seç; yalnızca bir temayı topluyorsa <section> seç. 'Yorumlar', 'İlgili yazılar', 'Haberler' gibi adlar koyabiliyorsan section uygundur.
Her section içine bir başlık koy. Bu, belge anahattının doğru kurulmasını sağlar. Başlık düzeyini de bir üst bölümden bir aşağı al: ana içerik <h2> ise section içindeki alt bölüm <h3> olabilir.
Uygulama main içinde section ve iki article
Body içine bir <main> ekle. Main içine bir <section> koy; section içine bir <h2> (metni Haberler) ekle. Section içine iki <article> koy; her article içine bir <h3> (birincinin metni Bu hafta, ikincinin metni Geçen hafta) ve bir <p> (içi dolu) ekle. Tüm başlıklar dolu olsun.
Örnek çözümü göster
<body>
<main>
<section>
<h2>Haberler</h2>
<article>
<h3>Bu hafta</h3>
<p>Bu haftanın yazısı...</p>
</article>
<article>
<h3>Geçen hafta</h3>
<p>Geçen haftanın yazısı...</p>
</article>
</section>
</main>
</body>
Kendini test et
-
Bir <section> için en uygun başlangıç aşağıdakilerden hangisidir?
- Bir <p> paragrafı
- Bir <h2> başlık
- Bir <li> madde
- Bir <a> bağlantı
Cevabı göster
Bir <h2> başlık — Doğru. section bir tema topladığı için içinde başlık bulundurur.
-
Section başlığını tamamla
<section>
<____>Haberler</h2>
<p>Son yazılar...</p>
</section>
Cevabı göster
<section>
<h2>Haberler</h2>
<p>Son yazılar...</p>
</section>
-
Başlık ve bölüm etiketlerini eşleştir
- h1
- Ana başlık
- h2
- Bölüm başlığı
- h3
- Alt bölüm başlığı
- section
- Tema bölümü
-
Bir sayfada kaç <h1> etiketi önerilir?
Cevabı göster
Bir — Doğru. Sayfada bir ana başlık (h1) olması belge anahattını netleştirir.
Sıradaki ders: Özet - Magazin sayfası
