HTML5 Nedir?

Vatanay Özbeyli HTML5, Tasarım Unsurları

HTML5, yıllardır kullandığımız HTML’in en güncel ve gelişmiş versiyonudur. Önyüze ve web sayfasının iskeletine müdahale ettiği için programlama dili yerine biçimlendirme dili olarak anılır. İlk olarak 2012 yılında yayınladığımız bu makale sürekli güncellenerek HTML5’in web tarafında zaman içerisinde bıraktığı izleri en iyi şekilde size yansıtıyor. Kahvenizi hazırlayın ve arkanıza yaslanın. HTML5’in dünyasına detaylı bir yolculuğa çıkıyoruz.

HTML5’i hangi tarayıcılar destekliyor?

Safari, Chrome, Firefox ve Opera gibi birçok popüler tarayıcının güncel versiyonları HTML5’i kusursuz bir şekilde desteklemekte. Ayrıca Internet Explorer tarafında bu destek 9.0 versiyonuyla geliyor. Bunlara ek olarak iPhone, iPad veya taşınabilir Android cihazlar da mobil tarayıcılarında HTML5 destekli olarak geliyorlar.

Detaylar

HTML, HTML 4.01 isimleri 1999 yılında hizmete sunulmuştu. Fakat artık yerlerini gelişmekte olan HTML5 ‘e bırakmaktalar.

HTML5 web geliştiricilerinin kodlamalarında kullanabileceği en güncel iskelet sistemdir. Web 1.0‘ın asosyal tasarımları Web 2.0 ile kullanıcılarına kucak açmıştı. Adını sık sık andığımız Web 3.0 ile de etkileşim tavan yapmakta.

HTML5 ve CSS3‘de bu süreci hızlandıran en etkin elemanlar.

HTML5 ile kod nasıl yazılır?

Klasik HTML yapısından en temel farkı kodun <!DOCTYPE html> şeklinde başlıyor olması.

HTML’in önceki versiyonlarına aşina kişilerin endişeleri yersiz. Çünkü HTML5 yapmaya alıştığımız ama gereksiz efor harcadığımız süreçleri de kısaltıyor. Örneğin script tanımlaması yaparken text/javascript bildirimini de beraberinde gösterirdik. Ya da CSS’i sayfaya eklemek için bir link tanımı yaparken type belirtmemiz gerekiyordu. Artık bu devir bitti. Hızlıca HTML’e esneklik getiren yeni düzenleri tanıyalım.

Artık tag isimlerini büyük harfle bile yazabiliriz.

Eskiden sadece küçük harflerle yazabildiğimiz etiket isimlerini artık büyük harflerle bile yazabiliyoruz. Çok büyük bir yenilik gibi gözükmese de işin esneklik tarafında fark yaratan detaylardan sadece biri.

Tanım yorumları opsiyonel hale geldi.

Bir JS veya CSS tanımlarken yazdığımız tip tanımlamalarını hatırlıyor musunuz? Onlar artık opsiyonel.

Bu güncelleme

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>

yerine

<link rel="stylesheet"href="style.css">
<script src="script.js"></script>

yazabiliriz anlamına geliyor.

Bu da ilginizi çekebilir  Haftanın Ücretsiz Web Teması #29

Kapatmayı unuttuğumuz HTML elemanları sorun olmaktan çıkıyor.

Dikkatsizlik sebebiyle çoğu kez açtığımız div veya paragraf gibi elemanları kapatmadığımız oluyor. Bu tip durumlarda önyüzde büyük bozulmalar gözlemlenebiliyor(du). HTML5 ise bu sorunları kendiliğinden çözümleyebiliyor.

<p>Ben açık unutulmuş bir paragrafım.
<p>Ama yine de çalışıyorum!

Şaşırtıcı değil mi?

Daha az class daha az id tanımlaması.

Artık her öğeyi CSS ve JS tarafında yakalamak daha kolay. HTML5 öncesinde DIV üzerinden yürüyen tasarımları unutun. Section, article, aside, header, footer, nav, dialog veya figure gibi tanımlamalar sayesinde class ve id yoğunluğundan kurtuluyoruz.

Korkmayın. Standart attributeler hala yerli yerinde.

En çok endişe edilen ise çalışan yapıdaki web sitelerinin HTML5’e çevrilmesi halinde yaşanacak sorunlar. Merak etmeyin. HTML5 accesskey, align, background, bgcolor, class, contenteditable, contextmenu, data-xxxx, draggable, height, hidden, id, item, itemprop, spellcheck, style, subject, tabindex, title, valign ve width gibi alışık olduğumuz attributeleri destekliyor.

Oluşum

Web Köprü Uygulama Teknolojisi Çalışma Grubu web formları ve uygulamaları üzerine çalışırken, World Wide Web Konsorsiyumu XHTML 2.0. üzerinde çalışıyordu. Ve bu iki isim HTML’i geliştirmek amacıyla bir araya geldi.

W3C ve  WHATWG isimlerinin işbirliğiyle oluşumunu sürdüren HTML5, yeni olmasına rağmen birçok güçlü browser tarafından desteklenmekte.

HTML5 için oluşturulmuş bazı kurallar :

      1. Yeni özellikler HTML, CSS, DOM, ve JavaScript üzerinden olmalı
      2. Dışarıdan eklenen uygulamaların sayısı düşmeli (Flash gibi)
      3. Daha iyi hata raporlaması olmalı
      4. Yazılım düzeni için daha fazla biçimlendirme imkanı olmalı (markup)
      5. Aygıttan bağımsız çalışmalı
      6. Gelişim süreci kullanıcıya açık olmalı

Yapı

HTML5 için sadece bir adet <!doctype> belirtilmeli ve o aşağıdaki gibi olmalı :

<!DOCTYPE html>

Küçük bir HTML5 sayfa yapısı örneği :

<!DOCTYPE html>
<html>
<head>
<title><em>Başlık</em></title>
</head>

<body>
<em>İçerikler</em>
</body>

</html>

Dikkat çeken özellikleri

      1. 2 boyutlu çizim için <canvas> elemanı
      2. Multimedyalar için <video> ve <audio> elemanları
      3. Yerel depolama desteği
      4. Belirli alanlar için yeni elemanlar : <article>, <footer>, <header>, <nav>, <section>
      5. Yeni form kontrol araçları : calendar, date, time, email, url, search