HTML5 ve CSS3 webin geleceği olmaktan çıktı artık.Internet Explorer dışında birçok popüler tarayıcı bu standartları şuan destekler konumda.Internet Explorer9 versiyonu ile bu standartları tam olarak destekleyecek.HTML5 ile gelen birçok yenilik var bu yenilikleri kullanmak için yeni tagler eklenmiş.Bu yazımda bu yeni gelen tagleri anlatmaya çalışacağım...
HTML5 ile Gelen Yeni Tagler
DOCTYPE
Charset
Header
Nav
Aside
Article
Figure
Hgroup
Section
Address
Footer
DOCTYPE
DOCTYPE(Doküman Türü) kısacası sayfamızın ne olduğunu tanımladığımız tagdır.Mutlaka tanımlamamız gereken bir tagdır.Çünkü burada yapacağımız tag.Mutlaka tanımlamamız gereken bir tagdır.Çünkü burada yapacağımız tanımlamaya göre tarayıcı sayfamızı yorumlayacaktır.
Örnek Kullanımı:
<!DOCTYPE html>
CHARSET
Tarayıcıların sayfamızı hangi karakter seti ile yorumlaması gerektiğini tanımladığımız tagdır.
Örnek Kullanımı:
<!**** charset=utf-8>
HEADER
Header tag ı bundan önceki taglar dan biraz farklı.Çünkü header tagı ile herhangi bir bilgiyi bildirmiyoruz.Bir konteynır olarak tanımlıyoruz.Bu konteynırın içine genel de ana navigasyon linkleri konulur.Header tagının içine ana navigasyon linklerinin konmasının nedeni Semantic web(Anlamsal web) geçiş yapmamızı sağlıyor.Arama motorları bu tagleri ne olduğunu bildiği için içindeki elementlere bir anlam veriyor.Bu sayede daha iyi bir arama algoritması kura biliyor ve daha fazla ziyaretçi elde etmenizi sağlıyor.
Örnek Kullanımı:
<header>
<nav>
<ul>
<li><a href=#Anasayfa</a></li>
<li><a href=#Hakkımızda </a></li>
<li><a href=#İletişim </a></li>
</ul>
</nav>
</header>
NAV
Sitemizin navigasyonunun yer aldığı konteyner tagı dır.
Örnek Kullanımı:
<nav>
<ul>
<li><a href=#Anasayfa</a></li>
<li><a href=#Hakkımızda </a></li>
<li><a href=#İletişim </a></li>
</ul>
</nav>
ASIDE
Sayfada yer alan içerikle ilgili ancak önemli bir bilgi yer aldığını anlatmaya çalıştığımız konteynır tagıdır.
Örnek Kullanımı
<aside>
<p>Dikkat Ediniz </p>
</aside>
ARTICLE
Web sayfaları bildiğiniz üzere sadece içerikten meydana gelmez.Menüler,reklamlamlar ve çeşitli tanımlamalarda olur.Ama kullanıcı genellikle bunlarla ilgilenmez.İlgilendiği konu girdiği sayfadaki içeriktir.Bunu belirtiğimiz tagde article tag ı dır.
Örnek Kullanımı
<article>
Bu yazımda HTML5 öğreniyoruz
</article>
FIGURE
Figure konteynırı ise aside konteynırının tam bir zıttıdır.Yani içerikten farklı bir bilgi girdiğimizi belirttiğimiz tagdır.
Örnek Kullanımı
<figüre>
<img src=figüre.jpg alt=figüre resmi/>
<figcaption>Burada yeni bir figüre var</figcaption>
</figüre>
HGROUP
Benzer elementleri guruplamak için kullandığımız tagdır.
Örnek Kullanımı
<hgroup>
<h1>Ana Başlık</h1>
<h2>Alt Başlık<h2>
</hgroup>
SECTION
İçeriğimizin içinde yeni bir bölüm oluşturmamızı sağlayan tagdır.Mesela içeriğin içinde giriş bölümü,teknoloji haberleri,iletişim bilgileri gibi bölümler olsun ve biz bu bilgilerin hepsini yeni ayrı bölümler içine yazalım.
Örnek Kullanımı
<article>
<hgroup>
<h1>Ana Başlık>/h1>
<h2>Alt Başlık</h2>
<hgroup>
<p>Ana Section</p>
<section>
<h1>Kategori>1</h1>
<p>Kategori 1 ile ilgili tanımlama</p>
</section>
<section>
<h1>Kategori 2</h1>
<p>Kategori 2 ile ilgili tanımlama</p>
</section>
</article>
ADDRESS
İletişim bilgilerinin yer aldığını belirlediğimiz tagdır.
Örnek Kullanımı
<address>
<a href=#>Oğulcan</a>
<a href=#>Yavuzhan </a>
</adderss>
FOOTER
İçeriğin bittiğini gösterdiğimiz tagdir.
İpucu:Eğer bir blog sayfası kuruyorsanız o blog yazısı ile ilgili yorumları bu tagın içine koyabiliriz.
Örnek Kullanım
<article>
<header>
<h1>Sayfa ile ilgili başlık</h1>
</header>
<p>İçerik</p>
<footer>
<p>Yorumlar</p>
</footer>
</article>
HTML5 taglarını aktif hale getirelim
Şimdilik bu tagları kullanmak için bu tagleri display değerlerinin block yapmamız gerekiyor.
Header, nav, article, section, footer, figure, aside {
Display: block;
}
Gördüğünüz gibi CHARSET ve DOCTYPE dışındaki taglar Şematik Webe katkı sağlamak için oluşturulmuş taglar dır.Şematik webe yavaş yavaş geçiyoruz bu yüzden html5 ile gelen yeni tagları projelerimizde kullanmamız gerekiyor.
NOT:Arkadaşlar konuyu kendi bloguma yazarken alıntı yaptım ama hangi siteden aldığımı hatırlamıyorum ama yazıyı buraya kendi blogumdan kopyaladım.Umarım yararlı olmuştur.
HTML5 ile Gelen Yeni Tagler
DOCTYPE
Charset
Header
Nav
Aside
Article
Figure
Hgroup
Section
Address
Footer
DOCTYPE
DOCTYPE(Doküman Türü) kısacası sayfamızın ne olduğunu tanımladığımız tagdır.Mutlaka tanımlamamız gereken bir tagdır.Çünkü burada yapacağımız tag.Mutlaka tanımlamamız gereken bir tagdır.Çünkü burada yapacağımız tanımlamaya göre tarayıcı sayfamızı yorumlayacaktır.
Örnek Kullanımı:
<!DOCTYPE html>
CHARSET
Tarayıcıların sayfamızı hangi karakter seti ile yorumlaması gerektiğini tanımladığımız tagdır.
Örnek Kullanımı:
<!**** charset=utf-8>
HEADER
Header tag ı bundan önceki taglar dan biraz farklı.Çünkü header tagı ile herhangi bir bilgiyi bildirmiyoruz.Bir konteynır olarak tanımlıyoruz.Bu konteynırın içine genel de ana navigasyon linkleri konulur.Header tagının içine ana navigasyon linklerinin konmasının nedeni Semantic web(Anlamsal web) geçiş yapmamızı sağlıyor.Arama motorları bu tagleri ne olduğunu bildiği için içindeki elementlere bir anlam veriyor.Bu sayede daha iyi bir arama algoritması kura biliyor ve daha fazla ziyaretçi elde etmenizi sağlıyor.
Örnek Kullanımı:
<header>
<nav>
<ul>
<li><a href=#Anasayfa</a></li>
<li><a href=#Hakkımızda </a></li>
<li><a href=#İletişim </a></li>
</ul>
</nav>
</header>
NAV
Sitemizin navigasyonunun yer aldığı konteyner tagı dır.
Örnek Kullanımı:
<nav>
<ul>
<li><a href=#Anasayfa</a></li>
<li><a href=#Hakkımızda </a></li>
<li><a href=#İletişim </a></li>
</ul>
</nav>
ASIDE
Sayfada yer alan içerikle ilgili ancak önemli bir bilgi yer aldığını anlatmaya çalıştığımız konteynır tagıdır.
Örnek Kullanımı
<aside>
<p>Dikkat Ediniz </p>
</aside>
ARTICLE
Web sayfaları bildiğiniz üzere sadece içerikten meydana gelmez.Menüler,reklamlamlar ve çeşitli tanımlamalarda olur.Ama kullanıcı genellikle bunlarla ilgilenmez.İlgilendiği konu girdiği sayfadaki içeriktir.Bunu belirtiğimiz tagde article tag ı dır.
Örnek Kullanımı
<article>
Bu yazımda HTML5 öğreniyoruz
</article>
FIGURE
Figure konteynırı ise aside konteynırının tam bir zıttıdır.Yani içerikten farklı bir bilgi girdiğimizi belirttiğimiz tagdır.
Örnek Kullanımı
<figüre>
<img src=figüre.jpg alt=figüre resmi/>
<figcaption>Burada yeni bir figüre var</figcaption>
</figüre>
HGROUP
Benzer elementleri guruplamak için kullandığımız tagdır.
Örnek Kullanımı
<hgroup>
<h1>Ana Başlık</h1>
<h2>Alt Başlık<h2>
</hgroup>
SECTION
İçeriğimizin içinde yeni bir bölüm oluşturmamızı sağlayan tagdır.Mesela içeriğin içinde giriş bölümü,teknoloji haberleri,iletişim bilgileri gibi bölümler olsun ve biz bu bilgilerin hepsini yeni ayrı bölümler içine yazalım.
Örnek Kullanımı
<article>
<hgroup>
<h1>Ana Başlık>/h1>
<h2>Alt Başlık</h2>
<hgroup>
<p>Ana Section</p>
<section>
<h1>Kategori>1</h1>
<p>Kategori 1 ile ilgili tanımlama</p>
</section>
<section>
<h1>Kategori 2</h1>
<p>Kategori 2 ile ilgili tanımlama</p>
</section>
</article>
ADDRESS
İletişim bilgilerinin yer aldığını belirlediğimiz tagdır.
Örnek Kullanımı
<address>
<a href=#>Oğulcan</a>
<a href=#>Yavuzhan </a>
</adderss>
FOOTER
İçeriğin bittiğini gösterdiğimiz tagdir.
İpucu:Eğer bir blog sayfası kuruyorsanız o blog yazısı ile ilgili yorumları bu tagın içine koyabiliriz.
Örnek Kullanım
<article>
<header>
<h1>Sayfa ile ilgili başlık</h1>
</header>
<p>İçerik</p>
<footer>
<p>Yorumlar</p>
</footer>
</article>
HTML5 taglarını aktif hale getirelim
Şimdilik bu tagları kullanmak için bu tagleri display değerlerinin block yapmamız gerekiyor.
Header, nav, article, section, footer, figure, aside {
Display: block;
}
Gördüğünüz gibi CHARSET ve DOCTYPE dışındaki taglar Şematik Webe katkı sağlamak için oluşturulmuş taglar dır.Şematik webe yavaş yavaş geçiyoruz bu yüzden html5 ile gelen yeni tagları projelerimizde kullanmamız gerekiyor.
NOT:Arkadaşlar konuyu kendi bloguma yazarken alıntı yaptım ama hangi siteden aldığımı hatırlamıyorum ama yazıyı buraya kendi blogumdan kopyaladım.Umarım yararlı olmuştur.
