HTML kimliği Özelliği..

ByESiNTi · 25 Tem 2021

HTML idözelliği, bir HTML öğesi için benzersiz bir kimlik belirtmek için kullanılır.

Bir HTML belgesinde aynı kimliğe sahip birden fazla öğeniz olamaz.

Kimlik Özelliğini Kullanma

id Niteliği HTML elemanı için benzersiz bir kimliği belirtir. Niteliğin değeri id, HTML belgesi içinde benzersiz olmalıdır.

id Öznitelik bir stil sayfasında belirli bir stil ilanına noktasına kullanılır. Ayrıca JavaScript tarafından belirli bir kimliğe sahip öğeye erişmek ve bunları işlemek için kullanılır.

id sözdizimi şöyledir: bir hash karakteri (#) ve ardından bir id adı yazın. Ardından, küme parantezleri {} içinde CSS özelliklerini tanımlayın.

Aşağıdaki örnekte <h1>"myHeader" kimliğine işaret eden bir öğemiz var. Bu <h1>öğe #myHeader, baş bölümündeki stil tanımına göre stillendirilecektir :

Örnek:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

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

<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Not: Kimlik adı büyük/küçük harf duyarlıdır!

Not: Kimlik adı en az bir karakter içermeli, sayı ile başlamamalı ve boşluk (boşluk, sekme vb.) içermemelidir.

Sınıf ve Kimlik Arasındaki Fark
Bir sınıf adı, birden çok HTML öğesi tarafından kullanılabilirken, bir kimlik adı, sayfa içinde yalnızca bir HTML öğesi tarafından kullanılmalıdır:

Örnek:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:</p>

<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Kimlikli ve Bağlantılı HTML Yer İmleri

HTML yer imleri, okuyucuların bir web sayfasının belirli bölümlerine atlamasına izin vermek için kullanılır.
Sayfanız çok uzunsa yer imleri yararlı olabilir.
Bir yer imi kullanmak için önce onu oluşturmanız ve ardından ona bir bağlantı eklemeniz gerekir.
Ardından, bağlantı tıklandığında sayfa, yer iminin bulunduğu konuma kaydırılır.

Örnek

İlk olarak, idöznitelik ile bir yer imi oluşturun :

<h2 id="C4">Chapter 4</h2>

Ardından, aynı sayfadan yer işaretine ("4. Bölüme Atla") bir bağlantı ekleyin:

Örnek:

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

Kod:

<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

Özetlersek:

idNiteliği HTML elemanı için benzersiz bir kimlik belirtmek için kullanılır
Özelliğin değeri id, HTML belgesinde benzersiz olmalıdır
idNitelik stiline CSS ve JavaScript tarafından kullanılan / belli bir elemanı seçmek
Özelliğin değeri büyük/ idküçük harfe duyarlıdır
idNitelik ayrıca HTML işaretleri oluşturmak için kullanılır
JavaScript ile belirli kimlikli bir öğe erişebilir getElementById()yöntemle