HTML5 nedir ?ve HTML5 etiketleri

Ceybi

Web uygulamaları ile iç içe olan bir developer'ın Web'in yeni stantartlarını belirleyecek olan HTML5'e sırtını dönmesi mümkün değil diye düşünmekteyim. Internet Explorer 9 ile birlikte artık neredeyse tüm tarayıcıların desteğinide arkasına alan HTML5 sahip olduğu özellikleri ve bu özellikler sayesinde sunduğu kolaylıklar sayesinde artık sayfalarımızın boyutunda ciddi bir oranda küçülmeyi sağlaması yanısıra işlerimizide oldukça kolaylıştırmakta. Elimden geldiğince HTML5' bloğumda ciddi bir yer ayırarak bolca paylaşımda bulunmayı planlıyorum. HTML5 için paylaşıma sunduğum bu ilk makalede çok kısaca HTML5'in ne olduğuna deyindikten sonra HTML5 ile gelen yeni özellikleri başlıklar halinde paylaşmaya çalışacağım ve süreç içerisinde ise bu başlıkları detaylı olarak inceleyeceğiz.

HTML, XHTML ve HTML DOM için yeni standart haline gelecek olan HTML5 için tam anlamıyla kabul görmesi adına 2022 gibi uzak bir tarih dile getiriliyor olsa da tarayıcıların bütün güçleri ile HTML5'e sağladıkları destek ve developer'lar tarafından çok sevilmiş olması bu belirtilen tarihin çok ama çok fazlası ile öne çekileceği kanısını bende uyandırmaktadır. Konu internet olunca elbetteki tarayıcılar birinci önceliğimiz olmakta ve inatçı kullanıcı dediğimiz (halen birçoklarının Internet Explorer 6.0 kullandığı düşünülürse) kesim başımızı biraz ağırtacak gibi

Malüm HTML için en son sürüm 1999 yılında çıkartıldı ve o yıldan bu güne artık çok şeyin değiştiği aşikardır. En azından ihtiyaçlar ve ihtiyaçlar ile birlikte beklentiler artık bu eski sürümün yetersizliğini her defasında dile getirmemize neden oldu. Örneğin video lar neredeyse projelerimizde proje sahiplerinin olmazsa olmaz istekleri arasında yer almakta ve bir videoyu sayfamızda oynatabilmemiz için azımsanamayacak boyuttaki video oynatıcılara başvurmaktaydık ve sayfalarımızın boyutunun fazla oluşu elbetteki olabildiğince can sıkıcı bir durumdu. Tabi bunun gibi sayabileceğimiz birçok örnek sözkonusu. İşte bu ve bunun gibi durumlar için birşeyler yapılmalıydı. Ama ne ?

Aslında bu soru biraz gereksiz gibi oldu çünkü ihtiyaçlar belliydi. O halde yapılması gerekenlerde bellidir demektir. Fakat işlem ihtiyaçların geliştirilmesi ile bitmiyordu bunu bir standart olarak kabullendirmek gerekirdi ki bu standartları kimler nasıl belirliyordu ? Sanırım bu değişikliklerin standartlaştırılmasında tam olarak kimlerin görevlendirildiğini bilmesekte bunun kolay bir iş olmadığını hepimiz tahmin ediyoruzdur.

Şimdi dilerseniz merak ettiğimiz (bilmeyenler için söylüyorum) bu guruplara bir göz atalım.

• Web Hypertext Application Technology Working Group ( WHATWG ):2004 yılında çalışan bireyler tarafından Tarayıcı sağlayıcıları Apple, Mozilla, Google ve Opera için 2004 yılında kurulmuştur ve web uygulamaları gelişimi için HTML ve API lerini üretmektedir.

• World Wide Web Consortium ( W3C ): HTML5 tanımlamalarını dağıtmakla görevli olan HTML çalışma guruplarını içermektedir.

• Internet Engineering Task Force ( IETF ): HTTP gibi internet protokollerinden sorumlu grupları içerir.
İşte HTML5 bu gurupların çabaları ile şekillenmiş ve süreç içerisinde de standart haline gelecektir..


HTML5 geliştirilirken bazı özelliklere shaip olması şart hatta bu özellikler kural olarak kabullenildi.

