Front-End dünyasında bir projeyi doğru yapmak kadar, yanlışları tekrarlamamak da büyük önem taşır. Özellikle yeni başlayanların ya da eksik kaynaklarla çalışanların fark etmeden yaptığı bazı hatalar, projenin uzun vadede sürdürülebilirliğini etkiler.
Bu yazıda, Impressive Webs sitesindeki yazıdan ve güncel pratiklerden yola çıkarak sık yapılan hataları derledim.
1. <br> ile Boşluk Oluşturmak
Satır boşluğu vermek amacıyla birden fazla <br> kullanmak, yapısal olarak hatalıdır. CSS ile margin/padding kullanmak çok daha doğrudur.
2. <font> Etiketi Kullanmak
Bu etiket HTML5 ile tamamen kaldırıldı. Yazı tipi ve boyutu gibi stiller yalnızca CSS üzerinden verilmelidir.
3. Inline CSS Kullanmak
Tüm stil bilgilerini HTML elementlerine style=\"\" şeklinde yazmak, kodun tekrarını artırır ve yönetimi zorlaştırır.
4. <center> Etiketi Kullanmak
HTML yapısı içinde hizalama amaçlı <center> kullanmak yerine, CSS’te text-align: center; tercih edilmelidir.
5. <b> ve <i> Yerine <strong> ve <em> Kullanımı
<b> ve <i> görsel vurgulama için kullanılsa da semantik değildir. <strong> (önemli) ve <em> (vurgulu) etiketleri tercih edilmelidir.
6. HTML’de Yalnızca Görsel Amaçlı Tablolar Kullanmak
Tablo yapısı yalnızca veri sunumu için kullanılmalıdır. Sayfa düzeni için tablo kullanımı (örneğin, layout oluşturmak) çağdışı bir yöntemdir.
7. <marquee> ve <blink> Kullanımı
Bu etiketler artık HTML standardında desteklenmemektedir. Kullanıcı deneyimi açısından da rahatsız edici bulunur.
8. SEO ve Erişilebilirlik Göz Ardı Ediliyor
Alt etiketlerinin eksik kullanılması, yanlış başlık hiyerarşisi (h1 → h2 → h3) ya da boş href=\"#\" linkleri gibi detaylar SEO ve erişilebilirlik açısından sorun yaratır.
9. Yorum Satırı Kullanılmaması
Kodun başka geliştiriciler (ve gelecekteki siz) tarafından anlaşılması için açıklayıcı yorumlar oldukça değerlidir.
10. Güncel Standartlara Uymayan Kaynaklardan Öğrenmek
W3Schools gibi platformlar zamanla içeriklerini güncelledi ancak hâlâ bazı örneklerde hatalı yapılar görülebilir. MDN Web Docs (Mozilla), CSS Tricks, Smashing Magazine gibi kaynaklar daha güvenilirdir.
Ekstra Tavsiyeler
- Her HTML dokümanı
<!DOCTYPE html>ile başlamalıdır. - Etiketler kapatılmalı ve iç içe yapılar doğru kullanılmalıdır.
- Görsel dosyalarda boyutlandırma sadece CSS ile yapılmalıdır.
- Performans ve erişilebilirlik kontrolleri için Lighthouse gibi araçlar kullanılmalıdır.
Sonuç
Front-End geliştirici olarak amacımız sadece çalışan kod üretmek değil; sürdürülebilir, erişilebilir ve semantik açıdan doğru yapılar oluşturmaktır. Kodunuzu yazarken sorgulayıcı olun, referanslarınızı güncel tutun ve mümkün olduğunca \”neden böyle yapıyoruz?\” sorusunu sormayı ihmal etmeyin.