HTML Yer İmleri

Link Titles & Targets, bir bağlantının nasıl açıldığını değiştirmişti. Yer imleri (fragment bağlantıları) ise sayfada nereye ineceğinizi değiştirir. Uzun dersler, SSS ve belgeler sıkça yeni bir belge yüklemeden “Fiyatlandırma”, “SSS” veya “Yukarı dön”e atlamak ister. Bu kalıp, hedefte benzersiz bir id ile # ile başlayan bir hrefi birleştirir.

Sayfa içi yer imi nedir

Fragment tanımlayıcı, URL’nin # sonrası kısmıdır. HTML’de iniş noktasını bir öğeye id vererek oluşturursunuz. Ardından href değeri #that-id olan herhangi bir bağlantı, tarayıcıdan sayfadaki (veya # öncesinde bir yol varsa o sayfadaki) ilk eşleşen id’ye kaydırmasını ister.

Doğrudan yanıt

1. Hedefe bir id verin; örneğin <h2 id="pricing">.
2. href="#pricing" ile bağlayın.
   # “bu id’yi bul” demektir. Id’ler sayfada benzersiz olmalıdır. Boşluksuz kısa adları tercih edin: pricing, Our Pricing!! değil.

Aynı sayfada içindekiler tablosu

Uzun bir sayfanın üstündeki mini gezinme, klasik başlangıç demosudur: üstte fragment bağlantılar, altta başlıklarda eşleşen id’ler ve bir geri dönüş bağlantısı.

Sayfa içi örneği okumak

• #intro ve #pricing ayrı dosyalar değil, fragment bağlantılardır
• Her başlığın idsi, # sonrası fragment ile eşleşmelidir
• Gezinme her yerde olabilir; üstteki içindekiler uzun içerik için yaygındır
• “Back to intro”, yer imlerinin aynı belgede hem aşağı hem yukarı çalıştığını gösterir

Başka bir sayfadaki bölüme bağlanma

Göreli (veya mutlak) bir yolu bir fragment ile birleştirebilirsiniz. Tarayıcı sayfayı yükler, ardından id varsa oraya atlar.

path#id ne zaman kullanılır

• Aynı sayfa atlamaları: #pricing yeterlidir
• Projenizdeki başka bir HTML dosyası: guide.html#pricing
• Güvendiğiniz dış belgeler: o site kararlı id’ler sunuyorsa #section-name ile biten tam URL
  Hedef sayfada id yoksa tarayıcı genellikle sayfayı üstten açar ve bilinmeyen fragment’i yok sayar.

Id adlandırma alışkanlıkları

• Sayfa başına bir id değeri — asla çoğaltmayın
• Mümkünse harfle başlayın; boşluk ve garip noktalamadan kaçının
• Çok sözcüklü adlar için tire kullanın: getting-started
• Başka sayfalar derin bağlantı kuracaksa adları kararlı tutun
  Id’ler makineler ve URL’ler içindir; görünen başlık metni insan dostu kalabilir ve id dizgesinden farklı olabilir.

Yer imleri ve tarayıcı “yer imleri”

İnsanlar “yer imi”ni tarayıcının favoriler menüsüne sayfa kaydetmek için de söyler. Bu ders sayfa içi fragment bağlantıları demektir. Tarayıcı favorileri belge URL’sini kullanır (kopyaladıysanız bazen bir fragment de). Aynı sözcük, farklı günlük işler — başkalarına öğretirken HTML anlamını net tutun.

Erişilebilirlik ve UX notları

Atlama bağlantıları, hedefler gerçek yer işaretleri (başlıklar, bölümler) olduğunda klavye ve ekran okuyucu kullanıcılarının uzun sayfalarda gezinmesine yardımcı olur. Düzinelerce boş id saçmayın. Atlama sonrası hedefin görünür olduğundan emin olun — yapışkan üst çubuklar CSS öğrenirken başlıkları örtebilir; şimdilik doğru bölümün göründüğünü doğrulayın.

Editörünüzde alıştırma

1. Farklı id değerlerine sahip iki başlık oluşturun.
2. Üstlerine href="#…" kullanan fragment bağlantılar ekleyin.
3. Her bağlantıya tıklayın ve sayfanın eşleşen başlığa atladığını doğrulayın.
4. İlk başlığınızdaki bir id’ye veya üst bir yer işaretine giden bir “Yukarı dön” bağlantısı ekleyin.
5. İkinci bir dosyadan other.html#intro ile bağlayın ve sayfalar arası atlamayı doğrulayın.
6. Geçici olarak bir id’yi çoğaltın, karışıklığı gözlemleyin, sonra benzersizliği düzeltin.

Kolay hatalar

• Aynı sayfada aynı idyi iki kez kullanmak
• href içinde # unutup tarayıcının bir dosya adı araması
• Id’lere boşluk veya garip simgeler koymak
• Var olmayan bir id’ye bağlanmak
• Fragment yer imlerini target="_blank" ile karıştırmak (farklı işler)
• Yol olmadan yalnızca #pricingın başka bir dosyayı açmasını beklemek

Özet

• Aynı sayfa yer imleri id artı href="#id" kullanır
• Id’ler benzersiz, kısa ve boşluksuz olmalıdır
• Uzun sayfalar ve mini içindekiler için idealdir
• Başka bir sayfadaki bölüme atlamak için page.html#id kullanın
• Eksik fragment’ler genellikle sessizce başarısız olur — üstte kalırsınız