HTML Global Öznitelikler Rehberi: id, class, title, style, contenteditable ve Diğerleri

Global öznitelik ne demek?

Bir <input> öğesinin type özniteliği ya da bir <img> öğesinin src özniteliği yalnızca o öğeye aittir. Global öznitelikler ise ortaktır: id'yi bir paragrafa da, bir tabloya da, bir düğmeye de verebilirsiniz. MDN ilginç bir ayrıntıya dikkat çeker: Bu öznitelikler standartta tanımlı olmayan öğelerde bile geçerlidir. Örneğin tarayıcılar, geçerli bir HTML öğesi olmasa da <foo hidden> şeklinde yazılmış bir öğeyi gizler. Standart dışı öğe kullanmak belgeyi geçersiz kılar, ama global öznitelikler yine işler.

Temel listeye ek olarak üç grup daha tüm öğelerde geçerlidir: XHTML'den kalan ve yalnızca uyumluluk için tutulan, kullanımdan kaldırılmış xml:lang ve xml:base; erişilebilirlik için ARIA role özniteliği ve aria-* durum ve özellikleri; son olarak onclick, oninput gibi olay işleyici öznitelikleri. MDN olay işleyici özniteliklerinin kullanılmasını önermez. Ayrıca bu öznitelikler her öğede kabul edilse de her öğede işe yaramaz: onvolumechange her öğeye yazılabilir, ama tarayıcının gönderdiği volumechange olayını yalnızca medya öğeleri alır.

Numaralandırılmış ve Boolean öznitelikler

Global öznitelikleri doğru yazmanın anahtarı, bir özniteliğin hangi türde olduğunu bilmektir. Boolean bir öznitelikte (örneğin hidden ve inert) özniteliğin varlığı "doğru", yokluğu "yanlış" demektir. Numaralandırılmış (enumerated) bir öznitelik ise belirli değerlerden birini alır. MDN bu ayrımı özellikle iki öznitelik için vurgular: contenteditable ve draggable değerleri arasında true ve false bulunsa da Boolean değil, numaralandırılmış özniteliklerdir.

Pratik sonucu şudur: draggable için true ya da false yazmak zorunludur; <img draggable> gibi kısa yazım yasaktır, doğrusu <img draggable="true"> şeklindedir. contenteditable ise değersiz yazıldığında (<label contenteditable>) boş dizge olarak yorumlanır ve boş dizge bu öznitelik için "düzenlenebilir" anlamına gelir.

id: Belgede tek olan kimlik

