Yükleniyor...

Kullanım Dışı HTML Etiketleri ve Özellikleri

Kullanım dışı HTML etiketleri ve özellikleri, modern HTML5 standardında artık önerilmeyen veya tamamen kaldırılmış olan kod yapılarıdır. Bu etiketler genellikle görsel sunumu içerikle birleştirir ve sitenin bakımı, erişilebilirliği ve mobil uyumluluğunu zorlaştırır. Örneğin <font> ile yazı rengi değiştirmek veya <center> ile içerik ortalamak gibi işlemler artık CSS ile yapılmalıdır.
Kişisel web sitelerinde, bloglarda, e-ticaret projelerinde veya haber sitelerinde, eski projelerde bu etiketlere sıkça rastlanır. Bu etiketleri anlamak, eski siteleri modernleştirmek ve güncel standartlara taşımak için önemlidir. Bir web sitesini inşa etmek, ev yapmak gibidir: yapının temeli HTML’dir, dekorasyonu ise CSS ve etkileşimleri JavaScript sağlar. Eğer kullanım dışı etiketler kullanılırsa, bu ev eski mobilyalarla döşenmiş gibi görünür; çalışır ama modern ve verimli değildir.
Bu eğitimde öğrenecekleriniz:

  • Hangi HTML etiketleri ve özelliklerinin kullanım dışı olduğunu belirlemek
  • Neden bu etiketleri modern yöntemlerle değiştirmek gerektiğini anlamak
  • Mevcut projelerinizi temiz, semantik ve erişilebilir hâle getirmek
    Bu bilgileri öğrendiğinizde, hem eski projeleri güncelleyebilir hem de yeni projelerinizde doğru başlangıç yapabilirsiniz.

Temel Örnek

html
HTML Code 
<!DOCTYPE html>

<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Eski HTML Örneği</title>
</head>
<body>
<!-- Using <font> to change color and size (deprecated) -->
<font color="blue" size="5">Kişisel Bloguma Hoş Geldiniz</font>
</body>
</html>

Bu temel örnek, kullanım dışı bir etiket olan <font> elementini gösteriyor.

  1. Kod Analizi:
    * <font color="blue" size="5"> satırı, doğrudan HTML içinden yazı rengi ve boyutunu değiştirir.
    * HTML5 standartlarında, görsel düzenlemeler CSS ile yapılmalıdır.
  2. Nasıl Çalışır:
    Tarayıcı, <font> etiketini hâlâ yorumlayabilir, ancak bu yöntem:
  • Bakımı zorlaştırır: Renk veya boyutu değiştirmek için tüm etiketleri tek tek düzenlemek gerekir.
  • Semantik değildir: Bu etiketin amacı içeriği tanımlamaz, sadece görünümü değiştirir.
  • Gelecekte risklidir: Tarayıcılar bu desteği kaldırabilir.
    3. Gerçek Dünya Bağlantısı:
    Bir blog veya kişisel web sitesi oluştururken <font> gibi etiketler kısa vadede kolaylık sağlar, ancak uzun vadede SEO, erişilebilirlik ve mobil uyumluluk sorunlarına yol açar.
  1. Başlangıç Seviyesi Soru:
    “Eğer çalışıyorsa neden değiştirmeliyim?”
    Çünkü modern yöntemlerle (örn. <span style="color:blue;font-size:24px;">) hem bakım kolaydır hem de proje uzun ömürlü olur.

Pratik Örnek

html
HTML Code 
<!DOCTYPE html>

<html lang="tr">
<head>
<meta charset="UTF-8">
<title>E-Ticaret Eski Örneği</title>
</head>
<body>
<!-- Using <center> to align heading (deprecated) -->
<center><h1>Fırsat Ürünleri</h1></center>

<!-- Using <marquee> to scroll text (deprecated) -->

<marquee behavior="scroll" direction="left">Haftanın İndirimi: %50</marquee>

<!-- Using bgcolor attribute in table (deprecated) -->

<table border="1" bgcolor="yellow">
<tr><td>Ürün Adı</td></tr>
</table>
</body>
</html>

Bu pratik örnek, eski bir e-ticaret sayfasında karşılaşılabilecek üç kullanım dışı özelliği gösteriyor:

  1. <center> başlık ortalamak için kullanılmıştır.
    * Modern karşılığı: CSS ile text-align:center;.
  2. <marquee> kayan yazı oluşturur.
    * Erişilebilirlik ve kullanıcı deneyimi açısından kötü bir yöntemdir.
    * Modern çözüm: CSS animasyonları veya JavaScript kaydırma efektleri.
  3. <table bgcolor="yellow"> tablonun arka plan rengini doğrudan HTML ile belirler.
    * Modern çözüm: CSS ile table { background-color: yellow; }
    Bu örnek, haber siteleri veya bloglar gibi platformlarda eski yöntemlerin hâlâ görünebileceğini gösterir. Kod, çalışsa bile:
  • Mobil uyumlu değildir
  • Bakımı zordur
  • Geleceğe dönük değildir
    Bu yapıları modernize etmek, sitenizi hem profesyonel hem de erişilebilir hâle getirir.

En İyi Uygulamalar ve Yaygın Hatalar:
En İyi Uygulamalar:

  1. Semantik HTML kullanın (<header>, <main>, <footer>).
  2. Sunum için CSS, etkileşim için JavaScript kullanın.
  3. Kodunuzu temiz ve düzenli tutun; görselliği içerikten ayırın.

  4. Erişilebilirliği ihmal etmeyin; ARIA niteliklerini gerekli olduğunda ekleyin.
    Yaygın Hatalar:

  5. <font>, <center> veya <marquee> gibi etiketleri hâlâ kullanmak.

  6. bgcolor, align gibi eski HTML özniteliklerini tercih etmek.
  7. Etiketleri yanlış şekilde iç içe yerleştirmek.
  8. Mobil uyumluluk ve SEO’yu göz ardı etmek.
    Hata Ayıklama İpuçları:
  • Projede kullanım dışı etiketleri tarayın ve listeleyin.
  • Kademeli olarak modern CSS ve semantik etiketlerle değiştirin.
  • Tarayıcı geliştirici araçları ile hataları ve uyarıları kontrol edin.
    Bu yaklaşım, projelerinizi hem güncel standartlara uygun hem de bakımı kolay hale getirir.

📊 Hızlı Referans

Tag/Atribut Açıklama Örnek <font> Yazı tipi ve rengini değiştirir <font color="red">Metin</font>

Özet ve Sonraki Adımlar:
Bu eğitimde öğrendikleriniz:

  • Kullanım dışı HTML etiketleri ve özellikleri nasıl tespit edilir.
  • Neden modern yöntemlere geçmek gerekir.

  • Eski projelerinizi nasıl temiz ve sürdürülebilir hâle getirebilirsiniz.
    CSS ve JavaScript bağlantısı:

  • CSS: renk, hizalama, boyut ve animasyonlar için.

  • JavaScript: interaktif davranış ve dinamik içerik için.
    Sonraki önerilen konular:

  • HTML5 semantik yapıları

  • CSS Flexbox ve Grid ile modern layout oluşturma
  • Erişilebilirlik ve SEO temelleri
    Bu bilgileri kullanarak, eski sitelerinizi modernize edebilir ve geleceğe hazır projeler geliştirebilirsiniz.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

❓
4
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 49 / 51
Html Ders