Friday, January 8, 2010

HTML versi 5

HTML 5 sedang dirancang oleh W3C untuk meneruskan kesuksesan HTML 4 dan XHTML 1. Nampaknya HTML 5 akan menjadi favorit seperti yang terjadi pada DOCTYPE sejuta umat, XHTML 1.0 Transitional.

Kelebihan dan kekurangan HTML 5

Beberapa kelebihan yang dijanjikan pada HTML 5:


* Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.

* Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.

* Integrasi (‘inline’) MathML dan SVG dengan doctype yang lebih sederhana.

* Penulisan kode yang lebih efisien.

* Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.


Yang masih diperdebatkan dalam pengembangan HTML 5:


* Makna semantik beberapa elemen presentasioal.

* Fitur aksesibilitasnya. Seperti atribut alt dan summary.




Contoh HTML 5

Kesederhanaan HTML 5:









Contoh dokumen HTML 5





Teks paragraf disini.







Yang menarik dari kesederhanaan kode di atas:


* Tidak perlu lagi memakai . Walau tag meta tersebut masih diijinkan digunakan.

* Deklarasi adalah ‘case-insensitive’. Tidak harus huruf besar/kapital semua.


Sebagai XML, dengan tipe media application/xhtml+xml atau application/xml, HTML 5 cukup dideklarasikan dengan format tambahan:







...


di atas elemen head.

Halaman web lain yang sudah memakai HTML 5, diantaranya:


* Bruce Lawson

* Anne van Kesteren

* HTML 5 Test Page (Dani Iswara .Net). (Tentatif) Valid HTML 5 versi W3C.


Bukan kebetulan dua orang teratas adalah staf (peramban) Opera. :)

Elemen baru di HTML 5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:


* section serupa seperti h1-h6.

* article bisa berupa entri blog atau tulisan konten.

* aside menyajikan konten pelengkap.

* header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.

* footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.

* dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.

* yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.


Atribut baru di HTML 5

Dikenalkan pula beberapa atribut baru, seperti:


* atribut media, ping pada elemen pranala,

* autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input dan form,

* reversed pada elemen ol untuk urutan besar ke kecil.


Perubahan makna elemen

Ada beberapa elemen yang berubah makna, diantaranya:


* Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen i.

* Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.

* Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.

* dan lain-lain.


Elemen dan atribut yang tidak digunakan

Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5:


* center,

* font,

* strike, u, big,

* frame, frameset, noframes,

* acronym,

* longdesc,

* scope pada td,

* dan sebagainya.


Kesiapan peramban

Peramban bermesin Presto (Opera) versi terbaru nampak lebih banyak mendukung elemen baru HTML 5. Sementara peramban berbasis Gecko (Firefox dan turunannya), WebKit (Safari, Chrome, Midori), dan Trident (Internet Explorer) versi terbaru baru mendukung sebagian fitur HTML 5.

Perbedaan dari HTML 4.01/XHTML 1.x
. Berikut ini adalah daftar singkat perbedaan dan beberapa contoh-contoh spesifik.
  • Baru berorientasi pada aturan parsing parsing fleksibel dan kompatibilitas; tidak berdasarkan SGML
  • Kemampuan untuk menggunakan inline SVG dan MathML di text/html
  • elemen baru - section article footer audio video progress nav meter time aside canvas
  • Jenis bentuk baru kontrol - tanggal dan waktu, email url search
  • New atribut - ping (di a dan area charset (di meta async (di script
  • Global atribut (yang dapat diterapkan untuk setiap elemen) - id tabindex hidden data-* (custom data atribut)
  • Formulir akan mendapatkan dukungan untuk metode PUT dan DELETE juga bukan hanya GET & POST (lihat representasi negara transfer untuk digunakan kasus)
  • Unsur deprecated menjatuhkan - center font strike framset

sumber : http://daniiswara.net/2009/09/06/mencoba-html-5/ ; http://en.wikipedia.org/wiki/HTML5

0 komentar:

Post a Comment