🚀 HTML Quotations: Bilginin Kaynağı ve Referanslar

Alıntıları, kısaltmaları ve referansları tarayıcıya doğru şekilde tanıtmayı, blockquote ve q etiketleri arasındaki farkları öğreniyoruz.

Bilgiyi Onurlandırmak: Quotation Etiketleri

Selamlar. Web sadece sizin yazdığınız metinlerden ibaret değildir; bazen bir kitaptan alıntı yapar, bazen bir oyun karakterinin felsefesini aktarırsınız. İşte bu noktada HTML'in Quotation (Alıntı) etiketleri devreye girer.

Sadece metni tırnak içine alıp geçmek yerine bu etiketleri kullanmak, tarayıcıya ve arama motorlarına "Bu metin bana ait değil, şu kaynaktan geliyor" demenizi sağlar. Tıpkı bir oyunun jenerik kısmında (credits) emeği geçenleri listelemek gibi, web'de de verinin kaynağına saygı duymak semantik açıdan kritiktir.

Temel Alıntı Etiketleri

  1. <blockquote>: Uzun, blok düzeyindeki alıntılar içindir. Tarayıcılar genellikle bunu sağdan ve soldan boşluk bırakarak (indent) render eder. İçinde cite niteliği (attribute) kullanarak kaynağın URL'sini belirtebilirsiniz.
  2. <q>: Kısa, satır içi (inline) alıntılar içindir. Tarayıcılar bu etiketi otomatik olarak tırnak işareti (" ") içine alır.
  3. <abbr>: Kısaltmalar için kullanılır. title niteliği ile kısaltmanın uzun halini yazarsınız. Kullanıcı farenin imlecini üzerine getirdiğinde tam metni görür.
  4. <cite>: Bir eserin (kitap, film, oyun, şarkı) adını belirtmek için kullanılır. Genellikle italik render edilir.

Felsefi aksiyon oyunumuz 'İçimizdeki Savaş''ın tanıtım sayfasını hazırlarken, karakterlerin varoluşsal sancılarını anlatan uzun metinleri <blockquote> ile yapılandırmıştık. Bu, hem sayfa düzenini (layout) kod tarafında temiz tutuyor hem de ekran okuyuculara buranın bir dış kaynak olduğunu net bir şekilde bildiriyor.

🚀 Sanal Kodlama Alanı Yükleniyor...

Neden Sadece Yazıp Geçmiyoruz?

Bu etiketlerin kullanımı sadece "doğru kod yazmak" için değil, aynı zamanda Erişilebilirlik (Accessibility) içindir. Ekran okuyucu kullanan bir birey, sayfanızda gezerken bu etiketler sayesinde nerenin bir alıntı, nerenin bir eser adı olduğunu ses tonundaki değişimle veya uygulama içi uyarılarla anlar.

Kısa bir teknik ipucu: <abbr> etiketi özellikle teknik dökümanlarda hayat kurtarır. Okuyucuyu her seferinde terimlerle boğmak yerine, kısaltmanın üzerine fareyle gelince açılan o küçük bilgi kutucuğu (tooltip) kullanıcı deneyimini (UX) ciddi oranda artırır.

Bir sonraki derste, sayfalarımızı daha okunabilir kılan ve verileri gruplandırmamızı sağlayan Comments (Yorum Satırları) konusuna bakacağız. Kod yazarken kendinize not bırakmayı öğreneceğiz.


Ovid Notu: ovidgame.com