HTML'de `id` Niteliği Kullanımı: Kapsamlı Bir Rehber

HTML (HyperText Markup Language) belgelerinde, elemanları benzersiz bir şekilde tanımlamak için kullanılan temel niteliklerden biri id niteliğidir. Bu nitelik, bir web sayfasındaki belirli bir elemana özel bir kimlik atayarak, o elemanın CSS ile stilize edilmesini, JavaScript ile manipüle edilmesini veya sayfa içi bağlantılar (çapa bağlantıları) için hedef olarak kullanılmasını sağlar. Her id değeri, tüm HTML belgesi içinde benzersiz olmalıdır; bu, bir kimlik kartı numarası gibi, her elemanın kendine özgü bir tanımlayıcısı olduğu anlamına gelir.

Sözdizimi

id niteliği, herhangi bir HTML etiketine aşağıdaki genel sözdizimi ile eklenir:

İçerik

Burada;

• : Kimlik atanan HTML elemanını (örneğin,

  ,

  , , vb.) temsil eder.

• id: Elemana benzersiz bir kimlik atayan niteliktir.

• "değer": Elemana atanan benzersiz kimlik değeridir. Bu değer tırnak işaretleri içinde belirtilmelidir.

• Benzersizlik Zorunluluğu: Bir HTML belgesinde her id değeri yalnızca bir kez kullanılabilir. Bu kurala uyulmaması tarayıcının beklenen davranışları göstermemesine veya JavaScript kodlarının hatalı çalışmasına neden olabilir. Tarayıcılar bu kuralı zorunlu kılmazken, standartlara uygun ve öngörülebilir davranış için bu kurala titizlikle uyulmalıdır.

• Değer Kuralları: Bir id değeri aşağıdaki kurallara uymalıdır:

  
  

  • Bir harf (A-Z veya a-z) ile başlamalıdır.

  • Alfasayısal karakterler (A-Z, a-z, 0-9), kısa çizgi (-) ve alt çizgi (_) içerebilir.

  • Boşluk karakteri içermemelidir.

  • Büyük/küçük harfe duyarlıdır (örneğin, "myId" ve "myid" farklı kimlikler olarak kabul edilir).

  
  

• Kullanım Alanları:

  
  

  • CSS ile Stil Uygulama: Belirli bir elemanı hedefleyerek sadece o elemana özel stil kuralları uygulamak için kullanılır. CSS'te id seçicisi, # sembolü ile başlar (örneğin, #anaBaslik { color: blue; }).

  • JavaScript ile Eleman Manipülasyonu: JavaScript kullanarak belirli bir HTML elemanına erişmek ve onunla etkileşim kurmak (içeriğini değiştirmek, olay dinleyicileri eklemek vb.) için en yaygın yöntemlerden biridir. document.getElementById("değer") metodu ile elemana erişilir.

  • Çapa Bağlantıları (Fragment Identifiers): Bir web sayfasının içinde belirli bir bölüme doğrudan bağlantı vermek için kullanılır. Bağlantının href niteliği, # sembolü ile başlayan id değerini işaret eder (örneğin, Bölüm 2'ye Git).

  • Form Elemanları ve Erişilebilirlik: etiketi ile bir form elemanını ilişkilendirmek için for niteliği ile id değeri kullanılır, bu da erişilebilirliği artırır.

  
  

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, id niteliğinin farklı bağlamlarda nasıl kullanıldığını göstermektedir:

Örnek 1: CSS ile Stil Uygulama

Bu paragraf, sadece kendisine özel stillere sahiptir.

Örnek 2: JavaScript ile Eleman Seçimi

Bana Tıkla
Burada bir mesaj belirecek.

Örnek 3: Çapa Bağlantısı (Fragment Identifier)

Bölüm İki'ye Atla




Sayfanın İkinci Bölümü
Bu bölüm, yukarıdaki bağlantı tıklanarak doğrudan erişilebilir.

Örnek 4: ile Form Elemanını İlişkilendirme

Kullanıcı Adı:

Bu örnekte, etiketi for="kullaniciAdi" niteliği ile id="kullaniciAdi" olan elemanına bağlanmıştır. Bu sayede, kullanıcı etikete tıkladığında ilgili giriş alanı otomatik olarak odaklanır, bu da erişilebilirliği artırır.

Önemli Notlar

• Her id değeri, bir HTML belgesi içinde benzersiz olmalıdır. Aynı id değerinin birden fazla elemana atanması, beklenen davranış hatalarına yol açabilir ve standartlara aykırıdır.

• id değerleri büyük/küçük harfe duyarlıdır. JavaScript ve CSS'te id seçicilerini kullanırken bu duruma dikkat edilmelidir.

• Bir eleman, yalnızca bir id niteliğine sahip olabilir. Birden fazla id ataması geçersizdir.

• Birden fazla elemana aynı stil veya davranışı uygulamak istendiğinde, id yerine class niteliği tercih edilmelidir. id, tekil ve benzersiz elemanlar için ayrılmıştır.

• HTML5 standartlarına göre, id değerleri geçerli bir harfle başlamalı ve boşluk karakteri içermemelidir. Geçersiz id değerleri, bazı tarayıcılarda veya eski HTML sürümlerinde sorunlara neden olabilir.