Website olgusu özünde yaşayan bir sistemdir, web tasarımınız ne kadar güzel olursa olsun, işin çatısı (Kodlaması) hatasız, dikkatli, özenli ve güncel teknolojiye uyumlu hazırlanmadıkça internet alemindeki yerinizi her geçen gün kaybedeceksiniz demektir.
Web sitenizin görsel tasarımı kullanıcı tarafından değerlendirilir, oysa arama motorları (SEO'nun özü) tasarımından çok, sitenin kodlamasıyla ilgilenir, sitenizi bu kodlara göre değerlendirir.
Gelişmeleri takip edip, kodlama mantığınızı buna göre şekillendirmeniz gerekir.
Bu yazımızın konusuna gelince... HTML yapısı her geçen gün değişmekte geliştirilmekte, yeni etiketler (tag), yeni yapılarla zenginleştirilmekte, kısacası sağlam bir standart oluşturulmaya çalışılmakta, HTML5 ile birlikte bu konuda çok büyük bir adım atıldı.
Arama motorları, bu tip güncellemelere bizden çok daha hızlı adapte olmakta ve algoritmalarını buna göre düzenlemekte, haklı bir şekilde de günceli yakalamış websitelerine daha yakın durmakta...
Şunu da belirtmek isterim, yeni gelen yapılar, daha önce sizi sıkıntıya sokan bir çok uygulamayı çok daha kolay hale getirmiş olabilir, kesinlikle günceli takip etmeniz yararınıza olacaktır.
Konunun detaylarına geçmeden önce bir kaç örnek vermek istiyorum: Mesela HTML5 ile gelen "data" özniteliği (attributes), website nesneleri için öznitelik belirtmede tam bir esneklik sağlamıştır (Özellikle jQuery kullanıyorsanız, emin olabilirsiniz ki bu özelliğin yararını çok göreceksiniz), artık herhangi bir nesne (img, a, div vb..) için istediğiniz kadar öznitelik verme şansınız mevcuttur.
Daha önce sessionkullanarak kısa süreler için veri tuttuğunuz website uygulamalarınızda, (captcha ve benzeri yapılar) HTML5 ile gelen local ve global cookie yapısını kullanabilirsiniz.
Website uygulamalarındaki en önemli sıkıntılardan biri de, bütün input nesnelerini (textbox, checkbox, radio, button vb.) aynı form içine koyma zorunluluğu idi, "gönder" butonunuzu ya da herhangi bir input nesnesini, kodlama yapınız sizi nereye götürürse oraya koymaya mecburdunuz. Fakat HTML5 yapısıyla birlikte, input nesnelerinizi, form nesnesini referans vererek istediğiniz yere koyabilirsiniz, tam bir esneklik.
Konumuza dönersek...HTML5, Html dilinin en son sürümüdür. Diğer sürümleri geride bırakarak standart bir kodlama çatısı sunmak için geliştirilmiştir, hala da geliştirilmeye devam edilmektedir.
İlk taslak 2008 yılında duyuruldu. Yeni etiketler (tag) eklenerek kullanımı daha da çeşitlendirildi. Eski sürümlerdeki bazı etiketler (tag) de kaldırıldı (Aslında kaldırılan etiketlerin birçoğu zaten çok kullanılmıyordu, ya da en azından ben kullanmıyordum diyeyim).
Bence desteklenmeyen en önemli etiketler (tag) frameset-frame, font ve center etiketleridir, frameset-frame yerine iframe kullanabilrsiniz, diğerlerini de stil (css) dosyanızda çözebilirsiniz...
Yenilikler
1. Belge Tipi (DOCTYPE): Belge tipinin belirlenmesi yalın hala getirildi, bu sayede eski sürümdeki uzun belge tipi tanımlama ve çeşitliliği ortadan kalktı, aşağıda, eski tanımlamalardan bir kısmını ve HTML5 için kullanılan tanımlamayı inceleyebilirsiniz:
XHTML 1. O (Transitional):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5:
<!DOCTYPE html>
2. Karakter Set Bildirimi (charset): Yalın hala getirildi, aşağıda, eski tanımlamayı ve HTML5 çin kullanılan tanımlamayı inceleyebilirsiniz:
Eski tanımlama:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
HTML5:
<meta charset="utf-8">
3. Söz Dizimi Kuralları: Açılan etiketlerin (tag) kapanması, iç içe etiket (tag) açılımı gibi kurallar aynen geçerli, fakat HTML5, XML yapısında olmadığı için daha esnek bir söz dizimi mevcut, html, head, body gibi etiketleri yazmasanız bile sistem otomatik olarak bunları yerleştirmekte (Uyarı: Tarayıcılar arası problemler yaşamamak için eksik bırakmak pek de uygun değil). img, hr, br, link, gibi bitiş etiketi olmayan birimler için "/" kullanmak zorunda değilsiniz.
<img src="image.jpg"/> Doğru
<img src="image.jpg"> Doğru
4. Yeni Eklenen Etiketler:; <article>, <aside>, <audio>, <canvas>, <command>, <datalist>, <details>, <embed>, <figcaption>, <header>, <keygen>, <mark>, <meter>, <output>, <progress>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>, <video>, <wbr>
5. Desteklenmeyen Etiketler:; <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>, <u>
6. Tarayıcı Durumu: Tüm tarayıcılar tarafından 100% destekleniyor diyemeyiz fakat Firefox, safari, chrome, opera gibi modern tarayıcılar birçok özelliği desteklemekte, fakat hala tam bir standart oluşmamış durumda.
HTML5 eski kullandığımız biçim oluşturma özelliklerinin (div, table, vb.) tamamını desteklemektedir. Siz HTML5 'in genel çatısını ve tarayıcıların çoğu tarafından desteklenen etiketleri kullanarak sitelerinizi oluşturabilirsiniz. Internet Explorer için ise durum biraz daha farklı "ie9" öncesi tarayıcılar için kontrol mekanizmaları oluşturmanız gerekmekte. HTML5 Internet Explorer uyumu adlı yazımızda bu konuyu irdeleyeceğiz.
Tüm tarayıcılar tarafından 100% uyumlu olmasa da, ki yakın zamanda tüm tarayıcıların uyumlu olacağını düşünüyorum, website kodlamalarında size ekstra yük getiren, ses (audio), video, progress bar, tarih, saat, ve benzeri uygulamalar da işin diğer güzellikleri.
Teknoloji uyumu ile ilgili olarak da şöyle bir örnek vererek konuyu sonlandırmak istiyorum:
Hatırlarsanız ilk zamanlarda website kodlamalarında tablo "table" çok yaygın kullanılırdı, fakat daha sonra katman "div" mantığı bunun yerini aldı (Tabiiki ihtiyaç duyulan yerlerde "table" uygulamasından kaçınmamak gerekir, bunu da belirtmek isterim), peki bunun en önemli sebebi neydi; çünkü katman yapısı, tablo ile oluşturacağımıız yapıları daha az kod satırı ve etiketle yapabilmemizi sağlıyordu, eğer siz web tasarımlarınızda hala ağırlıklı olarak tablo kullanıyorsanız bunu değiştirme zamanı geldi de geçiyor bile.
Dünya genelinde website tanıtımlarında, "tableless (Tablosuz)" ibareleri kesinlikle belirtiliyor artık, inanın "tekerleği yeniden icat etmeye" gerek yok, sebeplerini derin derin araştırmak yerine en kısa zamanda web tasarımlarınızı güncel teknolojiye adapte etmeye bakın.
Görüşmek üzere...
