HTML5 ve HTML5 İle Gelen Etiketler
Önceki makalelerde de belirttiğim gibi HTML versiyonu DOCTYPE Kullanımı ile belirlenir. HTML-5’te doctype kullanımındaki zahmeti ortadan kaldırılmış ve sadece <! DOCTYPE html> şeklinde standartlaştırılmıştır. Doctype, browser’a sayfanın kullanılan html dili versiyonu hakkında browserlara bilgi vermek için kullanılır.
Dediğim gibi HTML5 ile önceki uzun uzun yazdığımız DOCTYPE kullanımı basitleştirilmiştir. Zaten amaçta kodlarda işlevselliğin ön plana çıkmasını sağlamak olduğu için öncelikle DOCTYPE kullanımından başlanılmış işe.
HTML 5 ile gelen tek yenilik doctype değil tabi ki. HTML 5 ile geçmişte kullandığımız tablo yapısı ile tasarımlar siteleri yavaşlattığı gerekçesi ile ortadan kaldırılmaya çalışılmıştır. Table-Design dediğimiz o uygulama ile gerçekten çok zahmetlice işler yapıyor ve fazlası ile zaman kaybediyorduk. Şimdi HTML 5’te Div kullanımı ön plana çıkarılmış ve W3 standartlarında da bu konu üzerinde durulmuştur.
Aynı şekilde arama motorları da W3 standartlarına uyarak sitelerde yeni HTML5 kullanımını teşvik etmektedir. Table design ile birlikte css kullanımının daha fazla yaygınlaşması için CSS3 ile de desteklenmiştir yeni sistem. Daha önceleri de css de div’lere özellik tanımlamak için yazılan div class isimleri css3 ile standartlaştırılmış ve bunlar html5 te kullanılmıştır. Header, footer, nav, aside, article gibi class isimleri html5 ile etiket halini almışlardır.
Bu yeni etiketlerin kullanımındaki en önemli amaç, arama motoru botlarına; bu etiketlerin kullanıldığı alanda ne tür içeriğin olduğunu bildirmektir. Örneğin, nav etiketleri içerisinde sitenin menüleri kullanılır. Footer etiketleri sitenin alt bilgi kısmının olduğunu belirtir. Article site yazarının bilgilerinin olduğu bölümdür gibi bilgilerle botların siteyi daha iyi ve hızlı taramasına imkan sağlanır.
HTML 5 İle Gelen Etiketler
HTML 5 ile büyük bir çığır açıldı diyebiliriz. Aslında gereklilikten doğan bir güncellemeydi. Çünkü javascript ve diğer html bağlantılı dillerinde kendisini yenilemesi. Browserların gelişmesi ve yeni kodlama temellerinin atılması. HTML’in de kendini geliştirmesinin önünü açmış oldu.
HTML 5 ile gelen yeni etiketlere bakacak olursak;
<canvas>, <audio>, <video>, <time>, <summary>, <source>, <progress>, <caption>, <ruby>, <rt>, <rp>, <output>, <meter>, <mark>, <keygen>, <header>, <nav>, <footer>, <article>, <hggroup>, <figure>, <figcaption>, <embed>, <aside>, <command>,<datalist>, <details>
Bu etiketler HTML 5 ile birlikte gelirken, HTML ve XHTML sürümlerinde kalan ve artık kullanılmayacak olan etiketlerde oldular.
<acronym>, <xnm>, <u>, <tt>, <strike>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <s>, <noframes>, <frameset>, <frame>
HTML 5 ile gelen tüm yenilikler arama motorları ve tarayıcıların siteleri daha sağlıklı bir şekilde yorumlayabilmeleri için türetilmişlerdir. Aynı şekilde kullanımdan kaldırılan etiketlerin etkilerini CSS ile yapabiliyor olmamız artık kullanılmalarına sebep olmuştur.
HTML 5 ile birlikte sadece etiketler getirilmedi. Aynı zamanda parametrelerde de değişiklikler ve yenilikler oldu; autocomplate, autofocus, form, form overrides, list, min, max, height, width, step, multiple,pattern, placeholder.
HTML 5 gerçekten kullanıcı ve yazılımcı dostu bir sistem olarak karşımıza çıktı. Daha önceleri sayfa içerisinde biraz canlılık ve etkileşim istediğimizde başvurduğumuz javascript kodlarını eskisi kadar sık kullanmıyoruz. Tabi ki bunun nedeni jquery gibi freamworklerin de piyasaya çıkmış olması ama asıl önemli olan HTML 5 ile bazı javascript kodlarının yerine direk olarak yeni gelen etiketleri ve css özelliklerini kullanarak işlemler yapabiliyoruz.
HTML-5’in amacı ve en büyük getirisi, arama motorları tarafından indexlenme şekli oldu. HTML-5’ten önce arama motoru botları sayfayı ziyaret ettiğinde sayfadaki tüm kodları tarar ve yazısal içerikleri, bağlantıları alır ve gerekli incelemeyi yapardı. HTML-5 ile gelen yapısal etiketler sayesinde Semantik web dediğimiz, Web-3.0 Kavramı da böylece gelmiş oldu.
Semantik webde HTML 5 ile gelen yeni etiket ve parametreler işimizi kolaylaştırıyor. Örneğin; Header etiketleri arasına eklediğimiz kodların sayfanın üst kısmını ilgilendirdiği, Nav etiketlerinin bağlantıları ya da menüleri ilgilendirdiğini, sidebar etiketleri arasındakilerin sitenin sol veya sağ tarafındaki blog kısmı olduğunu gibi bölümleri tanımlayarak sayfamızdaki alanları önem sırasına göre indexliyor ve buna göre de bizim de işimize gelen kısmı sayfamızdaki önemli yerleri ilgili etiketler arasına koyuyor olmamızdır.