• Yeni özellikler, HTML, CSS, DOM ve JavaScript dayalı olmalıydı.
• Dış eklentilere ihtiyacın minimum ölçüde olması gerekliydi (Flash gibi).
• Daha iyi hata denetimi yapılabilmeliydi.
• Görseller için daha az görsel eleman ve daha çok script kullanılmalıydı.
• HTML5 server gibi cihazlardan bağımsız olmalıydı.
• Geliştirme süreci kullanıcılara açık olmalıydı.

Birkez daha belirtmekte fayda varki HTML5 henüz resmi bir standart değildir fakat buna rağmen projelerimizde daha şimdiden olmazsa olmaz haline gelmeye başlamıştır.

Yeni HTML5 Elemanları

Malüm 1999 yılında HTML 4.01 bir standart haline geldi. Fakat yukarıda da belirttiğim gibi o günden bu güne ihtiyaçlarımız çok değişti. HTML 4.01 de olan bazı özellikler bu ihtiyaçlar nedeni ile değiştirildi veya HTML5 de tamamen silindi.


Yeni Biçimlendirme Elemanları



Etiket Tanım <article> Yazı veya makaleleri tanımlamak için kullanılır. <aside> Konuyla alakalı farklı bir içerik/bilgi vermeye yarar. <command> Command butonu eklemeye yarar. <details> Bir dokümanın detaylarını belirtmeye yarar. <summary> Detayları elemanı içindeki bir başlık veya özet, <figure> Birden fazla medya elemanını ve onların başlıklarını göstermeye yarar. <figcaption> Figure etiketinin ilk veya son elemanı olarak başlık şeklinde eklenir. <footer> Bir bölümün sonunda veya bir sayfanın altında yer alan sayfa altlığı (sayfa numarası gibi) yaratmak içindir. <header> Bir bölüme veya bir sayfaya başlık eklemek için kullanılır. <hgroup> H1-H6 arası alt başlık grupları kullanılacağı zaman bu etiketten faydalanılır <mark> Cümle içerisinde işaret edilen, vurgulanan kısımlar için bu etiketten faydalanılır. <meter> Maksimum ve minimum değerleri belirli olan ölçüleri tanımlamaya yarar. <nav> “Anasayfa, Önceki, Sonraki” gibi navigasyon bağlantıları için kullanılır. <progress> Devam eden süreçleri belirtir (Örn: İndirmekte olduğunuz dokümanın tamamlanma yüzdesi: 55%). <ruby> Çince karakterler için kullanılan etikettir. <rt> Çince karakterlerin açıklama veya okunuşunu belirtmeye yarar. <rp> Çince karakterlerin desteklenmediğini belirtir açıklama notları yazmak içindir. <section> Bir belgenin bir bölümü için. Bölümler, başlıklar, altbilgiler, ya da herhangi bir belgenin diğer bölümlerini belirtmek için kullanılır.
<time> Bir zaman ya da bir tarih ya da her ikisini tanımlamak için kullanılır.
<wbr> Line-break fırsatı tanımlamak için kullanılır.
Yeni Medya Elemanları



Etiket Tanım <audio> Çeşitli uzantılı ses dosyalarını direk html ye yerleştirmek için kullanılıyor. <video> Çeşitli uzantılı video dosyalarını direk html ye yerleştirmek için kullanılıyor <source> Video veya ses öğeleri içinde tanımlanan medya elemanları için kaynak belirtilir.
<embed> Dışarıdan yüklenen interaktif bir içerik veya eklenti için kullanılır. (mesela .swf uzantılı dosyalar)
Canvas Öğesi

Canvas bir web sayfası üzerinde çizim yapmak için JavaScript kullanır.
Etiket Tanım <canvas> Javascript ile kontrol edilen bir 2 boyutlu bir çizim alanı
Yeni Form Elemanları



Etiket Tanım <datalist> Input etiketi ile açılan mönü yaratmak için kullanılır. <keygen> Formlarda anahtar yaratmak için kullanılır. <output> Bazı özel çıktıları belirtmeye yarar. Yeni Nitelik Değerler



Tip Tanım tel Giriş değeri türü telefon numarası search Giriş alanı bir arama alanı url Giriş değeri bir URL email Giriş değeri, bir veya daha fazla e-posta adresleri datetime Giriş değeri bir tarih ve / veya zaman date Giriş değeri bir tarihtir month Giriş değeri bir ay week Giriş değeri bir hafta time Giriş değeri türü zaman datetime-local Giriş değeri bir yerel tarih / zaman number Giriş değeri bir sayıdır range Giriş değeri belirli bir aralıkta bir sayıdır color # FFFFFF gibi onaltılık renk için bir değeri içerir.