💡 HTML’de En Çok Yapılan 10 Hata ve Nasıl Düzeltilir?

“Bir kod hatası çözülmeden gün bitmez.” – Her HTML öğrencisi

HTML yazmak aslında bir tür sihirbazlıktır. Öyle bir satır yazarsın ki site kusursuz görünür. Ama bir tane kapatma etiketi unutursan… her şey dağılır! 😱 İşte tam da böyle durumlar için bu rehberi hazırladım. Hem güleceğiz, hem öğreneceğiz, hem de hataları nasıl düzelteceğimizi kavrayacağız. Hadi başlayalım tatlım! 👇

😱 1. Etiketleri Kapatmayı Unutmak

❌ Hata:

<div>Merhaba dünya!

Etiketi açmışsın ama kapatmayı unutmuşsun. Sanki biriyle konuşup ortasında “Neyse ya…” deyip çıkmışsın gibi. Kısa süreli şok etkisi garantili…

✅ Doğrusu:

<div>Merhaba dünya!</div>

🧠 Neden Önemli?

• Tarayıcı neyin nerede bittiğini bilemez ve sayfan karmakarışık gözükebilir.
• Hem senin hem de ekip arkadaşının gözü kanar. Yararları değil zararları görmeye başlarsın…

🔧 Pratik İpucu:

• VS Code kullanıyorsan, eşleşen etiketleri görmek için üzerine gel: sana ışık tutar.
• Tab + Shift ile seçili alanı geri çekerek </div> gibi kapanışları kolayca bulabilirsin.
• Kaos yaşadığında: “Ctrl+Shift+M” ile hatalara göz at, seni yönlendirir.

🤨 2. Büyük-Küçük Harf Kargaşası

❌ Hata:

<DIV>Ne var bunda?</Div>

HTML büyük küçük harf duyarsızdır ama gözlerimiz değildir!

✅ Doğrusu:

<div>Bu şekilde daha tutarlı ve estetik.</div>

🧠 Neden Önemli?

• Kod yazarken tutarlılık ruhun gıdasıdır.
• Başka bir geliştirici baktığında “Bu ne karmaşa?” diye sinirlenmesin.

🔧 Pratik İpucu:

• Kural koy: Tüm etiketler küçük harfle, class adları kebab-case ile olsun (ana-baslik gibi).
• Editöründe “format document” komutunu sıkça kullan: tüm kodu şekillendirir.

💔 3. <br> Etiketiyle Sayfa Tasarlamak

❌ Hata:

<p>Benim tasarımım <br><br><br><br> böyle.</p>

Bu, tırnaklarını kırmızı oje yerine kırmızı keçeli kalemle boyamak gibi. Görünür ama profesyonel değil!

✅ Doğrusu:

<p>Bu bir cümle.</p>
<p>Bu başka bir cümle.</p>

veya

p {
  margin-bottom: 20px;
}

🧠 Neden Önemli?

• <br> geçici bir çözümdür. Yerine padding ve margin kullanmayı öğren.
• İçerik HTML’de, görünüm CSS’te olmalı. Yetki karmaşası olmasın 😌

🔧 Pratik İpucu:

• Boşluk = CSS
• Satır sonu = <br>
• Üst üste boşluk = ❌

🧠 4. Semantik Etiketleri Kullanmayıp Her Şeyi <div>’e Boğmak

❌ Hata:

<div class="baslik">Hoş geldiniz</div>
<div class="icerik">Bugün HTML işliyoruz</div>
<div class="alt">Hoşça kal</div>

Her şey “div” olmasın. Anne, baba, çocuk bile demeden kalabalığa karışmak gibi.

✅ Doğrusu:

<header>Hoş geldiniz</header>
<main>Bugün HTML işliyoruz</main>
<footer>Hoşça kal</footer>

🧠 Neden Önemli?

• Erişilebilirlik için hayat kurtarır. Screen reader’lar semantik etiketleri sever.
• Google da sever. SEO güler.

🔧 Pratik İpucu:

• HTML yazarken kendine sor: “Bu içerik neyi temsil ediyor?”
• Eğer başlık ise <header>, bir grup içerikse <section>, sayfa sonuysa <footer> kullan.

🎯 5. ID ve Class’ları Karıştırmak

❌ Hata:

<div id="buton" id="buton">Tıklayın</div>

