HTML kimliği Özelliği
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
Nitelik id, bir HTML öğesi için benzersiz bir kimlik belirtir. Niteliğin değeri id
, HTML belgesinde benzersiz olmalıdır.
Nitelik id, bir stil sayfasında belirli bir stil bildirimine işaret etmek için 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 için 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 öğe
, başlık bölümündeki stil tanımına <h1>
göre stillendirilecektir :#myHeader
Ö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>
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
<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>
<!-- 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>
İpucu: CSS Eğitimimizde CSS hakkında çok daha fazla bilgi edinebilirsiniz .
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
idİlk olarak, ö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
<a href="#C4">Jump to Chapter 4</a>
Veya başka bir sayfadan yer işaretine ("4. Bölüme Atla") bir bağlantı ekleyin:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
JavaScript'te id Niteliğini Kullanma
Nitelik id, JavaScript tarafından o belirli öğe için bazı görevleri gerçekleştirmek için de kullanılabilir.
JavaScript, belirli bir kimliğe sahip bir öğeye şu getElementById()yöntemle erişebilir:
Örnek
idJavaScript ile metni işlemek için özniteliği kullanın :
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
İpucu: JavaScript'i HTML JavaScript bölümünde veya JavaScript Eğitimimizde inceleyin .
Bölüm özeti
- Nitelik
id, bir HTML öğesi için benzersiz bir kimlik belirtmek için kullanılır - Özelliğin değeri
id, HTML belgesinde benzersiz olmalıdır - Öznitelik ,
idbelirli bir öğeye stil vermek/seçmek için CSS ve JavaScript tarafından kullanılır - Özelliğin değeri büyük/
idküçük harfe duyarlıdır - Nitelik
idayrıca HTML yer imleri oluşturmak için kullanılır - JavaScript, belirli bir kimliğe sahip bir öğeye
getElementById()yöntemle erişebilir