HTML Öznitelikleri

Önceki derste öğelerin etiketler ve içerikten oluştuğunu öğrendiniz. Öznitelikler (attributes) bu etiketlere ek bilgi verir. Öznitelikler olmadan birçok öğe asıl işini yapamaz — bir bağlantının adrese, bir görselin dosya yoluna ihtiyacı vardır.

HTML özniteliği nedir?

HTML özniteliği, bir öğenin başlangıç etiketinin içine konan bir ad ve değerdir. Tarayıcıya o öğe hakkında, etiketler arasındaki görünür metinden farklı bir şey söyler.

Doğrudan yanıt

Öznitelikler basit bir kalıp kullanır: name="value". Açılış etiketine, kapanan > öncesine aittirler. Yaygın örnekler: bağlantılar için href, görseller için src ve alt. Sonraki dersler öznitelikleri sık kullanır; kalıbı bir kez burada öğrenin.

Örneği okumak

• Bağlantıda href hedef URL’yi saklar
• Görünür bağlantı metni hâlâ <a> ile </a> arasındaki içeriktir
• Görselde src görsel dosyasına işaret eder
• alt, görsel yüklenemediğinde veya erişilebilirlik için alternatif metin sağlar
• Her iki öznitelik de başlangıç etiketinin içindedir

Unutulmaması gereken sözdizimi kuralları

1. Öznitelikleri yalnızca başlangıç etiketine koyun — bitiş etiketine değil
2. Öznitelik adını değerden = ile ayırın
3. Çoğu değeri tırnak içine alın: href="https://example.com"
4. Aynı başlangıç etiketine birden fazla öznitelik koyabilirsiniz; boşlukla ayırın
5. Modern HTML’de öznitelik adları genellikle küçük harfle yazılır

Burada href adresi ayarlar ve title ek yardımcı metin verebilir (masaüstü tarayıcılarda çoğu zaman tooltip). Her etikete her isteğe bağlı özniteliği koymanız gerekmez — öğenin ihtiyaç duyduklarını kullanın.

Öznitelikler ve içerik

İçerik, başlangıç ile bitiş etiketi arasında durandır; örneğin bir paragraftaki sözcükler. Öznitelikler başlangıç etiketinde yaşar ve öğeyi yapılandırır. Karıştırmak hatalara yol açar: URL’yi yalnızca bağlantı metnine koymak çalışan bir bağlantı oluşturmaz; URL href’e aittir.

Boş öğeler hakkında not

img gibi boş öğeler ayrı bitiş etiketi olmasa da yine öznitelik kullanır. Bu normaldir: öznitelikler öğeyi tanımlar; sarılmış içerik değildir.

Kendiniz deneyin

1. Editörde temel bir HTML sayfası açın
2. Gerçek veya örnek bir URL’ye href öznitelikli bir bağlantı ekleyin
3. src ve anlamlı alt ile bir img ekleyin (sözdizimini öğrenmek için herhangi bir alıştırma yolu veya geçici ad)
4. Kaydedin ve sayfayı tarayıcıda açın
5. Bağlantıya tıklayın ve kaynakta görsel işaretlemesinin, dosya olmasa da mevcut olduğunu kontrol edin

Sık yapılan hatalar

• Öznitelikleri kapanış etiketine yazmak
• Gereken değerlerin tırnaklarını unutmak
• Yanlış öznitelik kullanmak (örneğin bağlantıda href yerine src içine URL koymak)
• Bilgilendirici görsellerde alt’ı boş bırakmak
• Öznitelik metninin her zaman görünür sayfa içeriği olduğunu sanmak — çoğu davranış veya erişilebilirliği ayarlar

Özet

• Öznitelikler başlangıç etiketinin içine ek bilgi ekler
• Olağan biçim name="value"dir
• Bağlantılar href ister; görseller çoğu zaman src ve alt ister
• İçerik etiketler arasındadır; öznitelikler etiketi yapılandırır
• Bir başlangıç etiketinde birden fazla öznitelik birleştirebilirsiniz
• Sonraki dersler bu kalıbı başlıklar, formlar, medya ve daha fazlası için yeniden kullanır