“”HTML””4’ün yavaş yavaş beklentilere cevap verememesiyle birlikte yeni arayışlara giren tasarımcılar div ayraçlarını “”CSS”” ile verimli şekilde kullanmaya başlamışlardı. Ne kadar iyi kodlamalar yapılsa da HTML4’ün artık yetmediği ortaydı.HTML5 ise dilde yalınlık ilkesini amaç edinen yeni özellikleri ile kullanıcıların işini kolaylaştıracak. Daha az kodla sitelerimize aynı görünümleri verebileceğiz. Alistapart kaynağında okuduğum html5 içeriğinde bu yalınlaşma gayet iyi açıklanmış.

html4 ile site dizayn ederken
html4 ile site dizayn ederken div kullanıyoruz

Şu sıralar sıkça kullandığımız “div” ayraçlari ile sitemize şekil verme işlemini html5’in yeni ayraçlari ile bırakacağız. header, nav, article, section, aside ve footer başta olmak üzere yepyeni ayraçlar tanımlamış. Yukarıdaki resimde göreceğiniz kullanım şekli “”html5″” ile birlikte yerini aşağıdaki resimdeki kullanım şekline bırakacak.

html5 ile site dizayn ederken
html5 ile site dizayn ederken yeni ayraçlar kullanıyoruz

header ayraçlari arasına sitemizin logosunu yada başlığını koyacağız. nav ayraçlarinin arasına menümüzü yerleştireceğiz. Atricle bizim sectionlarımızı yani içeriğimizi bünyesinde bulunduracak. Aside ise yan münelerimiz için kullanacağımız tag olacak.*Yeni Video ve Audio ayraçları
Yeni video ve audio ayraçları ile son zamanlarda popüler olan video ve ses sağlayıcılarda embed olarak kullanılan ayraç yerine daha kullanışlı ve özellikli olanlar kullanılacak. Örneğin;

yeni video kodu kullanımı
yeni video kodu kullanımı

Bu örnekte poster değeri videoyu oynatmadan önce göreceğimiz resmi tanımlamakta. Video ayraçının içine koyacağımız “a” ise onun üstünde link vermemizi sağlayacak. Ayrıca source src olarak tanımlanan bilgilerde tarayıcının uyumlu olduğu formata göre dosya gösterimi yapabilmemizi sağlıyor.Aynı şekilde audio ayraçı içide “a” bulundurabiliyor.Buradaki yararlı kaynağı kullanarak türkçeleştirdiğim yazıyı ingilizce olarak da okuyabilirsiniz. Diğer kaynaklar ise bildirgeç, html5.org ve w3.org.