Image may be NSFW.
Clik here to view.
W3C’ye selam olsun, HTML5 hayatımızı değiştirmeye devam edecek. Bu yazımda WordPress sitenizi HTML5 uyumlu hale getirmekten bahsedeceğim.
HTML5 ‘in genel yapısı şu şekilde;
<!doctype html> <head> </head> <body> <header> </header> <section id="content"> <article> <header> </header> </article> </section> <aside> <nav> </nav> </aside> <footer> </footer> </body> </html>
Gördüğünüz gibi pek de farklı değil, yeni etiketler var. Eğer bunları CSS dosyamızda
article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
şeklinde tanımlarsak div ‘lerimizdeki classlardan bir farkları olmayacaklar.
- header: slider, menu, logo gibi özel olmayan, klasik ögelerinizi yerleştirin. Genellikle article içersinde kullanılır.
- section: bu etiket ögelerinizle rahatca sıralama yapmanızda işinize yarar. Bölümlerde, galeri kodlarında, içerik ve yorum sıralamalarında kullanılır.
- article: sayfanızdaki özellikle vurgulamak istediğiniz ögede kullanın. Ayrıca header etiketi altında kodlarsanız SEO açısından artı puan demektir.
- aside: yan menünüz bu etiket içersinde olmalı.
- nav: navigasyonunuzu kapsayacak etiket. İlla ki aside içersinde olmasına gerek yok, rahatlıkla diğer etiketlerin altında kullanılabilir.
- footer: footer, alt kısım alanı için etiketimiz. Burada dikkat etmeniz gereken birden fazla footer’a sahip olabileceğiniz fakat hepsinin section ile ayrılması ve section’ın da doğal olarak body içersinde yer alması gerekiyor.
article, header, footer, section gibi etiketler birden fazla defa kullanılabilir.
Kısa kesmek gerekirse size önereceğim şablon şu şekilde;
<section id="content"> <article> <header> </header> <p> </p> <footer> </footer> </article> </section>
Header’ın altında h3 kullanmanız SEO açısından oldukça yardımcı olacaktır, h1, h2, h3 veya hx gibi alt alta diziyorsanız HTML5 destekli hgroup altında kullanın. Yani;
<hgroup> <h3>Title</h3> <h4>Subtitle</h4> </hgroup>
Meta taglarınızın footer’ın içersinde yer alması SEO’nuzu destekleyecektir. Ayrıca yorum şablonunda kullanmanızı şiddetle tavsiye ettiğim isim, website gibi özelliklerin HTML5 uyumlu halleri aşağıda.
<input type="text" name="author" id="comment-form-author" placeholder="Your name" value="" size="22" tabindex="1" required="required"> <input type="email" name="email" id="comment-form-email" placeholder="Your email" pattern="[^ @]*@[^ @]*" value="" size="22" tabindex="2" required="required"> <input type="text" name="url" id="comment-form-url" placeholder="Your website" size="22" tabindex="3" />
Bu şekilde şablon oluşturduğunuzda veri alanındaki ‘Your name’ gibi text alan, kullanıcı tıkladığında kaybolacak ve kullanıcının yazdıkları yerini alacak. Oldukça şık.
Ayrıca http://html5demos.com ‘da oldukça kullanışlı ve yenilikçi örnekler var.
Teşekkürler.