Neden?
Hata ayıklama, kod yazmanın ayrılmaz parçasıdır; rastgele değişiklik yapmak yerine sistem gerekir.

Ne öğreneceğiz?
Bu derste yaygın hataları ve tarayıcı geliştirici araçlarını öğ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

Temiz HTML kodu, okunabilir, tutarlı ve sürdürülebilir olur. Elementleri uygun girintile, öznitelik değerlerinde tırnak kullanın ve gereksiz kodları silin. Yaygın hatalar ise şunlardır:

Yanlış/Eksik Kullanımlar	Doğru Kullanımlar
<!-- Yanlış: Etiket kapanmıyor --> <p>Metin	<p>Metin</p>
<!-- Yanlış: label ile input eşleşmiyor --> <label for="mail">E-posta</label> <input id="eposta" type="email">	<label for="eposta">E-posta</label> <input id="eposta" name="eposta" type="email">
<!-- Eksik: alt eksik --> <img src="logo.png">	<img src="logo.png" alt="Site logosu">

Tarayıcıda sağ tıklayıp İncele seçeneğini açın. Elements(Elementler) panelinde oluşan HTML yapısını, Console(Konsol) panelinde JavaScript hatalarını inceleyin. Sayfanın bağlantılarını, görsellerini ve formlarını tek tek test edin.
Kodda gereksiz <br>, anlamsız <div>, boş href ve açıklamasız görsel bırakma. Kullanıcıya görünen metin ile HTML yapısı arasında mantıklı bir ilişki kurun.