En sonki HTML dersimizde div ve span etiketini işlemiştik. HTML5 ile gelen anlamsal etiketlerden bahsetmiştik. Bugunkü dersimizde HTML5 Nedir? Nasıl Kullanılır? Faydaları Nelerdir? konusunu işleyeceğiz.
HTML5 Nedir?
HTML4 ne kadar yeterli görünüyor olsada CSS ile yazıla fazladan kodlar hatalara sebep oluyordu. Bunu önlemek için HTML5 geliştirildi. HTML5 ile gelen esnek yapı kod hatalarını aza indiriyor. Bununla birlikte kod hataları kısmen çözüldü. CSS ile olan uyum sorunu giderildi. Beraberinde getirdiği yeni taglar(etiketler) ve elementlerle birlikte hem içerik ve görsel olarak hemde arama motorlarına büyük kolaylıklar sağladı. Hala geliştirilme aşamasında olsada bugün birçok web tarayıcısı HTML5’i tercih etmekte. HTML5 önceki sürümlere göre bize ne nasıl kolaylıklar sağlıyor? HTML5’in faydaları neler?
HTML5 Faydaları Nelerdir?
- Video ve ses ekleme : HTML’in önceki sürümlerinde video ve ses eklemek için programlar kullanmak gerekiyordu. Bu da sıkça hata almamıza sebep olabiliyordu. HTML5 bu sorunun önüne geçti. Peki HTML5 ile nasıl video oynatabiliriz? Örneğin;
<video width="320" height="240" controls>
<source src="video.ogg" type="video/ogg">
<source src="video.mp4" type="video/mp4">
<p>Tarayıcınız bu özelliği desteklemiyor.</p>
</video><source> etiketi <audio> ve <video> gibi medya tanımları için birden fazla medya kaynağı tanımlamada kullanılır. Yukarıdaki örnekte iki tane <source> etiketi kullanıldı neden?
Bu kodlar tarayıcının doğru seçimi yapmasını sağlar. Sayfayı ziyaret ettiğimiz tarayıcımız .ogg biçimini desteklemiyor ise bir sonrakini .mp4 biçimini çalıştıracaktır. Tarayıcı tanımladığı ilk dosyayı kullanır
“controls” özelliği, aşağıdaki gibi “play, pause, ses” gibi denetimleri ekler.
Video için gerekli genişlik ve yükseklik ayarlarını belirtmek iyi bir fikirdir. Eğer ayarlanırsa, video için gerekli yükseklik ve genişlik sayfa yüklenirken ayarlanır. Ancak, bunlar yoksa, tarayıcı ne kadar alan ayıracağını bilemez.
- Çevdimdışı önbelleğe alma : Ziyaretçilerin aktif interneti olmadan siteye ait bazı unsurların gösterilmesini sağlayabiliriz. Ziyaretçinin interneti gitse bile web sitesi çalışır durumda olacaktır.
- Çapraz tarayıcı uyumluluğu : HTML5 sürümünün bir diğer faydası ise Chrome, Safari, Opera, Internet Explorer gibi tarayıcılarla uyumlu bir şekilde çalışmasıdır. Bu durum yeni olan kodların bu tür tarayıcılarda etkin bir şekilde çalışmasını sağlamıştır.
- Mobil optimizasyon : Önceki sürümlerdeki en büyük sorunlardam biri web sitesinin mobile duyarlı olmamasıydı. HTML5 bu sorunu ortadan kaldırdı. Duyarlı (responsive) web siteleri, mobil cihazların her türlü çözünürlükleri arasında tam işlevsellik sunan HTML5 kullanılarak inşa edilmiştir.
Bugunkü yazımızda HTML5 Nedir? ve Faydaları Nelerdir? sorularını yanıtlamaya çalıştık. Bir sonraki yazımızda kaldığımız yerden devam edeceğiz. Linkteki videodan konu tekrarı yapabilirsiniz.