Bir web sayfası tasarlarken HTML etiketlerinin ID ve Class kullanırken nelere dikkat edilmeli?
ID verilen etikete sayfanın başka bir bölümünde ID’nin bulunduğu alana gidebilmek için “href” özelliği ile ulaşılabilir.
<!DOCTYPE html>
<html>
<head></head>
<body>
<a href="#click">Buton</a>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<!-- . . . -->
<!-- . . . -->
<!-- . . . -->
<!-- . . . -->
<!-- . . . -->
<!-- . . . -->
<p id="click">Dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
Spesifik bir ID etiketinden bir HTML sayfasında 1 adet kullanılmalıdır. Farklı sayfalarda aynı ID değişkeni tekrar edebilir.
Javascript ile spesifik bir HTML etiketi tetiklenecekse ID kullanımı daha doğru olur. (Class etiketi ile de HTML etiketi tetiklenebilir, ID daha çok tercih edilir.)
<!DOCTYPE html>
<html>
<head></head>
<body> <button onclick="onclickFunction()">Test</button>
<p id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<script>
function onclickFunction() {
document.getElementById("text").style.color = "red";
}
</script>
</body>
</html>
Birden fazla HTML etiketine aynı CSS özellikleri verilecekse Class kullanılmalı.
Web sayfasında bir class birden fazla HTML etiketinde kullanılabilir fakat ID yalnızca 1 HTML etiketinde kullanılabilir.
<!DOCTYPE html>
<html>
<head></head>
<body>
<section id="section1" class="section">
</section>
<section id="section2" class="section">
</section>
<section id="section3" class="section">
</section>
</body>
</html>
Internal ve External CSS kullanımında CSS tanımlanırken Class’a verilen CSS değişkeninin başında “.” karakteri kullanılırken, ID’de “#” karakteri kullanılır.
<!DOCTYPE html>
<html>
<head>
<style>
#id {
color: blue;
}
#class {
color: brown;
}
</style>
</head>
<body>
<p id="id">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p class="class">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
Kaynakça: