Faydalı Teknoloji

HTML 5 Yenilikleri

Yazar admin

Merhaba Arkadaşlar,

HTML 5 yeniliklerinden taglardan bahsedeceğiz.
Web tasarımlarımızın her alanında temel dil olarak adlandırabileceğimiz HTML yeniliklerle işlerimizi kolaylaştırıyor.
İster HTML içine gömülü olarak kullandığımız dilleri (php, asp vb.) daha esnek ve kullanışlı hale getirmek için illaki HTML ve CSS bilgilerimizi tazelemek ve yeniliklere açık olmak gerektiğini düşünüyorum.

HTML5 ile Gelen Bazı Yeni Taglar

    -DOCTYPE
    -Charset
    -Header
    -Nav
    -Aside
    -Article
    -Figure
    -Hgroup
    -Section
    -Address
    -Footer

DOCTYPE
DOCTYPE(Döküman Türü) kısacası sayfamızın ne olduğunu tanımladığımız tag. Mutlaka tanımlamamız gereken bir tag dır. Çünkü burda yapacağımız tanımlamaya göre tarayıcı sayfamızı yorumlayacaktır.Sayfamızın en üst kısmında yer alır.

Örnek Kullanımı:
<!DOCTYPE html>

CHARSET
Tarayıcıların sayfamızı hangi karakter seti ile yorumlaması gerektiğini tanımladığımız tag dır.

Örnek Kullanımı:
<meta charset=”utf-8″>

HEADER
Header tag’ı bundan önceki taglar den biraz farklı çünkü header tag’ı ile herhangi bir bilgiyi deklere etmiyoruz. Bir konteynır olarak tanımlıyoruz.
Peki bu konyetnır’ın içine ne koyuyoruz? Genel de içerisine ana navigasyon linkleri konulur. Peki neden header tag’ı içerisine koyuyoruz? Semantic web(Anlamsal web) geçiş yapmamızı sağlıyor header tag’ı. Arama motorları bu tagları ne olduğunu bildiği için içindeki elementlere bir anlam veriyor ve daha iyi bir arama algoritması kurabiliyor. Bu sayede daha fazla ziyaretçi elde etmemizi sağlayabiliriz.

Örnek Kullanımı
<header>
<nav>
<ul>
<li><a href= “#”>Ana Sayfa</a></li>
<li><a href= “#”>Ceyber Warrior</a></li>
<li><a href= “#”>Web Kartalı</a></li>
<li><a href= “#”>Ahmet / Cod3R</a></li>
</ul>
</nav>
</header>

NAV
Sitemizin navigasyonunun yer aldığını konteynir tag’ı dır.

Örnek Kullanımı
<nav>
<ul>
<li><a href= “#”>Ana Sayfa</a></li>
<li><a href= “#”>Ceyber Warrior</a></li>
<li><a href= “#”>Web Kartalı</a></li>
<li><a href= “#”>Ahmet / Cod3R</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’ı.

Örnek Kullanımı
<aside>
<p>Buraya dikkat edelim…</p>
</aside>

ARTICLE
Web sayfaları bildiğiniz üzere sadece içerikten meydana gelmez menüler, reklamlar ve çeşitli tanımlamalar da olur. Ama kullanıcı genelikle bunlarla ilgilenmez. İlgilendiği konu girdiği sayfada ki içeriktir. Bunu belirtiğimiz tag de article tag’ı dir.

Örnek Kullanım
<article>
Bu yazımda Cyber-Warrior Dünya Çapında….
</article>

FIGURE
Figure konteynir’ı ise aside’ın tam zıttı. Yani içerikten farklı bir bilgi girdiğinizi deklere ettiğimiz tag.

Örnek Kullanımı
<figure>
<img src= “webkartali.jpg”>HGROUP
Benzer elementleri gruplamak için kullandığımız tag.

Ö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 tag. Mesela içeriğin içinde giriş bölümü, haberler, iletişim bilgileri gibi bölümler olsun ve biz bu bilgileri 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>Katergori 1</h1>
<p>Kategori 1 ile ilgli tanımlama</p>
</section>
<section>
<h1>Kategori 2</h1>
<p>Kategori 2 ile ilgili tanımala</p>
</section>
</article>

ADDRESS
İletişim bilgilerini yer aldığını belirlediğimiz tag.

Örnek Kullanım
<address>
<a href= “#”>Ahmet</a>,
<a href= “#”>Web Kartalı</a>,
</address>

FOOTER
İçeriğin bittiğini belirlediğimiz tag. Eğer bir blog sayfası ise içersine o blog yazısı ile ilgili yorumları bu tag’ın içine koyabiliriz.

Örnek Kullanım
<article>
<header>
<h1>Sayfa ile ilgil başlık</h1>
</header>
<p>İçerik</p>
<footer>
<p>Yorumlar</p>
</footer>
</article>

Gördüğümüz gibi CHARSET ve DOCTYPE dışındaki tagler Şemantik Web’e katkı sağlamak için oluşturulmuş tagler. Şemantik web’e artık yavaş yavaş geçiyoruz. O yüzden HTML5 ile gelen tagleri zaman içerisinde projelerimizde kullanmamız gerekiyor.Şiddetle tavsiye ederim arkadaşlar

İyi Kodlamalar dilerim..

Yazar Hakkında

admin

* Freelance Web Developer
* Intel Technology Provider Expert
info@webkartali.com

Yorum Yap