HTML5 ile biliyoruz ki HTML’e bircok yeni etiket geldi. Bu yazıda HTML5 ile örnek bir websitesi şablonu hazırlayacağız, ve standart bir HTML5 şablonda kullanılacak etiketleri inceleyeceğiz.
Hazırlayacağımız bu şablon aşağıda ki kısımları icerek :
- Header
- Footer
- Nav
- Article
- Content
HTML5 ile hazırlanmış bir websitesi standart olarak yukarıda ki komutları icermelidir.
HTML5 öncesinde sitelerinde kodlarken üst alan, sağ kısım, orta kısım, alt kısım gibi alanları sadece div id= ya da div class= ile tanımlar ve icerikleri cekerdik. HTML5 ile beraber bu alanları belirten, kapsayıcı etiketler geldi.
Mesela eskiden kullandığımız bir yapıyı örnek göstereyim;
<div id="solkisim"> <p>icerikler</p> <p>icerikler</p> <p>icerikler</p> </div>
Bu yapı HTML5 ile şuna dönüştü
<nav> <p>icerikler</p> <p>icerikler</p> <p>icerikler</p> </nav>
Bunu ana yapı olarak düşünün. Nav’a yine ID, class atayabilir, icerisine kendi menülerinizi yerleştirebilirsiniz.
Girişte anlattığım şablonun kısımlarını, etiketlerin sayfada ki yerleşimini görselleştirdim, ona bakalım.
Yukarıda ki görsel de HTML5 etiketlerinin sayfada ki yerleşimini göstermeye calıştım. Şimdiye kadar bana HTML5 ile alakalı en cok gelen sorular şu şekilde; “Bu etiketleri kullanınca ne olacak? “, “Neden Kullanıyoruz?”
Bu sorunun cevabı kısaca şöyle acıklanabilir; Internet semantik bir yapıya bürünüyor. İcerikleri tarayıcılar, arama motorları, diğer yazılımlar daha iyi anlayabilmeli ki, kullanıcıya daha doğru icerikler sunabilsin. Bunun bir parcası olarakta kodların anlamlaşması gerekli. Bu tür standartların kullanılma amacı da budur.
html5 ile calışmak isteyenlere bir iki ipucu ve kaynak
- Html dosyanızın başında mutlaka doctype kullanın.
- Kodlamada kullandığınız html5 etiketlerini sadece sayfanın etrafına yerleştirmeyin. Onlara da CSS yazın..
- Html5 neden daha semantik isimli yazımızı okuyun.
- Bir başka HTML5 kaynağında cok sayıda html5 örneğini inceleyebilirsiniz Html5 rocks