Bilmeniz Gereken 10 HTML5 Etiketi

1-<video> ve <audio>
Flash, Silverlight ve benzer teknolojilerin kullanılmasının en önemli sebebi multimedya veriler oynatmak. HTML5 ile tarayıcılar yeni video ve ses kontrollerini destekliyor. Bu yüzden eski teknolojiler kullanım açısından küme düşüyor. Tarayıcılar artık doğal olarak kontrolleri gösteriyor ve JavaScripte takılmadan işlenebiliyor. Kodek karışıklığı sizi korkutmasın! Birden çok kaynak gösterebilirsiniz içerik için yani multimedya içeriğiniz tarayıcınızın desteklediği kodek ayırtmaksızın çalışacaktır.

2-<input> tipi özellikleri
Yeni <input> elementi artık özellikleri için daha fazla değere sahip ve tarayıcılar değerine göre bazı güzel şeyler yapabiliyorlar. Mesela type özelliğini "datetime" olarak ayarlayın ve doğru zamanı seçmeniz için tarayıcı size takvim ve saat kontrollerini gösterecektir, bu eskiden JavaScript gerektirirdi. Baya çeşitli özellik tipleri var. Bunları öğrenmeniz bir çok JavaScript işinden sizi kurtaracaktır.

3-<Canvas>
<canvas> etiketi size HTML'de çalışabilmeniz için bitmap tarzında bir yüzey açacaktır tıpkı GDI+ veya .NET Image objesi gibi. Şu anlık mükemmel olmasada uzun zamandır HTMLde geleneksel bir zayıflık olan çeşitli grafik çalışmaları veya tablo çalışmaları yapılabilir ve bu sadece başlangıç!

4-<header> ve <footer>
<header> ve <footer> yeni etiketimiz. Bu iki etiket hiç bir şeyi kendi üstüne veya altına almayan bir <div> aslına bakarsanız. Fakat bu iki etiket arama motorları kazançlarınızı uzun zamanlı kesecektir çünkü artık arama motorları gerçek içerik ve kullanıcılar için önemli fakat gerçek içerik olmayanları ayırt edebilecek seviyedeler.

5-<article> ve <section>
Bu etiketler arama motorlarında sizi yükseltecek iki yeni etiket. Article yani makaleler bir çok section yani bölümden oluşabilir bir bölümde bir çok makaleden oluşabilir. Kafa karıştırıcı mı? Pek değil aslında. Bir makale(article) blok bir içeriği sunar. Bunun yanında bir bölüm(section) bundan çok daha büyük bir parçayı gösterir. Örnek olarak bir blog sayfasına bakıyorsanız ön sayfa bütün postları listeleyen bir bölüm(section) olabilir ve her bir post bir çok gerçek post ve yorum içeren bir bölümü(section) içeren başka bir makale(article) olabilir.Basit olarak iç içe kullanılıyorlar.

6-<output>
Yeni <output> etiketi eşsiz! İçindeki veriyi dinamik olarak JavaScript ile üreten bir yapı sunuyor. Bu yeni etiketin direkt JavaScript ile DOM üzerinden değiştirilebilen ve ekranda gösterdiği şeyi değiştiren bir özelliği var. İşleri şu anki yollarla yapmaktan daha elverişli bir yapı sunuyor.

7-<details>
Her web sitenin açılır/kapanır bir yazı bloğuna ihtiyacı olduğu görülüyor. JavaScriptle ve server tabanlı kodlarla yazılması ne kadar kolay olsada <details> etiketi bu yöntemlerden bile daha kolay hale getiriyor. Tam olark yıllardır yaptığımız şeyin aynısını yapıyor. Basit bir tıklanıldığında açılan ve kapanan bir içerik bloğu oluşturuyor.<details> etiketi şu anlık yatay kullanıma uygun olmasada yakında geleceğine eminiz.

8-<figure> and <figcaption>
<figure> aslında içerik için basit bir taşıyıcı (genellikle resimler ama herşey olabilir) ve <figcaption> ( <figure> etiketinin içine alınan) size <figure> etiketindeki içerik için başlık veya altyazı yazmanızı sağlıyor. Örnek olarak yıllık satışları gösteren 4 resmi <figure> etiketine aldınız ve <figcaption> etiketi ile altına " 1989-1993 Yılları Arası Satış Büyümesi " yazdınız. Resimler yan yana gösterilirken altta 4 tanesini takiben bir yazıyla gösterilir.

9-<progress>and <meter>
<progress> ve <meter> etiketleri çok benzerler. <progress> etiketini bir işlem için veya bir şeyin ne kadar tamamlandığını göstermek için kullanabilirsiniz. Ayrıca bilinmeyen bir süre içinde belirsiz modu vardır(veritabanı aramaları gibi). <meter> etiketi bir değerin ölçümleri ve göstergeleri için kullanılır(Termometreler, kullanılan miktar..). Birbirine benzer kullanılıyor olabilirler fakat farklı anlamları vardır.

10-<datalist>
<datalist> etiketi aynı bir combo box gibi davranıyor. Sistem size önerilerden yapılmış bir liste çıkarıyor fakat kullanıcılar istedikleri gibi kendi girişlerini yapmakta özgür. Bu etiketin tonlarca kullanılma şekli var mesela daha önceden kullanıcının geçmişinde olan maddeleri göstererek arama yapan bir kutu. JavaScript(veya JavaScript kütüphaneleri) gerektiren hatta baya uğraştıran bir işlemi HTML5 ile basitçe yapabiliyorsunuz bu sayede.