🚀 HTML Semantics: Web'in Anlam Haritası ve Teknik Üstünlüğü

Semantik etiketlerin teknik mimarisi, SEO ve erişilebilirlik (A11y) üzerindeki etkisi ile 'div çorbası' yaklaşımının karşılaştırılması.

Selamlar dostlar, bugün web geliştirmenin 'görünmeyen' ama en kritik konularından birine, Semantik (Anlamsal) HTML'e giriyoruz. Bir senior developer olarak şunu söyleyebilirim: Kodun tarayıcıda nasıl göründüğü CSS'in işidir, ama kodun ne anlama geldiği HTML'in işidir.

Semantik vs. Non-Semantik

  • Non-Semantik Elemanlar (div, span): İçeriği hakkında hiçbir bilgi vermezler. Sadece birer kutudurlar. Tarayıcı için bir div içinde başlık olmasıyla, paragraf olması arasında yapısal bir fark yoktur.
  • Semantik Elemanlar (header, main, article, section, nav): Hem tarayıcıya hem de geliştiriciye içeriğin ne olduğunu açıkça söyler.

Neden Önemli?

  1. SEO (Arama Motoru Optimizasyonu): Google botları sayfanızı gezerken div yığınları arasında kaybolmak yerine, <article> içindeki başlığı ana içerik olarak indeksler. Bu, sıralamanızı doğrudan etkiler.
  2. Erişilebilirlik (A11y): Ekran okuyucular (görme engelli kullanıcılar için), semantik etiketleri kullanarak sayfada 'navigasyon' yapabilirler. Bir kullanıcı sadece nav etiketlerini veya h1 başlıklarını takip ederek sayfada ne olduğunu anlayabilir.

Teknik Bir Not: Biz felsefi aksiyon oyunumuz İçimizdeki Savaş'ın web sayfasını tasarlarken, oyunun hikaye bölümlerini düz divler yerine <article> ve <section> hiyerarşisiyle kurguladık. Bu sadece SEO'muzu uçurmakla kalmadı, aynı zamanda DOM ağacını (tree) incelerken hangi kısmın oyun mekaniği, hangi kısmın hikaye anlatımı olduğunu bir bakışta anlamamızı sağladı. Temiz kod, anlamlı koddur.

🚀 Sanal Kodlama Alanı Yükleniyor...

Teknik Karşılaştırma Tablosu

Eleman Anlamı Kullanım Amacı
<header> Giriş Bölümü Logo, navigasyon ve başlıkları içerir.
<nav> Navigasyon Sadece ana link grupları için kullanılır.
<main> Ana İçerik Sayfanın eşsiz ve merkezi içeriğini kapsar.
<article> Bağımsız İçerik Blog yazısı veya forum iletisi gibi kendi başına anlamlı bloklar.
<aside> Yan İçerik Ana içerikle dolaylı bağlantılı reklam veya sidebar alanları.
<footer> Alt Bilgi Telif hakları, iletişim ve sosyal medya linkleri.

Sonuç: Semantik HTML yazmak sadece 'daha güzel' görünmek için değildir; tarayıcının oluşturduğu Erişilebilirlik Ağacı (Accessibility Tree) için bir zorunluluktur. Kodunuzu yazarken kendinize şu soruyu sorun: "Benim yerime bir robot bu kodu okusa, sayfanın ne hakkında olduğunu anlar mı?"

Ovid Game Studio | Teknik Notlar ovidgame.com