Bircok mobil ve masaustu web tarayıcılarında desteklenmektedir.
HTML5 etiketlerinden bazıları: Kod:
,,,
Bunları hep beraber inceleyeceğiz.
Once şu resimde neyin ne olduğu hakkında daha cabuk bir fikir sahibi olmanız icin kabataslak bir yapı oluşturdum.
Yukarıdaki resimde bariz bellidir ki header(ust kısım),nav(menu),footer(alt kısım) doğrudan kelime anlamları doğrultusunda yerleştirilmiştir.Ki zaten işin kolaylığı da bu kelimelerdedir.
header Etiketi
header bir sayfa veya bolum icin ust kısmı belirtir.Tek bir sayfada birkac header etiketi olabilir.
header etiketimizi ornekleyelim.Stilimiz şu şekilde olsun:
Kod:
header
HTML yapısı şu şekilde olacak
Kod:
Site Başlık
yapİstenirse icerisine diğer HTML etiketlerinde olduğu ul ve benzeri tanımlamalar eklenebilir./yap
nav Etiketi
Nav etiketi genellike menu bağlantılarını tanımlar.Nav etiketi sadece sitedeki menu bağlantılarının blok yapısı icin kullanılmalıdır.
Ornek vermek gerekirse,
Kod:
nav nav ul nav ul li
Yukarıdaki stil kodlarına sahip belgenin HTML yapısı şu şekilde olacaktır:
Kod:
Gorduğunuz gibi HTML5 in bize sunmuş olduğu nav etiketine bir liste tanımlattık.Sizde nav etiketinin icine dilediğiniz gibi sınıf ve ozellik ekleyebilirsiniz.
section Etiketi
section etiketi bir sayfada yeni bolumler tanımlar.Bir article etiketinin icerisine de eklenebilir,footer da.
Ornek:
CSS
Kod:
section section.bilgi
HTML yapısı
Kod:
Sağ taraf Sol Taraf
Oluşturduğunuz sectionların icine stil ve sınıf tanımlayabilirsiniz.
article Etiketi
article bir belge icinde bağımsız alan oluşturmak icin kullanılır.Kullanılabileceği yerler blog yazısı,haber,forum girdisi vs..
Ornek :
Kod:
[h=1]Başlık[/h] Tarih 2012-03-18
İcerik burada bulunabilir.
... Kucuk bir uyarı !
Gorduğunuz gibi article etiketinin icince header ve footer etiketi tanımlattık.Ayrıca time etiketini de ekledim.Aşağıda anlatılmaktadır.
Bir ornek daha:
Kod:
[h=1]Başlık[/h] Tarih 2012-03-18
İcerik burada bulunabilir.
... Kucuk bir uyarı !
[h=1]Başlık 2[/h] Tarih 2012-03-18
İcerik burada bulunabilir.
... Kucuk bir uyarı !
section etiketi de en ustteki resimde olduğu gibi article unsurunu icerdi.
aside Etiketi
Sayfanın kenarına bir icerik tanımlamaya yarar.Genellikle nav etiketi ile karıştırılır.
Orneğin CSS yapısı şu şekilde olan bir sayfanın:
Kod:
aside
HTML yapısı şu şekilde olsun:
Kod:
[h=4]Başlık[/h] İcerik burada.
Cıktısı ise tahmin edebileceğiniz gibi sağ tarafa dayalı olacaktır.İcerisine stil ve etiket tanımlayabileceğiniz bu seciciyi sayfanızın yan bloğu icin kullanabilirsiniz.
footer Etiketi
Genellikle alt kısımlar icin kullanılan header sınıfının secici haline donuşturulmesiyle HTML5 etiketlerine katılan footer,bir sayfada birkac kere bulunabilir.
Ornek
Kod:
Yazı yayımlanma saati : 11:21
İletişim bilgilerinin footer secicisinin icinde bulubduğu durumlarda address secisici de devreye girebilir.(address secicisi aşağıda anlatılmaktadır.)
Kod:
İletişim :Ozer.
Ben buradayım:
Footerın icine tanımladığımız address secicisi ile yazı tipi eğik olacaktır.
figure Etiketi
Bu etiket sayfaya resim,kod gibi elemanları yerleştirmek icin kullanılır.Figure etiketine başlık tanımlatmak icin figcaption etiketi kullanılır.
figcaption Setiketi
Figure icindeki ortama alt başlık olarak eklenir.Hemen bir ornek gosterelim:
Kod:
Alt başlık time Etiketi
Adından da anlaşılabileceği uzere zaman kavramını tanımlar.
Kullanım: Kod:
15:30
address Etiketi
Address etiketi bir article icerisinde ise belgenin sahibinin iletişim belgelerini ifade eder,eğer bir body etiketi icerisinde ise sayfanın sahibinin iletişim bilgileri temsil eder.
Ornek:
Kod:
Yazan: Ozer
İletişim bla bla.
hgroup Etiketi
Bu etiket, başlığın elemanları icin kullanılır.h1 den h6 ya kadar olan alt başlık tiplerini kapsar.
Ornek
Kod:
[h=1]Hoşgeldiniz ![/h] [h=3]]Ne arzu ederdiniz?[/h]
progress Etiketi
Bir olayın ilerleme durumunu belirtir.Js ile bir gorevin ilerleme durumunu belirtebilirsiniz.
Ancak bu etiket İE ve Safari'de gecersizdir.
Alabileceği değerler:
max : En fazla ne kadar ilerleyeceği sayısal değer.
value : Gostergede gorulecek sayılal değer.
Kullanımı
Kod:
İlerleme:
wbr Etiketi
Bir kelimenin uzunluğu fazlaya,tarayıcının nereden bolmesi gerektiğini belirlersiniz.Ancak İE desteklemez.
Kod:
cekoslavakyalılaştıramadıklarımızdan mısınız
Demo & Bitiş
Eğer siz de web sayfalarınızın daha dinamik ve hızlı bir yapıya sahip olmasını istiyorsanız,HTML5 etiketlerine geciş yapabilirsiniz.
HTML5 etiketleri ile hazırladığım basit bir blog tasarımını da oğrendiklerinizi pekiştirmeniz acısından sizlere sunuyorum.
Demo | HTML5 Etiketleri Detaylı Anlatım
Kolay gelsin.