HTML5 Sayfa Yapısı
HTML5 öncesinde sitemizdeki bölümleri div tagleri aracılığıyla hazırlardık. Div tagleri çok genel bir kullanım olduğu için arama motorlarının sitemizi analizi (HTML5′e göre) zor olurdu.
HTML5′te ise sitenin her bölümü için berirlenmiş özel tagler sayesinde, site hem daha hızlı oluyor hem de arama motorlarında daha çabuk index alıyor.
Öneğin, HTML 4.01 ile kodlanmış bir web sayfası:
HTML5 ile beraber aynı yapı:
Tahmin edebileceğiniz gibi; header başlık bölümünü, nav menü bölümünü, section içerik bölümünü, article yazı bölümünü ve footer ise alt kısmı belirliyor. Böylece divler oluşturarak ID değerleri verme zahmetinden kurtuluyoruz.
Zahmetsiz Form Elemanları
HTML5 ile beraber yorum yazma, iletişim, yazı ekleme gibi formlar oluşturmak işkence olmaktan çıkıyor.
Girilmesi zorunlu alanlar
Örneğin, önceleri formda eksik kalmasını istemediğimiz bölümler için kontrol fonksiyonları yazardık. Ya javascript ile kullanıcıyı, formu post etmeden önce uyarırdık ya da post ettikten sonra geri döndürürdük. Tahminimce bu angarya işler benim olduğu kadar sizin de hoşunuza gitmiyordu.
HTML5 ile beraber bu sorunu halletmiş olduk, hem de son derece şık bir yöntemle:
Geçerli e-posta adresi kontrolü
Özellikle üyelik formları tasarlarken karşımıza çıkan sorunlardan biri de kullanıcının geçerli e-posta adresi verip vermediğini kontrol etmekti. Kimi zaman PHP içindeki foksiyonlardan faydalandık, kimi zaman regex patternleri oluşturup kontrolü yaptık, ama hiç birisi HTML5 kadar kolay olmamıştı.
Sadece type parametresine email değeri vermemiz yeterli:
Tarih girdileri için özel alan
Kimi zaman da kullanıcıdan tarih (doğum tarihi vs.) bilgisi almamız gerekebiliyor. Çoğunlukla javascript ile yazarız ya da bir DateTimePicker eklentisi kullanırız. HTML5 ile beraber bu yük de sırtımızdan kalkıyor.
Tek yapmamız gereken type parametresini date olarak vermek:
HTML5 ve Medya Oynatıcılar
Bazı projelerde sayfa içinde müzik veya video oynamatmamız gerekebiliyor. Fakat bildiğiniz gibi Flash Player site hızı için ölümcül olduğu gibi, SEO için de facia. HTML5 ile hız konusuna çözüm geliyor, üstelik arama motorları site içeriğini daha iyi analiz edebiliyor.
Müzik çalar
En basit şekliyle bir müzik çalar:
Parametre olarak iki dosya göstermeniz gerekiyor, biri ogg diğeri mp3 uzantılı müzik dosyaları.
HTML5 desteklemeyen tarayıcılar için, embed koduyla media player aracılığıyla oynatabilirsiniz.
Dilerseniz, siteye eklediğiniz müziğe bir de altyazı özelliği ekleyebilirsiniz. Track taginin src özelliğine parametre olarak vtt uzantılı altyazı dosyanızı göstermelisiniz.
Video oynatıcı
Web sayfalarının en büyük düşmanları da flash video oynatıcılar. Bildiğiniz üzere hem sayfayı çok yavaşlatıyor hem de Google tarafından çöp içerik olarak değerlendiriliyor.
HTML5 video oynatıcı kullandığımızda ise, oynatıcı client taraflı olduğu için sitemizi kasmıyor. Hem site hızlı oluyor, hem gereksiz bandwidth harcanmıyor hem de sitemiz SEO uyumlu hale geliyor.
HTML5 video componentinin en basit şekilde kullanımı:
Video tagine iki parametre veririz. Biri; mp4/flv/webm uzantılı, diğer ise ogg uzantılı olmalıdır.
Kaynak: Yeni nesil bir web sitesi hazırlamak (HTML5)
