Çalıştırılabilir HTML Dokümanları: HTML özellikleri

Q: HTML özelliği (attribute) nedir?

Özellik, açılış etiketinin içine name="value" şeklinde yazılan ek bilgidir. Elementi yapılandırır: href bir linkin nereye gideceğini belirler, src ve alt bir resmi tanımlar, class ve id CSS ile JavaScript'in elementi bulmasını sağlar.

Q: HTML'de class ile id arasındaki fark nedir?

Bir id sayfada benzersiz olmalıdır ve tek bir elementi tanımlar; #fragment linkleri, ve getElementById için kullanılır. Bir class birçok element tarafından paylaşılabilir ve bir elementin boşlukla ayrılmış birkaç sınıfı olabilir. Stil vermek için sınıfları kullan.

Q: Bir HTML elementine birden fazla class nasıl eklerim?

Hepsini boşlukla ayırarak tek bir class özelliğine yaz: . class özelliğini iki kez yazmak işe yaramaz: tarayıcı yalnızca ilkini tutar.

Q: disabled="false" yazdığım hâlde butonum neden hâlâ devre dışı?

disabled bir boolean özelliktir: değeri ne derse desin, var olması true demektir. Elementi etkinleştirmek için özelliği kaldır ya da JavaScript'te özelliği kaldıran button.disabled = false satırını kullan.

Q: Kendi HTML özelliklerimi uydurabilir miyim?

data- önekini kullan: data-price="12" ya da data-user-id="7" her elementte geçerlidir ve JavaScript'te element.dataset ile okunur. Önek olmadan uydurulan adlar geçersiz HTML'dir.

HTML özellikleri nedir

Bir özellik (attribute) elemente bilgi ekler. Açılış etiketinin içine yazılır: bir ad, bir eşittir işareti ve tırnak içinde bir değer, yani name="value". Bir elementin boşluklarla ayrılmış istediği kadar özelliği olabilir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href linke nereye gideceğini söyler, src ve alt resmi tanımlar, type, placeholder ve required input'u yapılandırır. Her elementin kendi özellik seti vardır ve birkaçı (aşağıdaki global özellikler) her elementte çalışır.

Sözdizimi kuralları

<input type="text" name="city" value="Paris" disabled>

Ad, eşittir işareti, tırnak içinde değer. Çift tırnak gelenektir; tek tırnak da çalışır (bir değerin içine çift tırnak koymanın yolu title='Say "hi"' şeklinde yazmaktır).
Adlar büyük küçük harfe duyarlı değildir. CLASS ile class aynı özelliktir. Değerler öyle değildir: class="Box" ve class="box" farklı sınıflardır.
Boşluk yoksa tırnak isteğe bağlıdır, ama yine de tırnak kullan. class=big box, elemente big sınıfını ve box adında ikinci, anlamsız bir özellik verir.
Sıra önemli değildir. <img alt="" src="a.png"> ile <img src="a.png" alt=""> aynıdır.
Her ad bir elementte bir kez. Bir özellik iki kez yazılırsa tarayıcı ilkini tutar, ikincisini sessizce atar.

Boolean özellikler

Bazı özellikler ya açıktır ya kapalı. Bunlarda var olmak true demektir ve değer yok sayılır. disabled, checked, required, readonly, hidden, multiple, autofocus ve open hep böyle çalışır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

Üçüncü buton, değeri false dese bile devre dışıdır, çünkü tarayıcı yalnızca özelliğin orada olup olmadığına bakar. Bir boolean özelliği kapatmak için onu kaldır. JavaScript'te button.disabled = false tam olarak bunu yapar.

class özelliği

class, bir elemente CSS ve JavaScript'in onu bulmak için kullandığı bir ya da daha fazla ad verir. Birkaç element aynı sınıfı paylaşabilir ve bir elementin boşlukla ayrılmış birkaç sınıfı olabilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Her ek sınıf kendi kurallarını üste ekler. CSS'te bir sınıf noktayla seçilir (.card); JavaScript'te element.classList.add('featured') ve classList.remove sınıfları değiştirir. Sınıflar bir şeylere stil vermenin olağan yoludur: CSS'inin çoğu sınıfları hedefleyecek.

id özelliği

id, bir elemente sayfada benzersiz olması gereken bir ad verir. Tam olarak tek bir elemente ihtiyacın olduğunda kullan: bir link hedefi, bir <label for> ya da document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Label'a tıklamak input'a odaklanır, çünkü for="email" değeri id="email" olan elementi gösterir. Link #pricing konumuna kayar, çünkü href içindeki fragment id ile eşleşir.

	`class`	`id`
