PAYLAŞ
HTML5 Söz Dizimi Kuralları
HTML5 Söz Dizimi Kuralları

HTML5, XHTML gibi XML temelli olmadığı içi programcılara çok esnek bir söz dizimi yapısı sunar. Örneğin; bir HTML5 sayfası oluştururken html, head, body etiketlerini belirli şartlar altında kullanmayabilirsiniz. Bu durumda sizin yazmadığınız html, head, body etiketleri tarayıcı tarafından sayfaya dahil edilir. Ancak bu durum kullanışlı değildir. Çünkü bu durumda IE de problemler yaşamanız doğaldır.

Söz dizimi kuralları;
  • Açılan tüm etiketler kapatılmalıdır. Bazı etiketler bir içerik barındırmaz, sakladıkları içerikler etiketin bir özelliği ile tanımlanır. Bu durumda etiket açılış tag inde / karakteri ile kapatılır. Eğer elemanımız void element ise bu durumda / karakterinin bu elemanlar üzerinde bir etkisi olmayacaktır. Yani bu karakteri kullanmayabilirsiniz. Void element açılış kapanış tag leri arasında bir metin ya da başka bir eleman bulunmayan, yani sadece açılış etiketi bulunan elemanlardır. Fakat elemanımız foreign element ( namespace-isim alanı içeren elemanlar ) ise, bu durumda açılış tag i / karakteri ile kapatılmalıdır.

ÖRNEK


<a>link // Yanlış, kapanış etiketi yok
<p>Açıklama<p> // Yanlış, kapanış etiketi yok
<div>Div eleman içeriği</div> // Doğru
<span></span> // Doğru
<meta charset=”utf-8″> ya da <meta charset=”utf-8″/> // ikisi de doğru


Sadece açılış etiketi bulunan tüm elemanları kapatmadan önce / karakterini kullanınız. Örneğin; <img src=”ana.jpg” alt=”ana_resim” />

  • İç içe girmiş, bir biri içerisine yuvalanmış elemanlarda elemanların kapanış sırasına dikkat edilmelidir. İlk önce açılan etiket, en sonda kapatılmalıdır.

<div>Div <em>Elemanı <span>içeriği </span></em></div> // Doğru
<div>Div <em>Elemanı <span>içeriği </em></span></div> // Yanlış


Etiket içerisinde kullanılan özellik isimleri büyük ya da küçük harfle yazılabilir. Özelliğin değeri kendisi ile aynı ismi taşıyorsa, sadece özellik adı yazılabilir. Özellik değerleri eğer bir boşluk içermiyorsa, tırnak içerisine alınmayabilir ya da isterseniz özellik isimlerini tek tırnak ya da çift tırnak içerisine alabilirsiniz.

ÖRNEK


<input type=”checkbox” checked />


checked özelliğinin değer “checked” olduğundan yazılmadı. Sadece özelliğin adı yazıldı.


<img src=”1.jpg” alt=’resim1′ />


alt özelliğine atanan metin tek tırnak içerisine alınarak yazıldı.


<div class=”header”></div>


class özelliğine atanan değer tırnak içerisine alınmadan yazıldı.

Yukarıda ki kullanımlar HTML5 için doğru olarak kabul edilir.

Etiket ismi, etiket içinde kullanılan özellik ismi ya da özelliğe atanan değerleri küçük harfle yazınız. Değerleri çift tırnak içerisine alarak özelliklere atayınız.