HTML id Özelliği

HTML id Özellik, HTML elementine benzersiz bir id belirlemek için kullanılır.

Bir HTML belgesinde aynı id'ye sahip çoklu element bulunamaz.

id özelliği kullanımı

id Özellik, HTML elementinin benzersiz ID'sini belirtir. id Özelliğin değeri HTML belgesinde benzersiz olmalıdır.

id Özellik, tarz tablosundaki belirli tarz beyanlarına yönlendirir. JavaScript de, belirli bir ID'ye sahip elementlere erişmek ve işlemek için kullanılabilir.

id'nin grameri: bir çizgi (#) yazılır, ardından bir id adı gelir. Daha sonra, parantezler {} içinde CSS özellikleri tanımlanır.

aşağıdaki örnekte bizim <h1> elementine göre, bu element, id adı "myHeader"'ye işaret eder. Bu <h1> Elementler head bölümündeki #myHeader Stil tanımları stil ayarları yapar:

Örnek

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

Kişisel olarak deneyin

Not:ID adları büyük/küçük harfe duyarlıdır!

Not:ID, en az bir karakter içermelidir ve boşluk karakterlerine (boşluk, tab vb.) sahip olmamalıdır.

Class ile ID arasındaki fark

Aynı sınıf adı birden fazla HTML elementi tarafından kullanılabilir, ancak bir ID adı sadece sayfadaki bir HTML elementi tarafından kullanılabilir:

Örnek

<style>
/* "myHeader" adlı ID'ye sahip elementin stilleri */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* "city" adlı sınıfa sahip tüm elementlerin stilleri */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Tekil id'ye sahip elementler -->
<h1 id="myHeader">My Cities</h1>
<!-- Aynı sınıf adına sahip çok sayıda element -->
<h2 class="city">London</h2>
<p>London, İngiltere'nin başkenti.</p>
<h2 class="city">Paris</h2>
<p>Paris, Fransa'nın başkenti.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo, Japonya'nın başkenti.</p>

Kişisel olarak deneyin

İpucu:Lütfen bizim CSS Eğitimi CSS bilgileri hakkında daha fazla bilgi edinin.

HTML işaretlemeleri ID ve bağlantı ile gerçekleştirilir

HTML işaretlemeleri, okuyucuların web sayfasının belirli bir bölümüne atlamalarını sağlar.

Sayfa uzunsa, işaretlemeler çok faydalı olabilir.

İşaretlemek kullanmak için, önce onu oluşturmanız ve ona bir bağlantı eklemeniz gerekir.

Tıkladığınızda, sayfa, işaretli konuma kayacak.

Örnek

Öncelikle, id Özellik oluşturmak için

<h2 id="C4">Bölüm 4</h2>

Sonra, aynı sayfada, bu işaretli sayfaya bir bağlantı ekleyin ("Bölüm 4'e Git”):

Örnek

<a href="#C4">Bölüm 4'e Git</a>

Kişisel olarak deneyin

veya, başka bir sayfada, bu işaretli sayfaya yönlendiren bir bağlantı ekleyin ("Bölüm 4'e Git”):

<a href="html_demo.html#C4">Bölüm 4'e Git</a>

JavaScript'te id özelliği kullanımı

JavaScript, belirli bir elemente belirli görevler gerçekleştirmek için id özelliğini kullanabilir.

JavaScript'in kullanabileceği getElementById() Belirli id'ye sahip elementlere yöntem erişimi:

Örnek

Metni id özelliği aracılığıyla JavaScript ile işleme koymak için:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Kişisel olarak deneyin

İpucu:Lütfen HTML JavaScript Bu bölümde, veya bizim JavaScript Eğitimi JavaScript'i öğrenmek için

Bu Bölüm Özeti

  • id Özellik, HTML elementlerine benzersiz bir id belirlemek için kullanılır
  • id Özellik değerleri HTML belgesinde benzersiz olmalıdır
  • CSS ve JavaScript kullanabilir id Özellik, elementleri seçmek veya belirli bir elementin tarzını ayarlamak için kullanılır
  • id Özellik değerleri büyük/küçük harfe duyarlıdır
  • id Özellikler HTML kitaplıklarını oluşturmak için de kullanılabilir
  • JavaScript'in kullanabileceği getElementById() Belirli id'ye sahip elementlere yöntem erişimi