Neden?
Doğru alan türleri, kullanıcı hatalarını azaltır ve veri girişini kolaylaştırır.

Ne öğreneceğiz?
Bu derste header, nav, main, section, article, aside ve footer elementlerini öğ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
Sayfanın anlamını doğru HTML elementleriyle ifade edebileceksiniz. Semantik HTML, elementin yalnızca görünüşünü değil, taşıdığı anlamı da belirtir. Bu yaklaşım arama motorlarının, ekran okuyucuların ve diğer araçların sayfayı anlamasını kolaylaştırır. Sık kullanılan semantik elementler şunlardır:

• <header>: Sayfanın veya bölümün giriş kısmı.
  
• <nav>: Gezinme bağlantıları.
  
• <main>: Sayfanın ana ve benzersiz içeriği.
  
• <section>: Konu bakımından ilişkili bir içerik bölümü.
  
• <article>: Kendi başına anlamlı, bağımsız içerik.
  
• <aside>: Ana içerikle ilişkili yan içerik.
  
• <footer>: Sayfanın veya bölümün alt bilgileri.


Örnek yapı:

Her yerde <div> kullanmak yerine içeriğin anlamına uygun semantik elementleri tercih edin. <div> ve <span> anlam taşımayan genel amaçlı kapsayıcılardır.