Kaç element paylaşabilir	İstediğin kadar	Bir (benzersiz)
Element başına değer	Birkaç tane, boşlukla ayrılmış	Bir
CSS seçicisi	`.name`	`#name`
Tipik kullanım	Element gruplarına stil vermek	Link hedefleri, label'lar, JavaScript'te belirli tek bir element

Bir id boşluk içeremez. CSS'te kolay kullanmak için bir harfle başlat: #2col kaçış karakteri olmadan geçerli bir CSS seçicisi değildir.

Global özellikler

Bu özellikler her elementte çalışır:

Özellik	Ne yapar
`id`	Elementin benzersiz adı
`class`	Boşlukla ayrılmış sınıf adları listesi
`style`	Satır içi CSS, örneğin `style="color: red"`
`title`	Üzerine gelince görünen ipucu metni
`lang`	İçeriğin dili, örneğin `lang="fr"`
`dir`	Metin yönü: `ltr`, `rtl` ya da `auto`
`hidden`	Elementi gizler (boolean)
`tabindex`	Bir elementi Tab ile odaklanabilir yapar ya da sırasını belirler
`contenteditable`	Kullanıcının elementin metnini düzenlemesine izin verir
`data-*`	JavaScript ile okunan kendi verin

lang özelliğinin ayrı bir sayfası var, çünkü ekran okuyucuları, çeviriyi ve aramayı etkiler.

data-* özellikleri

Bir elementte kendi değerini saklaman gerektiğinde, adın başına data- ekle. Önekten sonra herhangi bir ad olur ve JavaScript değerleri element.dataset ile okur; tireler camelCase'e çevrilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id, dataset.productId olur. Değerler her zaman string olarak döner, bu yüzden aritmetik yapmadan önce Number() ile dönüştür. CSS de bunlara göre seçim yapabilir: [data-price="4.50"].

Sık yapılan hatalar

class özelliğini iki kez yazmak. <div class="a" class="b"> yalnızca a değerini tutar. İkisini tek bir özelliğe yaz: class="a b".
Bir id'yi tekrar kullanmak. Aynı id'ye sahip iki element #links, label'ları ve yalnızca ilkini döndüren getElementById davranışını bozar. Tekrarlanan her şey için bir sınıf kullan.
disabled="false" ya da checked="false". Özellik hâlâ orada, yani hâlâ açık. Onun yerine kaldır.
Boşluk içeren tırnaksız değerler. alt=My photo, alt değerini My yapar. Her değeri tırnak içine al.
data- olmadan özellik uydurmak. <div price="4"> geçersiz HTML'dir ve gelecekteki standart bir özellikle çakışabilir. data-price kullan.

Sıkça Sorulan Sorular

HTML özelliği (attribute) nedir?

Özellik, açılış etiketinin içine name="value" şeklinde yazılan ek bilgidir. Elementi yapılandırır: href bir linkin nereye gideceğini belirler, src ve alt bir resmi tanımlar, class ve id CSS ile JavaScript'in elementi bulmasını sağlar.

HTML'de class ile id arasındaki fark nedir?

Bir id sayfada benzersiz olmalıdır ve tek bir elementi tanımlar; #fragment linkleri, <label for> ve getElementById için kullanılır. Bir class birçok element tarafından paylaşılabilir ve bir elementin boşlukla ayrılmış birkaç sınıfı olabilir. Stil vermek için sınıfları kullan.

Bir HTML elementine birden fazla class nasıl eklerim?

Hepsini boşlukla ayırarak tek bir class özelliğine yaz: <div class="card featured dark">. class özelliğini iki kez yazmak işe yaramaz: tarayıcı yalnızca ilkini tutar.

HTML özelliklerinde tırnak işareti gerekli mi?

Değerde boşluk ya da özel karakter yoksa tırnak isteğe bağlıdır, ama her zaman tırnak kullanmak güvenli alışkanlıktır. class=big box, elemente big sınıfını ve ayrıca box adında bir özellik verir.

disabled="false" yazdığım hâlde butonum neden hâlâ devre dışı?

disabled bir boolean özelliktir: değeri ne derse desin, var olması true demektir. Elementi etkinleştirmek için özelliği kaldır ya da JavaScript'te özelliği kaldıran button.disabled = false satırını kullan.

Kendi HTML özelliklerimi uydurabilir miyim?

data- önekini kullan: data-price="12" ya da data-user-id="7" her elementte geçerlidir ve JavaScript'te element.dataset ile okunur. Önek olmadan uydurulan adlar geçersiz HTML'dir.

İlgili kavramlar