HTML (HyperText Markup Language), web sayfalarını yapılandırmak ve stil vermek için kullanılan temel bir işaretleme dilidir. HTML’de öğeleri özelleştirmek ve belirli özelliklere sahip elementleri gruplamak için class ve id özellikleri kullanılır.
Class ve ID Nedir?
Class:
class özelliği, bir veya birden çok HTML öğesine aynı stil veya davranışı uygulamak için kullanılır. Aynı class adına sahip birden çok öğe, aynı stil kurallarını paylaşır.
ID:
id özelliği, sayfa içinde benzersiz bir tanımlayıcı sağlar. Bir HTML öğesi sadece bir id değerine sahip olabilir ve bu değer, sayfa genelinde eşsiz olmalıdır. id genellikle belirli bir öğeyi tanımlamak ve ona özgü stiller veya davranışlar eklemek için kullanılır.
Class Kullanımı:
HTML’de class özelliği şu şekilde tanımlanır:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class ve ID Örnekleri</title>
<style>
.highlight {
color: blue;
font-weight: bold;
}
.box {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<p class="highlight">Bu paragraf vurgulu bir stile sahiptir.</p>
<div class="box">
<p>İlk kutu içindeki metin.</p>
</div>
<div class="box">
<p>İkinci kutu içindeki metin.</p>
</div>
</body>
</html>
Yukarıdaki örnekte, .highlight class’ı ile vurgulu bir stil tanımlanmış ve iki kutuya aynı stil verilmiştir.
ID Kullanımı:
HTML’de id özelliği şu şekilde tanımlanır:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class ve ID Örnekleri</title>
<style>
#uniqueElement {
background-color: yellow;
}
</style>
</head>
<body>
<p id="uniqueElement">Bu öğe benzersiz bir arka plan renkine sahiptir.</p>
</body>
</html>
Bu örnekte, #uniqueElement ID’sine sahip paragraf öğesine benzersiz bir arka plan rengi verilmiştir.
class ve id kullanımı, HTML ve CSS’yi daha düzenli ve yönetilebilir hale getirmek için önemli araçlardır. Bu özellikleri doğru bir şekilde kullanmak, web sayfalarınızın tasarımını ve işlevselliğini geliştirmenize yardımcı olacaktır.