Ya da her şeyi tek ID ile yazmak… Çok eşlilik mi? 👀

✅ Doğrusu:

<button id="kaydet" class="btn ana-but">Kaydet</button>

🧠 Neden Önemli?

• ID benzersizdir. Bir sayfada tek kez kullanmalı.
• Class tekrar edebilir. Grup işidir.

🔧 Pratik İpucu:

• ID = “T.C. kimlik numarası” → Tek
• Class = “Okul sınıfı” → Çok kişi aynı sınıfta olabilir 🎒

🧩 6. Görsellerde alt Özelliğini Unutmak
❌ Hata:

<img src="kedi.jpg">

Bu, bir dosta “Gel, sana süper bir şey göstereceğim!” deyip arkana dönüp gitmek gibi. Görselin ne olduğunu kimse anlayamaz!

✅ Doğrusu:

<img src="kedi.jpg" alt="Yastığın üzerinde uyuyan tatlı bir kedi">

🧠 Neden Önemli?

• Erişilebilirlik: Görme engelli kullanıcılar için alt metin bir kahramandır!
• SEO: Google bu açıklamaları sever ve içerikleri daha iyi anlamlandırır.

🔧 Pratik İpucu:

• Görsellerin alt metnini yazarken “Bu resmi göremeseydim ne bilmek isterdim?” diye sor.

⛔ 7. Formlarda label Kullanmamak
❌ Hata:

<input type="text" placeholder="Adınız">

Yalnız ve çorak bir input alanı… Kullanıcı da tarayıcı da tam olarak ne yapacağını bilmez…

✅ Doğrusu:

<label for="ad">Adınız:</label>
<input type="text" id="ad" name="ad">

🧠 Neden Önemli?

• Hem kullanıcı deneyimi hem de erişilebilirlik için şart.
• Etiket tıklanınca input alanı otomatik seçilir → Süper pratik!

🔧 Pratik İpucu:

• Etiketle input’u bağlamak için for ve id eşleşmeli.

🔗 8. Bağlantılarda target="_blank" Kullanmayı Unutmak (Veya Yanlış Kullanmak)
❌ Hata:

<a href="https://example.com">Dış sayfa</a>

Kullanıcı giderse geri dönmeyebilir… 😢 Her tıklamayla bir sevgili kaybediyoruz!

✅ Doğrusu:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Dış sayfa</a>

🧠 Neden Önemli?

• Kullanıcı sitenizden kopmasın! <br>
• Güvenlik için rel="noopener noreferrer" şart!

🔧 Pratik İpucu:

• Siteniz dışındaki linkleri yeni sekmede açın. SEO’ya da zarar vermez.

💣 9. Doctype Yazmayı Unutmak
❌ Hata:

<html>

Tarayıcı “Seninle nasıl konuşacağımı bilemiyorum?” diye kalakalır. 🤯

✅ Doğrusu:

<!DOCTYPE html>
<html>

🧠 Neden Önemli?

• Tarayıcıya “HTML5 standardındayız!” demenin resmi yoludur.
• Aksi halde quirks mode devreye girer ⛔ Her şey dağılabilir…

🔧 Pratik İpucu:

• ! yazıp Tab tuşuna basarak VS Code’da klasik HTML5 şablonuna ulaş.

📂 10. Dosya Yollarında Hata Yapmak
❌ Hata:

<img src="/images/kedi.jpeg">

Evet, sunucuda öyle bir klasör varsa ne ala… Yoksa 404 döner. Kediyi de kaybederiz. 🐈‍⬛💔

✅ Doğrusu:

<img src="./assets/img/kedi.jpeg" alt="Uyuyan kedi">

🧠 Neden Önemli?

• Klasör yapısını anlamak, sürüden ayrılmamak gibidir. Kayıp dosya yoktur, yanlış yol vardır!

🔧 Pratik İpucu:

• Dosya yolu başında ./ varsa aynı klasörden başlar.
• / ile başlıyorsa kök klasöre gider. Dikkat et! 💡

🎉 BONUS: “HTML Bu Kadar Basit Ama Bir O Kadar Derin”
Her etiketin arkasında bir anlam vardır tatlım.
Bir <div>, bir “merhaba” gibidir, ama bir <header> tam bir “selam dünya”… 😌
Unutma, doğru yapınca hata da ders olur, kod da sanat!