09/10/2021

HTML ID ve Class Kullanımı

HTML ID ve CSS Farkı

Bir web sayfası tasarlarken HTML etiketlerinin ID ve Class kullanırken nelere dikkat edilmeli?

ID – HTML ID Kullanımı

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>

Class – HTML Class Kullanımı

Birden fazla HTML etiketine aynı CSS özellikleri verilecekse Class kullanılmalı.

HTML Class ve ID Kullanım Farkları

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:

https://www.w3schools.com/