Html dilinin şu anda kullanılan 4. versiyondan 5′e geçiş sürecini yaşadığını biliyoruz. Bu alanda W3C grubunun yaptığı ara çalışmaları da görme imkanımız oldu. Html 5.0 dili gerçekten bünyesine katılan yeni özellikler sayesinde sanıyorum yeniden gönüllerimizi fethedecek. 2003 yılının son dönemlerinde geliştirilmeye başlanan Html5.0 yapılan öngörüye göre 2010 yılının sonlarına doğru final sürümüyle karşımızda olacak. Sanıyorum bu döneme kadar yapılan ara çalışmalarla da gelişimi daha yakından görebileceğiz. Tabi yine tarayıcı uyumu konusu gündeme geliyor. Html5.0′ın final sürümü duyurulduğunda tarayıcı cephesinde ne gibi bir gelişme yaşanır bunu zaman gösterir. Ancak kişisel görüşüm daha önce yaşadığımız tarayıcı uyumsuzluğu sorunlarının bu sefer daha az olacağıdır. (Bazı kaynaklarda 2012 gibi tarihler gördüm ama umarım bu kadar uzun bir süreç olmaz)

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

Rastgele Yazılar