Bu yazımızda sizlerle Html5.0 ile hayatımıza girecek olan bazı yeni etiketleri tanıtacağız. Html5.0′ın biraz daha esnek yapıya bürünerek geliştiğini görmek gerçekten heyecan verici. Dilerseniz hemen yeni etiketlerimize bir bakalım.

Header, Section, Nav, Article, Aside, Footer Etiketleri

Html5.0′ın biraz daha esnek bir yapıya büründüğünü söylemiştik. Bu esnek yapıyı yeni kullanmaya başlayacağımız Yapısal etiketlerde de görebiliyoruz.

Blog sahipleri çok iyi bileceklerdir ki bir blog sayfası header (üst bölümü, logo ve sloganımızın bulunduğu bölüm), navigasyon (menü alanı diye açıklayabiliriz), sidebar (yan menü bölümü), content (ana içerik bölümü), footer (alt bilgi bölümü) alanlarından oluşmaktadır. Klasik manada bir blogun kod olarak yapısı şu şekildedir. (Html4 ile yazılan örnek kodumuz)

<div id="pager">
<div id="header">Üst Bölüm</div>
<div id="navigation">Navigasyon Alanı</div>
<div id="maincontent">Ana içerik bölümü</div>
<div id="sidebar">Yan menü ve bileşenlerimiz</div>
<div id="footer">Sitemiz alt bilgi bölümü</div>
</div>

Pek az farkla genellikle blog sitelerimizin ortaya koyduğu kod mantığı budur. Html4′ün bize sunmuş olduğu div etiketine yaptığımız id tanımlamaları ile klasik olarak blog stilindeki sayfamızı şekillendirebiliyor ve Css ile de bu bölümlere stiller atayabiliyorduk. (Tabi bölümlerin ve blokların farklı yerlerde olmaları, farklı boyut ve işlevlere sahip olmaları da tamamiyle Css ve Js işlevidir) Html5.0′ta ise başlığımızda belirttiğimiz etiketlerle aynı blog sayfasının kodunu yazalım. Kodları inceleyince gerçekten çok kolay olduğunu göreceksiniz.

<section>
<header>Üst Bölüm</header>
<nav>Navigasyon Alanı</nav>
<article>Ana içerik bölümü</article>
<aside>Yan menü ve bileşenlerimiz</aside>
</section>
<footer>Sitemiz alt bilgi bölümü</footer>

Son yazmış olduğumuz kod bölümünde Html5.0′daki yeni etiketlerimizin kullanımını görüyorsunuz. Etiketlerin kullanımı ve yerleşimi sanıldığı kadar zor değil. Sitemizin Footer bölümünü oluşturmak için <footer> etiketi açıp usulüne uygun biçimde sonlandırmak yeterli oluyor. Bunun gibi diğer etiketlerin kullanımı da aynı. Yalnızca section etiketine biraz değinmek istiyorum. Section web sayfazımın görünen bölümünü bir kitap sayfası olarak kabul ettiğimizde bir yaprağı gösteren ana belirleyici etiket oluyor. Yani web sayfalarımızda kesit almamıza yarıyor. Section etiketinin kullanımı tamamen size kalmış. Kullanıcınıza göstereceğiniz web sayfasının belirli bölümlerini section etiketi içine alıp gösterebiliyorsunuz.

Etiketlerimizin kısaca işlevlerine biraz değinelim. Header etiketi yazımızın önceki bölümlerinde bahsettiğimiz gibi sitemizin header bölümünü yani üst bilgi bölümünü tanımlıyor. Html5′te açılan her header etiketi bir section etiketinin üst bölümünü niteliyor. Dilediğiniz kadar header etiketi açarak üst bilgi tanımlaması yapabiliyor bazı ögelere atıfta bulunabiliyorsunuz.

Nav etiketi ise bir nevi menü alanı gibi görülebilir. Site içi sayfalarımıza veya dış kaynaklara vereceğimiz bağlantı alanlarının bulunduğu ana navigasyon sahasını tanımlamak için bu etiketi kullanacağız. Yine klasik web kodlamada yaptığımız gibi nav etiketi içinde ul, li gibi liste etiketlerinden faydalanarak menü birimleri oluşturabilir ve farklı bağlantı seçenekleri sunabiliriz.

Article ise sitemizin ana içerik bölümünü ifade ediyor. W3C’nin tanımına göre Article etiketi ile sayfamızdan bağımsız bir parça elde ediyoruz. Örneğin, son yazılan haberler, blog gönderileri, son forum postları gibi. Bu ögeleri article içinde sayfamızda gösterebiliyoruz. Bağımsız parçadan kastedilen şey de bu sanırım.

Aside etiketi ise blog sahiplerinin çok iyi bildiği Sidebar alanını niteliyor. Bu alanda yan menüler, sitemize ait reklamlar, bileşenler yer alabilir ve bunları bu etiket dahilinde kullanıcılarımıza gösterebiliriz.

Header, Nav, Section, Article, Aside gibi yapısal etiketler Html5 ile hayatımıza girecek olan yeni etiketlerden sadece birkaçı. İlerleyen zamanlarda diğer yeni etiketlerden de bahsetmeye çalışacağım. Umarım sizler için faydalı olmuştur.

Kaynaklar

http://wiki.whatwg.org/wiki/Main_Page
http://blog.whatwg.org/
http://www.w3.org/html/wg/
http://dev.w3.org/html5/spec/Overview.html
http://www.w3.org/TR/html5/
http://www.w3.org/TR/html5-diff/
http://www.ibm.com/developerworks/library/x-html5/
http://html5.org/tools/web-apps-tracker
http://www.readwriteweb.com/archives/5_exciting_things_in_html_5.php

Efendim geçte olsa yayınlama ve duyurma fırsatı bulduğumuz güzel bir olayı sizlere aktarmak istiyorum. Yılların Html’si, 1999 yılından bu yana 4. versiyonunu kullandığımız HTML (Hyper Text Markup Language) dili 22 Ocak’ta yapılan duyuruyla 5.0 sürüme yükseltildi. Html 4 ile 5 versiyon arasındaki farkları bu sayfada detaylı biçimde görmek mümkün.

Uzun süredir Html’nin revize edilme haberlerini duyuyor hatta Xhtml 2.0 ile olacak olan ilişkisini ve yeni eklenecek olan elementleri merak ediyorduk. W3C’nin bizlere duyurduğu
kadarıyla gelişmeleri takip etme ve okuma fırsatımız da oldu. 22 Ocak itibariyle W3C’nin duyurusunu aldık ve Html 5.0′ın çıkışını kutluyoruz.

Birçoğumuzun tasarıma başlarken öğrenmek için kendini parçaladığı bu dilin bu denli gelişimini gördükçe çok seviniyorum. Html 5.0 hakkında ileride detaylı bir yazı yazmayı düşünüyorum. Özellikle yeni eklenen etiketler ve parametreler hakkında “yeniden” konuşacak olmak beni oldukça heyecanlandırıyor.

Umuyoruz ki yakın zamana kadar tarayıcılarımız Html 5.0′ın yeni etiketlerini ve özelliklerini destekler de bizlerde seviniriz. Tarayıcı desteği konusunda Mozilla’dan yana şüphemiz yok ancak Internet Explorer’ın bu yeni duruma nasıl uyum göstereceğini zamanla göreceğiz. Tasarım ve kodlama ile uğraşan herkes için hayırlı olması dileğiyle.