🚀 HTML Formatting: Görsellik mi, Anlam mı?

Metin biçimlendirme etiketlerinin (Formatting) fiziksel ve mantıksal farklarını, semantik web ve SEO açısından önemini inceliyoruz.

Fiziksel ve Mantıksal Etiketler

Selamlar. Bugün HTML'in en çok karıştırılan noktalarından birine, metin biçimlendirmeye giriyoruz. Çoğu kişi <b> ve <strong> etiketlerinin aynı şeyi yaptığını sanır çünkü her ikisi de yazıyı kalınlaştırır. Teknik olarak görsel sonuç aynı olsa da, tarayıcı ve arama motorları için taşıdıkları anlam (semantic) tamamen farklıdır.

Biz buna Physical (Fiziksel) vs Logical (Mantıksal) etiketler diyoruz:

  • <b> (Bold): Sadece görsel bir stil verir. Yazıyı kalınlaştırır ama tarayıcıya "bu yazı çok önemli" demez.
  • <strong>: Yazıyı kalınlaştırır VE tarayıcıya/ekran okuyucuya "bu metin içerik olarak çok önemli, vurgula" mesajını verir.
  • <i> (Italic): Yazıyı yan yatırır (italik). Görsel bir tercihtir.
  • <em> (Emphasized): Yazıyı italik yapar VE metne anlamsal bir vurgu ekler.

Oyun Geliştirmede Semantik Metinlerin Önemi

Retro-noir tarzındaki Blue Silent projemizde, ana karakterin iç seslerini ve oyun dünyasındaki kritik ipuçlarını hazırlarken bu fark bizim için çok kritikti. Eğer bir ipucunu sadece görsel olarak italik yapmak istiyorsak <i> kullanıyorduk. Ancak, görme engelli oyuncuların kullandığı ekran okuyucuların o kelimeyi daha vurgulu (ses tonunu değiştirerek) okumasını istediğimizde <em> etiketini tercih ettik. Web sadece piksellerden ibaret değildir; bir veri yapısıdır.

🚀 Sanal Kodlama Alanı Yükleniyor...

Diğer Kritik Biçimlendirme Etiketleri

  • <mark>: Metnin bir kısmını sanki fosforlu kalemle çizmişsiniz gibi öne çıkarır. Genellikle arama sonuçlarında kelimeyi vurgulamak için kullanılır.
  • <small>: Telif hakları veya dipnotlar gibi daha az öneme sahip metinler için kullanılır.
  • <del> ve <ins>: Düzenlemeleri göstermek içindir. Bir yazının silindiğini (del) ve yerine yenisinin eklendiğini (ins) belirtir.
  • <sub> ve <sup>: Alt simge (H₂O) ve üst simge (2¹⁰) işlemleri için kullanılır.

Özetle; eğer amacınız sadece görsel güzellikse CSS kullanın. Eğer amacınız içeriğin anlamını hem Google'a hem de yardımcı teknolojilere anlatmaksa, bu semantik etiketleri tercih edin.

Bir sonraki derste, elementleri gruplandırmak için kullandığımız 'Quotation' (Alıntı) yapılarına bakacağız. Kod yazmaya devam!

Ovid Notu: ovidgame.com