- Konu sahibi
- #1
HTML
Örneğin aşağıdaki kodda
Bu öğeye sayfanın başka bir yerinden bağlantı vermek için
Bağlantıya tıklandığında tarayıcı,
Bir öğeye ID eklerken şu uygulama sırasını izleyin:
Başarılı durumda bağlantı paragrafı görünür konuma getirir ve geliştirici konsolunda paragrafın metni yazdırılır. CSS uygulanmıyor veya JavaScript
Örneğin sayfadaki tüm ürün kartlarının aynı görünmesini istiyorsanız
Böylece etiket ile form alanı ilişkilendirilir; kullanıcı etikete tıkladığında ilgili alan odaklanabilir.
HTML açısından ID değeri rakamla başlayabilir. CSS seçicisi oluşturan querySelector gibi yöntemlerde böyle bir değer kaçış gerektirir. getElementById ise doğrudan kimlik metnini alır ve CSS kaçışı istemez. Harfle başlayan kısa değerler, seçicilerle çalışmayı kolaylaştırır.
Evet. Örneğin
kodunda
id, bir HTML öğesine sayfa içinde benzersiz bir kimlik vermek için kullanılan global özniteliktir. Aynı belge içindeki başka bir öğede aynı id değeri kullanılmamalıdır. Bu kimlik; belirli bir bölüme bağlantı vermek, CSS ile tek bir öğeyi hedeflemek veya JavaScript üzerinden öğeyi bulmak için kullanılır.Örneğin aşağıdaki kodda
iletisim değeri, section öğesinin kimliğidir:
Kod:
<section id="iletisim">
<h2>İletişim</h2>
<p>Bize ulaşmak için formu kullanabilirsiniz.</p>
</section>Bu öğeye sayfanın başka bir yerinden bağlantı vermek için
href değerinin başına # eklenir:
Kod:
<a href="#iletisim">İletişim bölümüne git</a>Bağlantıya tıklandığında tarayıcı,
id="iletisim" olan bölüme kayar. Adres çubuğunda #iletisim parçası görülebilir. Bu yöntem özellikle uzun sayfalarda içindekiler, SSS bölümleri ve belirli içeriklere doğrudan bağlantı vermek için kullanışlıdır.HTML ID nasıl kullanılır?
Bir öğeye ID eklerken şu uygulama sırasını izleyin:
- Hedef öğeyi belirleyin. Örneğin bir bölüm, başlık, form veya hata mesajı olabilir.
- Öğeye anlamlı ve benzersiz bir
iddeğeri ekleyin:id="urun-detaylari". - Sayfa içi bağlantı gerekiyorsa
href="#urun-detaylari"biçimini kullanın. - CSS ile hedeflemek için
#urun-detaylariseçicisini, JavaScript ile bulmak içindocument.getElementById("urun-detaylari")yöntemini kullanın. - Tarayıcıda bağlantıyı, görünümü veya JavaScript davranışını test edin. Hedef bulunamıyorsa yazımdaki büyük-küçük harfleri ve
iddeğerinin gerçekten mevcut olup olmadığını kontrol edin.
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>ID örneği</title>
<style>
#sonuc {
padding: 10px;
border: 1px solid #999;
}
</style>
</head>
<body>
<a href="#sonuc">Sonuca git</a>
<p id="sonuc">Bu paragrafın benzersiz ID değeri sonuc'tur.</p>
<script>
const hedef = document.getElementById("sonuc");
console.log(hedef.textContent);
</script>
</body>
</html>Başarılı durumda bağlantı paragrafı görünür konuma getirir ve geliştirici konsolunda paragrafın metni yazdırılır. CSS uygulanmıyor veya JavaScript
null döndürüyorsa seçicide ve id değerinde yazım hatası olabilir. Aynı ID birden fazla öğede kullanılırsa belge kurala uymaz. getElementById belge sırasındaki ilk eşleşen öğeyi döndürür; bu da hedeflediğiniz öğe olmayabilir. Öğeleri seçerken büyük-küçük harfleri aynen koruyun. Script öğeden önce çalışıyorsa hedef henüz oluşmadığı için de null dönebilir; örnekte script bu nedenle paragraftan sonra yer alıyor.ID ile class arasındaki fark
id tek bir öğeyi tanımlamak için, class ise aynı biçim veya davranışı paylaşan birden fazla öğeyi gruplamak için tercih edilir.| Özellik | ID | Class |
|---|---|---|
| Kullanım amacı | Tek ve belirli öğe | Ortak grup veya stil |
| Benzersizlik | Belge içinde benzersiz olmalı | Birçok öğede kullanılabilir |
| CSS seçicisi | #menu | .kart |
| Sayfa içi bağlantı | Uygun | Doğrudan hedef değildir |
class="urun-karti" kullanın. Yalnızca sepet özetini hedeflemek istiyorsanız id="sepet-ozeti" daha uygundur.ID yazarken dikkat edilmesi gerekenler
- Aynı belge içinde aynı değeri tekrarlamayın.
id="baslik"iki farklı öğede bulunmamalıdır. - ID değerinde boşluk kullanmayın. Birden fazla kelime gerekiyorsa
urun-detaylarigibi kısa ve okunabilir bir biçim seçin. - ID'yi yalnızca stil vermek için her yerde kullanmayın; tekrar kullanılacak stiller için
classtercih edin. - JavaScript'te
window.menugibi dolaylı erişim yerinedocument.getElementById("menu")kullanın. - ID değerini sonradan değiştirirken ona verilen sayfa içi bağlantıları, CSS seçicilerini ve JavaScript kodlarını da güncelleyin.
label öğesinde for değeri, ilgili alanın id değeriyle eşleştirilebilir:
Kod:
<label for="eposta">E-posta</label>
<input id="eposta" type="email">Böylece etiket ile form alanı ilişkilendirilir; kullanıcı etikete tıkladığında ilgili alan odaklanabilir.
Kaynaklar
Sık sorulan sorular
ID değeri rakamla başlayabilir mi?
HTML açısından ID değeri rakamla başlayabilir. CSS seçicisi oluşturan querySelector gibi yöntemlerde böyle bir değer kaçış gerektirir. getElementById ise doğrudan kimlik metnini alır ve CSS kaçışı istemez. Harfle başlayan kısa değerler, seçicilerle çalışmayı kolaylaştırır.
Bir öğede hem ID hem class kullanılabilir mi?
Evet. Örneğin
HTML:
<div id="ana-menu" class="menu"></div>id öğeyi tekil olarak tanımlar, class ise ortak menü stillerine katılmasını sağlar.