Bir HTML Etiketine Nasıl Öznitelik Eklenir?

HTML dili bir dizi öğeyi içerir. Bunlar paragraflar, başlıklar, bağlantılar ve resimler gibi yaygın olarak kullanılan web sitesi bileşenlerini içerir. Üstbilgi, nav, altbilgi ve daha fazlası dahil olmak üzere HTML5 ile tanıtılan yeni öğeler de vardır. Bu HTML öğelerinin tümü, bir belgenin yapısını oluşturmak ve anlam vermek için kullanılır. Öğelere daha da anlam katmak için, onlara öznitelikler verebilirsiniz.

Temel bir HTML açılış etiketi karakteri ile tamamlarsınız. Örneğin, açılış paragraf etiketi şöyle yazılırdı:

HTML etiketinize bir özellik eklemek için, önce etiket adından sonra bir boşluk koyun (bu durumda "p" dir). Ardından kullanmak istediğiniz özellik adını ve ardından eşittir işareti eklersiniz. Son olarak, öznitelik değeri tırnak içine alınacaktır. Örneğin:

Etiketler birden fazla özniteliğe sahip olabilir. Her özelliği diğerlerinden boşlukla ayırırsınız.

Gerekli Niteliklere Sahip Öğeler

Bazı HTML öğeleri aslında amaçlanan şekilde çalışmasını istiyorsanız öznitelikleri gerektirir. Görüntü elemanı ve bağlantı elemanı bunun iki örneğidir.

Resim elemanı "src" özelliğini gerektirir. Bu özellik tarayıcıya o konumdaki kullanmak istediğiniz resmi bildirir. Özelliğin değeri, resmin dosya yolu olur. Örneğin:

Bu öğeye, "alt" veya alternatif metin özelliğine başka bir özellik eklediğimi fark edeceksiniz. Bu teknik olarak resim için gerekli bir özellik değildir, ancak bu içeriği her zaman erişilebilirlik için dahil etmek en iyi uygulamadır. Alt özelliğin değerinde listelenen metin, bir resmin bir nedenle yüklenmemesi durumunda görüntülenecek olan metindir.

Belirli nitelikler gerektiren başka bir öğe de bağlantı veya bağlantı etiketidir. Bu öğe, "köprü metni referansı" anlamına gelen "href" özelliğini içermelidir. Bu, "bu bağlantının nereye gitmesi gerektiği" deyiminin süslü bir yoludur. Resim öğesinin, hangi resmin yükleneceğini bilmesi gerektiği gibi, bağlantı etiketi de Nerede olması gerektiğini bil. Bir bağlantı etiketinin nasıl göründüğü:

Bu bağlantı şimdi bir kullanıcıyı bir özelliğin değerinde belirtilen web sitesine getirecektir. Bu durumda, ana sayfasıdır.

CSS Kancaları Olarak Özellikler

Niteliklerin başka bir kullanımı, CSS stilleri için "kanca" olarak kullanıldığı zamanlardır. Web standartları, sayfanızın yapısını (HTML) stillerinden (CSS) ayrı tutmanız gerektiğini belirttiğinden, yapılandırılmış sayfanın web tarayıcısında nasıl görüntüleneceğini dikte etmek için bu özellik kancalarını CSS'de kullanırsınız. Örneğin, bu belgenizi HTML belgenize ekleyebilirsiniz.

Bu bölmenin siyah (# 000) arka plan rengine ve yazı tipi boyutunun 1,5em olmasını istiyorsanız, bunu CSS'nize ekleyebilirsiniz:

.featured {background-color: # 000; yazı tipi boyutu: 1,5em;}

"Öne çıkan" sınıf özniteliği, bu alana stil uygulamak için CSS'de kullandığımız bir kanca görevi görür. İstediğimizde burada bir ID özelliği de olabilirdik. Her iki sınıf ve kimlik evrensel niteliklerdir, yani herhangi bir öğeye eklenebilir. Bu öğenin görsel görünümünü belirlemek için her ikisi de belirli CSS stilleriyle hedeflenebilir.

Javascript ile ilgili

Son olarak, belirli HTML öğelerindeki özelliklerin kullanılması da Javascript'te kullanabileceğiniz bir şeydir. Belirli bir ID özelliğine sahip bir öğe arayan bir komut dosyanız varsa, bu HTML dilinin bu genel parçasının başka bir kullanımıdır.