HTML id Özelliği

HTML id özelliği, bir HTML öğesi için benzersiz bir kimlik belirtmek içindir. Bir HTML belgesinde aynı id değerine sahip birden fazla öğeye sahip olamazsınız.

HTML id Kullanma

id niteliği, bir HTML öğesi için benzersiz bir kimlik belirtir. id değeri HTML belgesinde benzersiz olmalıdır.

id niteliği, bir stil sayfasındaki belirli bir style bildirimine işaret etmek içindir. Ayrıca, belirli bir kimliğe sahip öğeye erişmek ve onu değiştirmek için JavaScript tarafı kullanılabilir.

id oluşturmak için sabit bir syntax vardır. Bir # işareti ve id adı, aynı Class’ta olduğu gibi süslü parantez ve özellikler ile id belirtebilirsiniz.

Aşağıdaki örnekte <h1> etiketi baslik kimliğindeki özellikleri gösterir.

<!DOCTYPE html>
<html>
<head>
<style>
#baslik {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="baslik">Başlık</h1>

</body>
</html>

Not : id büyük harf küçük harf duyarlıdır.

Not : id adı en az bir karakter içerir, sayıyla başlayamaz ve boşluk içeremez.

HTML Sınıf ve Kimlik Arasındaki Fark

Bir sınıf adı birden fazla HTML öğesi tarafından kullanılabilirken, bir kimlik adı sayfadaki yalnızca bir HTML öğesi tarafından kullanılır.

<!DOCTYPE html>
<html>
<head>
<style> 
#baslik {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
 
.sehir {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
</head>
<body>
  
<h1 id="baslik">Başlık</h1>
 
<h2 class="sehir">Hatay</h2>
<p>Türkiye'de bir şehir.</p>

<h2 class="sehir">Ankara</h2>
<p>Türkiye'de bir şehir.</p>

<h2 class="sehir">İstanbul</h2>
<p>Türkiye'de bir şehir.</p>

</body>
</html>

id İle Bookmark Oluşturma

HTML yer imleri, okuyucuların bir web sayfasının belirli bölümlerine atlamasını sağlamak için kullanılır.

Sayfanız çok uzunsa ve çok yazı içeriyorsa eğer yer imleri yararlı olabilir.

Bir yer işaretini kullanmak için önce oluşturmak sonra bir bağlantı vermek gereklidir. Bağlantı tıklandığında sayfa, yer iminin bulunduğu konuma kaydırılır.

<!DOCTYPE html>
<html>
<body>

<p><a href="#B4">Bölüm 4 Git</a></p>
<p><a href="#B10">Bölüm 10 Git</a></p>

<h2>Bölüm 1</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2>Bölüm 2</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2>Bölüm 3</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2 id="B4">Bölüm 4</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2>Bölüm 5</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2>Bölüm 6</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2>Bölüm 7</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2>Bölüm 8</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2>Bölüm 9</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2 id="B10">Bölüm 10</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2>Bölüm 11</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

<h2>Bölüm 12</h2>
<p>Bu Bölümde Biraz Yazı Var</p>

</body>
</html>

JavaScript id Kullanma

Javascriptte id özelliği, bazı işlemler gerçekleştirmek için kullanılabilir. JavaScript, getElementById() ile ilgili id’ye sahip etikete erişir.

<!DOCTYPE html>
<html>
<body>
 
<h1 id="baslik">Merhaba Dünya!</h1>
<button onclick="sonucuGoster()">Yazıyı Değiştir</button>

<script>
function sonucuGoster() {
  document.getElementById("baslik").innerHTML = "Sanırım Güzel Bir Gün!";
}
</script>

</body>
</html>

Yukarıdaki örnekte ilgili butona basıldığında Merhaba Dünya! başlığı, Sanırım Güzel bir Gün! şeklinde değişecektir.

17 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir