HTML 5 Nedir?

Html 5 Nedir?

Sitemizdeki bu konudan önceki tüm Html konuları HTML 4.1 verisoyunu kullanılarak anlatılmıştır. Şu an itibariyle dünyada en çok kullanılan Html versiyonu da yine Html 4.1 versiyonudur. 

Html 5 versiyonu henüz deneme aşamasında olsa da tarayıcıların son versiyonları ile gayet uyumlu çalışabilmekte ve gereksiz kod kalabalığının önüne geçmek için büyük avantajlar sağlamaktadır. 

Html 5'in getirdiği en büyük yenilik, yeni Html etiketleridir. Header, section, nav, footer gibi bir çok yeni etiket kullanıma girmiştir. Bu yeni etiketlerin isimleri web tasarımcıların tercihleri incelenerek belirlenmiştir.

Yapılan araştırmalarda web tasarımcıların, sitenin başlık bilgilerini yerleştirmek için kullandıkları katmana (div) en çok "header" ismini verdikleri görülmüş ve bu isimde yeni bir etiket oluşturulmuştur.

Dolayısıyla eskiden <div id="header"> şeklinde oluşturduğumuz başlık kısmını, artık <header> etiketi ile oluşturabiliriz. Yine amacına uygun diğer etiketleri de kullanarak, sayfalarımızı Html 5 ile kolayca ve sade bir biçimde hazırlayabiliriz.

Öncelikle Html 5 ile gelen yeni etiketlerin en önemlilerine bir göz atalım. Burada yer almayan diğer etiketleri, internet ortamında arayarak bulabilirsiniz.

Html 5 Etiketleri

header etiketi

Sitenin ya da sayfanın başlık bilgileri burada yer alır.

section etiketi

Sitelerin ana içerik kısmını içine alır.

article etiketi

Makale tarzında, konu anlatım ve metinsel içeriklerin yer aldığı kısımdır.

footer etiketi

Sitenin en altında bulunur. Alt bilgileri içerir.

nav etiketi

Menü gibi elemanlar ile sitede navigasyonun sağlandığı kısımdır.

hgroup etiketi

H1, H2 gibi elemanların bir arada gruplanmasıyla oluşan başlık grubudur. Birden fazla başlık etiketi kullanılacaksa hgroup etiketi içerisine alınabilir.

embed etiketi

Geçmişte flash animasyon (swf) dosyalarını sayfamıza yerleştirmek için çok kullanılırdı. Embed etiketi ile sayfamıza resim, ses, video, animasyon gibi çok farklı türde dosyalar ekleyebiliriz.

embed etiketi içerisinde type parametresi ile ilgili dosyanın türü (MIME türü) belirtilir. Örneğin mp4 dosyası eklemek için type parametresi şu şekilde kullanılır:

Type parametresine yazılacak değer dosyanın türüne bağlıdır. Tüm MIME türlerinin listesine ulaşmak için tıklayabilirsiniz.

video etiketi

Video dosyasını sayfamızda istediğimiz yere eklemeye yarar. Bir çok video formatı desteklenmektedir.

Yukarıdaki örnekte olduğu gibi hangi dosyanın kullanılacağı source etiketi ile belirtilir. Birden fazla source etiketi kullanılmasının sebebi ziyaretçinin tarayıcısı ilk dosyayı çalıştıramazsa ikinciyi denesin diyedir. Şayet hiçbir dosya çalıştırılamazsa en sondaki metin videonun yerine görüntülenecektir.

audio etiketi

Sayfaya ses oynatıcı bir modül ekleyerek istenen ses dosyasının çalınmasını sağlar.

figure etiketi

Konuyla alakalı görseller, grafikler vb burada yer alır. <figcaption> etiketi kullanılarak kullanılan nesneye alt bilgi verilebilir.

aside etiketi

Bulunduğu yerdeki içerik ile ilgili önemli ve alakalı bilgiler aside etiketleri arasına yazılabilir.

mark etiketi

Yazı içerisinde özellikle üstünde durulan, anahtar kelimeleri belirler. Arama motorları açısından çok önemlidir. 

canvas etiketi

Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.

progress etiketi

İşlem süreci göstergesi ekler.

caption etiketi

Başlık olarak düşünülen metinleri düzenler.

details ve summary etiketleri

Bir başlığa tıklandığında alta doğru açılarak, içerik kısmının görüntülenmesi ya da gizlenmesini sağlayan yapıdır. Normalde jquery ya da javascript ile yapılabilecek bu iş son derece basitleştirilmiştir. 

time etiketi

Tarih ve saat verilerini kapsar.

datalist etiketi

Açılır liste gibi elemanlara otomatik tamamlama özelliği verilmesini sağlar. Yani kullanıcı fare ile listeden seçebileceği gibi kutuya yazarken olası seçenekler altta gösterilir. Bu özellikde şimdilik sadece Chrome'da çalışmaktadır.

KONU İLE İLGİLİ ÖRNEKLER