Bilmeniz Gereken 10 HTML5 Etiketi

 

1-<video> ve <audio>

Flash, Silverlight ve benzer teknolojilerin kullanılmasının en mühim 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 organik olarak kontrolleri gösteriyor ve JavaScripte takılmadan işlenebiliyor. Kodek karışıklığı sizi korkutmasın! Birden fazlaca kaynak izah edebilirsiniz içerik için şu demek oluyor ki 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 çok değere haiz ve tarayıcılar değerine nazaran bazı güzel şeyler yapabiliyorlar. Sözgelişi type hususi durumunu "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. Bu tarz şeyleri öğrenmeniz bir fazlaca 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+ yada .NET Image objesi benzer biçimde. Şu anlık muhteşem olmasada uzun süredir HTMLde geleneksel bir zayıflık olan çeşitli grafik emekleri yada tablo emekleri yapılabilir ve bu yalnız başlangıç!

4-<header> ve <footer>

<header> ve <footer> yeni etiketimiz. Bu iki etiket hiçbir şeyi kendi üzerine yada altına almayan bir <div> aslına bakarsanız. Fakat bu iki etiket arama motorları kazançlarınızı uzun zamanlı kesecektir bu sebeple artık arama motorları gerçek içerik ve kullanıcılar için mühim 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 şu demek oluyor ki makaleler bir fazlaca section şu demek oluyor ki bölümden oluşabilir bir bölümde bir fazlaca makaleden oluşabilir. Kafa karıştırıcı mı? Pek değil aslına bakarsak. Bir yazı(article) blok bir içinde ne olduğu sunar. Bunun yanında bir bölüm(section) bundan fazlaca daha büyük bir parçayı gösterir. Örnek olarak bir blog sayfasına bakıyorsanız ön sayfa tüm postları listeleyen bir bölüm(section) olabilir ve her bir post bir fazlaca gerçek post ve yorum içeren bir kısmı(section) içeren başka bir yazı(article) olabilir.Kolay olarak iç içe kullanılıyorlar.

6-<output>

Yeni <output> etiketi eşi olmayan! İçindeki veriyi dinamik olarak JavaScript ile üreten bir yapı sunuyor. Bu yeni etiketin direkt JavaScript ile DOM üstünden 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 senelerdir yaptığımız şeyin aynısını yapıyor. Kolay bir tıklanıldığında oluşturulan 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ına bakarsak içerik için kolay bir taşıyıcı (çoğu zaman resimler fakat herşey olabilir) ve <figcaption> ( <figure> etiketinin içine alınan) size <figure> etiketindeki içerik için başlık yada altyazı yazmanızı sağlıyor. Örnek olarak senelik 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 fazlaca benzerler. <progress> etiketini bir işlem için yada bir şeyin ne kadar tamamlandığını göstermek için kullanabilirsiniz. Ek olarak bilinmeyen bir süre içinde belirsiz modu vardır(veritabanı aramaları benzer biçimde). <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 değişik anlamları vardır.

10-<datalist>

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

Başka etiketler?

Kullanışlı bulduğunuz başka etiketler var mı? HTML5 tecrübelerinizi Web Studio üyeleri ile paylaşın.