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:
HTML yapısı şu şekilde olacak
[yap]İstenirse içerisine diğer HTML etiketlerinde olduğu ul ve benzeri tanımlamalar eklenebilir.[/yap]
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,
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
HTML
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
HTML yapısı
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 :
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:
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:
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:
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:
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
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ı
wbr Etiketi
Bir kelimenin uzunluğu fazlaya,tarayıcının nereden bölmesi gerektiğini belirlersiniz.Ancak İE desteklemez.
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.
Demo | HTML5 Etiketleri Detaylı Anlatım
Kolay gelsin.
Birçok mobil ve masaüstü web tarayıcılarında desteklenmektedir.
HTML5 etiketlerinden bazıları:
Kod:
<nav>,<header>,<hgroup>,<figure>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:
Kod:
header {
height:100px;
width:960px;
margin:auto
}
Kod:
<header>Site Başlık</header>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,
Kod:
nav {
height:35px;
line-height:35px;
background:#ccc;
}
nav ul {
list-style:none;
}
nav ul li {
float:left;
margin-right:20px;
}
Kod:
<nav>
<ul>
<li>
<a href="#">Nav kullanımı</a>
<a href="#">HTML5 etiketleri</a>
</li>
</ul>
</nav>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
Kod:
section {
width:500px;
height:100px;
background:#000;
color:#fffHTML
Kod:
<section>Cudjex.Com section kullanımı</section>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
Kod:
section {
height:20px;
width:20px;
float:left;
}
section.bilgi {
float:right;
height:40px;
width:20px;
}HTML yapısı
Kod:
<section class="bilgi">Sağ taraf</section>
<section>Sol Taraf</section>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 :
Kod:
<article>
<header>
<h1>Başlık</h1>
<p>Tarih <time>2012-03-18</time></p>
</header>
<p>İçerik burada bulunabilir.</p>
...
<footer>
<p><small>Küçük bir uyarı !</small></p>
</footer>
</article>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:
Kod:
<section>
<article>
<header>
<h1>Başlık</h1>
<p>Tarih <time>2012-03-18</time></p>
</header>
<p>İçerik burada bulunabilir.</p>
...
<footer>
<p><small>Küçük bir uyarı !</small></p>
</footer>
</article>
<article>
<header>
<h1>Başlık 2</h1>
<p>Tarih <time>2012-03-18</time></p>
</header>
<p>İçerik burada bulunabilir.</p>
...
<footer>
<p><small>Küçük bir uyarı !</small></p>
</footer>
</article>
</section>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:
Kod:
aside {
float:right;
width:300px;
}
Kod:
<aside>
<h4>Başlık</h4>
<p>İçerik burada.</p>
</aside>Çı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
Kod:
<footer>
<p>Yazı yayımlanma saati : 11:21</p>
</footer>İ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.)
Kod:
<footer>
<address>
İletişim :<a href="mailto:[email protected]">Özer</a>.<br />
Ben buradayım:<br />
</address>
</footer>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:
Kod:
<figure>
<img src="/deneme.png" width="300" height="300" />
<figcaption>Alt başlık</figcaption>
</figure>time Etiketi
Adından da anlaşılabileceği üzere zaman kavramını tanımlar.
Kullanım:
Kod:
<time>15:30</time>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:
Kod:
<article>
<address>
Yazan: Özer <br />
İletişim bla bla.
</address>
</article>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
Kod:
<hgroup>
<h1>Hoşgeldiniz !</h1>
<h3>]Ne arzu ederdiniz?</h3>
</hgroup>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ı
Kod:
İlerleme:
<progress value="25" max="100">
</progress>wbr Etiketi
Bir kelimenin uzunluğu fazlaya,tarayıcının nereden bölmesi gerektiğini belirlersiniz.Ancak İE desteklemez.
Kod:
çekoslavakyalılaştıramadık<wbr>larımızdan<wbr> mısınızDemo & 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.
Demo | HTML5 Etiketleri Detaylı Anlatım
Kolay gelsin.