HTML5 etiketleri veya seçicileri olarak dilimize geçmiş olan bu terim,her ne kadar şuanda W3C önermelerine geçmediyse de,dinamik yapılı websiteler oluşturmak ve HTML ögelerini işlerken ortaya çıkan hataları azaltmak ve yapıyı sadeleştirmek için websitelerde kullanılması gereken bir tanımlamadır.
Birçok mobil ve masaüstü web tarayıcılarında desteklenmektedir.
HTML5 etiketlerinden bazıları:
Bunları hep beraber inceleyeceğiz.
Önce şu resimde neyin ne olduğu hakkında daha çabuk bir fikir sahibi olmanız için kabataslak bir yapı oluşturdum.
Yukarıdaki resimde bariz bellidir ki header(üst kısım),nav(menü),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 bölüm için üst kısmı belirtir.Tek bir sayfada birkaç header etiketi olabilir.
header etiketimizi örnekleyelim.Stilimiz şu şekilde olsun:
header {
height:100px;
width:960px;
margin:auto
}
HTML yapısı şu şekilde olacak
Site Başlık İstenirse içerisine diğer HTML etiketlerinde olduğu ul ve benzeri tanımlamalar eklenebilir.
nav Etiketi Nav etiketi genellike menü bağlantılarını tanımlar.Nav etiketi sadece sitedeki menü bağlantılarının blok yapısı için kullanılmalıdır.
Örnek vermek gerekirse,
nav {
height:35px;
line-height:35px;
background:#ccc;
}
nav ul {
list-style:none;
}
nav ul li {
float:left;
margin-right:20px;
}
Yukarıdaki stil kodlarına sahip belgenin HTML yapısı şu şekilde olacaktır:
Gördüğünüz gibi HTML5 in bize sunmuş olduğu nav etiketine bir liste tanımlattık.Sizde nav etiketinin içine dilediğiniz gibi sınıf ve özellik ekleyebilirsiniz.
section Etiketi
section etiketi bir sayfada yeni bölümler tanımlar.Bir article etiketinin içerisine de eklenebilir,footer da.
Örnek:
CSS
section {
width:500px;
height:100px;
background:#000;
color:#fff
HTML
Cudjex.Com section kullanımı
Normal bir css sınıfı kullanır gibi içerisine ek tanımlamalar yapılabilir.Kullanım amacı kelime anlamıyla birebirdir.Belli bir bölge içinde bölüm oluşturmak için kullanılır.
Örneğin sectionı kullandığınız belgenin CSS yapısı şöyle olsun
section {
height:20px;
width:20px;
float:left;
}
section.bilgi {
float:right;
height:40px;
width:20px;
}
HTML yapısı
Sağ taraf Sol Taraf
Oluşturduğunuz sectionların içine stil ve sınıf tanımlayabilirsiniz.
article Etiketi article bir belge içinde bağımsız alan oluşturmak için kullanılır.Kullanılabileceği yerler blog yazısı,haber,forum girdisi vs..
Örnek :
Başlık
Tarih
İçerik burada bulunabilir.
...
Gördüğünüz gibi article etiketinin içince header ve footer etiketi tanımlattık.Ayrıca time etiketini de ekledim.Aşağıda anlatılmaktadır.
Bir örnek daha:
Başlık
Tarih
İçerik burada bulunabilir.
...
Başlık 2
Tarih
İçerik burada bulunabilir.
...
section etiketi de en üstteki resimde olduğu gibi article unsurunu içerdi.
aside Etiketi Sayfanın kenarına bir içerik tanımlamaya yarar.Genellikle nav etiketi ile karıştırılır.
Örneğin CSS yapısı şu şekilde olan bir sayfanın:
aside {
float:right;
width:300px;
} HTML yapısı şu şekilde olsun:
Çıktısı ise tahmin edebileceğiniz gibi sağ tarafa dayalı olacaktır.İçerisine stil ve etiket tanımlayabileceğiniz bu seçiciyi sayfanızın yan bloğu için kullanabilirsiniz.
footer Etiketi
Genellikle alt kısımlar için kullanılan header sınıfının seçici haline dönüştürülmesiyle HTML5 etiketlerine katılan footer,bir sayfada birkaç kere bulunabilir.
Örnek
İletişim bilgilerinin footer seçicisinin içinde bulubduğu durumlarda address seçisici de devreye girebilir.(address seçicisi aşağıda anlatılmaktadır.)
Footerın içine tanımladığımız address seçicisi ile yazı tipi eğik olacaktır.
figure Etiketi Bu etiket sayfaya resim,kod gibi elemanları yerleştirmek için kullanılır.Figure etiketine başlık tanımlatmak için figcaption etiketi kullanılır.
figcaption Setiketi Figure içindeki ortama alt başlık olarak eklenir.Hemen bir örnek gösterelim:
Alt başlık
time Etiketi
Adından da anlaşılabileceği üzere zaman kavramını tanımlar.
Kullanım:
address Etiketi Address etiketi bir article içerisinde ise belgenin sahibinin iletişim belgelerini ifade eder,eğer bir body etiketi içerisinde ise sayfanın sahibinin iletişim bilgileri temsil eder.
Örnek:
Yazan: Özer
İletişim bla bla.
hgroup Etiketi
Bu etiket, başlığın elemanları için kullanılır.h1 den h6 ya kadar olan alt başlık tiplerini kapsar.
Örnek
Hoşgeldiniz !
]Ne arzu ederdiniz?
progress Etiketi
Bir olayın ilerleme durumunu belirtir.Js ile bir görevin ilerleme durumunu belirtebilirsiniz.
Ancak bu etiket İE ve Safari'de geçersizdir.
Alabileceği değerler:
max : En fazla ne kadar ilerleyeceği sayısal değer.
value : Göstergede görülecek sayılal değer.
Kullanımı
İlerleme:
wbr Etiketi Bir kelimenin uzunluğu fazlaya,tarayıcının nereden bölmesi gerektiğini belirlersiniz.Ancak İE desteklemez.
çekoslavakyalı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 geçiş yapabilirsiniz.
HTML5 etiketleri ile hazırladığım basit bir blog tasarımını da öğrendiklerinizi pekiştirmeniz açısından sizlere sunuyorum.