id, tüm belgede benzersiz olması gereken bir kimlik tanımlar. Amacı tek bir öğeyi; bağlantılarda parça tanımlayıcısıyla (#bolum), betiklerde ve CSS'te belirlemektir. Değer ASCII boşluk karakteri içermemelidir; içerirse tarayıcılar boşluğu kimliğin parçası sayar. class'tan farklı olarak bir öğenin yalnızca tek bir kimliği olabilir.

Teknik olarak değer başka her Unicode karakterini içerebilir. Ancak CSS seçicilerinde (CSS dosyasında ya da document.querySelector() ile) kullanılacaksa geçerli bir CSS tanımlayıcısı olmalıdır; my?id ya da 1234 gibi değerlerin seçicide kaçışlanması gerekir. MDN bu yüzden kaçış gerektirmeyen değerler seçmeyi önerir. Ayrıca kimliği olan öğelere window.kimlik biçiminde global özellik olarak erişilebilse de MDN bunu, tarayıcının gelecekte aynı adla bir özellik eklemesi durumunda çakışma riski nedeniyle tehlikeli bulur ve getElementById() ya da querySelector() kullanılmasını önerir. Parça bağlantılarının kullanımı a etiketi yazısında anlatılıyor.

<h2 id="fiyatlar">Fiyatlar</h2>
<p><a href="#fiyatlar">Fiyatlara git</a></p>

class: Sınıf listesi

class, ASCII boşluklarla ayrılmış sınıf adlarından oluşan bir listedir. Sınıflar CSS sınıf seçicileri ve getElementsByClassName() gibi yöntemlerle öğeleri seçmeye yarar. id'de olduğu gibi, değerin seçicilerde kaçış gerektirmeyen geçerli bir CSS tanımlayıcısı olması önerilir. MDN, spesifikasyonun sınıf adlarına bir şart koymadığını ama görünümü değil öğenin anlamını anlatan adlar seçilmesini teşvik ettiğini belirtir: "italik" yerine "oznitelik" gibi. Anlamsal adlar, sayfanın tasarımı değişse bile mantıklı kalır.

<p class="not uyari">Bu işlem geri alınamaz.</p>
<p class="not">Değişiklikler birkaç dakika içinde yayılır.</p>

title: İpucu metni ve sınırları

title, öğeyle ilgili tavsiye niteliğinde bilgi taşır ve genellikle (ama zorunlu olarak değil) bir ipucu balonu olarak gösterilir. MDN'e göre en önemli kullanımı, <iframe> öğelerini yardımcı teknolojiler için etiketlemektir. Veri tablolarındaki kontrolleri etiketlemek için de kullanılabilir. <link rel="stylesheet"> üzerinde alternatif bir stil sayfası oluşturur. <abbr> üzerinde kullanılırsa kısaltmanın tam açılımı olmalıdır; ama MDN, mümkünse açılımın ilk kullanımda düz metin olarak yazılmasını önerir.

Özniteliğin iki ince davranışı vardır. Birincisi, değer birden çok satıra yayılabilir; her satır besleme karakteri bir satır sonu sayılır. İkincisi miras: title olmayan bir öğe, ipucunu üst öğesinden alır. Bir öğeye title="" verirseniz atalarının ipuçlarının o öğe için geçersiz olduğunu söylemiş olursunuz.

<div title="Bu kutu hakkında ek bilgi">
  <p>Üzerine gelindiğinde üst öğenin ipucu görünür.</p>
  <p title="">Bu paragrafta ipucu görünmez.</p>
</div>

style: Satır içi CSS

style, öğeye uygulanacak CSS bildirimlerini içerir. MDN stillerin ayrı dosyalarda tanımlanmasını önerir; bu öznitelik ve <style> öğesi esas olarak hızlı biçimlendirme, örneğin test amaçlı kullanım içindir. İki kural daha vardır: style anlam taşımak için kullanılmamalıdır, tüm stiller kaldırıldığında sayfa anlamsal olarak doğru kalmalıdır. Konuyla ilgisi olmayan bilgiyi gizlemek için de stil değil hidden özniteliği kullanılmalıdır.

<p style="margin: 0; font-weight: bold">Bu satırın stili yalnızca test için yazıldı.</p>

contenteditable: Düzenlenebilir içerik

contenteditable, öğenin kullanıcı tarafından düzenlenebilir olup olmadığını belirtir. Değerleri true veya boş dizge (düzenlenebilir), false (düzenlenemez) ve plaintext-only'dir (ham metin düzenlenebilir ama zengin biçimlendirme kapalıdır). Öznitelik yoksa ya da değeri geçersizse değer üst öğeden miras alınır; yani düzenlenebilir bir öğenin çocukları da düzenlenebilir.

Düzenlenebilir öğeler etkileşimli hale gelir: Odak alabilir ve sıralı klavye gezinmesine katılırlar. Ancak düzenlenebilir başka bir öğenin içindeki düzenlenebilir öğeler varsayılan olarak sekme sırasına eklenmez; eklemek için tabindex="0" verilir. Yapıştırma davranışı da değere göre değişir: true olan bir öğeye yapıştırılan içeriğin biçimi korunur, plaintext-only olanda tüm biçim kaldırılır.

<div contenteditable="plaintext-only">Notunuzu buraya yazın.</div>

spellcheck: Yazım denetimi ve gizlilik

spellcheck, öğenin yazım hataları için denetlenip denetlenmeyeceğini belirten numaralandırılmış bir özniteliktir: boş dizge veya true denetlensin, false denetlenmesin demektir. MDN bunun yalnızca bir ipucu olduğunu, tarayıcıların yazım denetimi yapmak zorunda olmadığını ve düzenlenemeyen öğelerin genellikle true verilse bile denetlenmediğini belirtir. Öznitelik yoksa varsayılan değer öğe türüne ve tarayıcıya bağlıdır ve miras alınabilir.

Güvenlik açısından önemli bir not vardır: Spesifikasyon yazım denetiminin nasıl yapılacağını düzenlemez ve öğenin içeriği sonuç almak için üçüncü bir tarafa gönderilebilir. MDN bu yüzden hassas bilgi içerebilecek öğelerde spellcheck="false" kullanmayı düşünmenizi önerir.

<label for="kimlik-no">Kimlik numarası</label>
<input id="kimlik-no" name="kimlik-no" type="text" spellcheck="false">

draggable: Sürükle bırak

draggable, öğenin tarayıcının yerel davranışıyla ya da HTML Drag and Drop API ile sürüklenip sürüklenemeyeceğini belirtir. Değeri true ya da false olmalıdır. Öznitelik verilmezse varsayılan auto'dur: Yalnızca metin seçimleri, görseller ve bağlantılar sürüklenebilir; diğer öğeler için sürükle bırakın çalışması adına ondragstart olayının ayarlanması gerekir. Öznitelik yalnızca HTML ad alanındaki öğelere uygulanabilir, SVG öğelerine uygulanamaz.

Sanal klavye öznitelikleri

Mobil cihazlardaki ekran klavyesini etkileyen üç global öznitelik vardır. inputmode, kullanıcının gireceği veri türü hakkında ipucu verir ve tarayıcının uygun klavyeyi göstermesini sağlar. Değerleri none, text (varsayılan), decimal, numeric, tel, search, email ve url'dir. MDN, inputmode'un hiçbir doğrulama kuralı getirmediğini vurgular; girdinin belirli bir türde olması gerekiyorsa uygun <input> türü seçilmelidir.

enterkeyhint, sanal klavyedeki Enter tuşunun etiketini ya da simgesini belirler: enter, done, go, next, previous, search ve send. Verilmezse tarayıcı inputmode, type ya da pattern bilgisinden uygun bir etiket seçebilir. autocapitalize ise girilen metnin otomatik olarak büyük harfe çevrilip çevrilmeyeceğini belirler: none veya off, sentences veya on, words ve characters. Fiziksel klavyeyle yazarken etkisi yoktur, sanal klavye ve sesli giriş gibi yöntemleri etkiler. url, email ve password türündeki alanlarda hiç uygulanmaz; bir <form> üzerine yazılırsa içindeki alanların kendi autocapitalize değerlerini geçersiz kılar.

<label for="kod">Doğrulama kodu</label>
<input id="kod" name="kod" type="text" inputmode="numeric" enterkeyhint="done">
<label for="sehir">Şehir</label>
<input id="sehir" name="sehir" type="text" autocapitalize="words" enterkeyhint="next">

Kendi yazısı olan global öznitelikler

Listenin geri kalanı ya kendi başına bir konudur ya da başka bir yazının parçasıdır. Aşağıdaki tabloda her birinin ne işe yaradığını ve nerede ayrıntılı anlatıldığını bulabilirsiniz:

Bağlantılar: lang ve dir, data-* öznitelikleri, hidden ve inert, tabindex ve klavye erişimi, popover özniteliği, template ve slot, ARIA nedir, XSS ve CSP, schema.org ve JSON-LD, başlık etiketleri. headingoffset, headingreset, anchor, autocorrect ve writingsuggestions gibi daha yeni öznitelikler için tarayıcı desteğine MDN uyumluluk tablosundan bakın.

Sık yapılan hatalar

• Aynı id'yi iki kez kullanmak: id tüm belgede benzersiz olmalıdır. Parça bağlantıları, <label> öğesinin for ilişkisi ve getElementById() gibi yöntemler tek bir öğe bekler.
• id içinde boşluk bırakmak: Boşluk kimliğin parçası sayılır; id="iletisim formu" yerine id="iletisim-formu" yazın.
• Rakamla başlayan id ve class: Geçerlidir ama CSS seçicilerinde kaçış gerektirir. Harfle başlayan adlar seçin.
• draggable'ı değersiz yazmak: Numaralandırılmış olduğu için draggable="true" yazılmalıdır.
• title ile etiketlemek: Form alanları için <label>, önemli bilgiler için görünür metin kullanın.
• style ile gizlemek ya da anlam vermek: Konu dışı içerik için hidden, anlam için doğru öğe kullanılır.
• Olay işleyici özniteliklerine yaslanmak: MDN bunları önermez; olayları JavaScript ile eklemek tercih edilir. Ayrıntılar için JavaScript rehberine bakabilirsiniz.
• inputmode'u doğrulama sanmak: inputmode="numeric" yalnızca klavyeyi değiştirir; girdinin sayı olmasını garanti etmez.

Sık Sorulan Sorular

id ile class arasındaki fark nedir?

id belgede tek bir öğeyi tanımlar ve bir öğenin yalnızca bir kimliği olur. class ise birden çok öğede tekrar kullanılabilen ve bir öğede birden fazla değer alabilen bir listedir.

Global öznitelikler gerçekten her öğede çalışır mı?

Her öğede yazılabilirler, ama MDN bazı öğelerde etkileri olmayabileceğini belirtir. Örneğin spellcheck düzenlenemeyen öğelerde genellikle bir şey değiştirmez.

contenteditable ile bir metin editörü yapabilir miyim?

Öznitelik bir öğeyi düzenlenebilir hale getirir ve yapıştırılan içeriğin biçimini korur ya da kaldırır; ancak kaydetme, biçimlendirme düğmeleri gibi işlevler JavaScript gerektirir. Basit metin girişi için <textarea> çoğu zaman daha uygun bir seçimdir; textarea yazısına bakabilirsiniz.

Kendi özniteliklerimi ekleyebilir miyim?

Özel bilgi taşımak için standart yol data- önekiyle başlayan özniteliklerdir. Uydurma, öneksiz öznitelikler yerine data-* özniteliklerini kullanın.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · data-* öznitelikleri · lang ve dir · hidden ve inert · tabindex ve klavye erişimi · ARIA nedir