HTML 5

Harapan-putra.blogspot.com - 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.

( secara prinsip penambahan microformat dalam html 5 seperti yang diterapkan pada website ini adalah sesuatu yang legal karena penambahan micordata dilakukan melalui html class tanpa terpengaruh oleh jenis tag yang digunakan )

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:

<!doctype html>

<html>

<head>

<title>Contoh dokumen HTML 5</title>

</head>

<body>

<p>Teks paragraf disini.</p>

</body>

</html>

Yang menarik dari kesederhanaan kode di atas:

* Tidak perlu lagi memakai <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>. Walau tag meta tersebut masih diijinkan digunakan.

* Deklarasi <!DOCTYPE html> 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:

<?xml version=”1.0″ encoding=”UTF-8″?>

<head>

…

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.

Salah satu bentuk revolusi dari versi terbaru iznyndotcom adalah penggunaan HTML 5 dan CSS 3.0. Dua standard teknologi web yang sampai saat artikel ini ditulis masih dalam bentuk draft dan terus dikembangkan oleh W3C dan sangat ditunggu kehadirannya oleh web designer diseluruh dunia.

Karena belum berbentuk rekomendasi, maka HTML 5 dan CSS 3.0 masih cukup minim penggunaannya dan dukungan dari browser juga masih rendah. Sebagai contoh untuk dapat memasukkan attribute CSS ke dalam HTML 5, kita sebelumnya masih harus memperjelas level blok dari element tersebut dengan menggunakan attribute CSS display.

Contoh lainnya adalah di dalam penggunaan CSS 3.0. Untuk dapat menggunakan attribute baru dalam CSS 3.0 kita masih harus menggunakan attribute tambahan yang dikembangkan oelh browser. Sehingga ketersediaan style akan sangat tergantung pada dukungan browser yang menampilkan halaman dengan attribute CSS 3.0.

Walapun dengan segala kekurangan diatas, namun kita tetap harus membuat sebuah persiapan karena suatu saat nanti pasti akan mengunakan kedua standard ini. Inilah alasan utama penggunaan HTML 5 dan CSS 3.0 dalam website ini. Di sisi lain, ada harapan bahwa dengan adanya penggunaan HTML 5 dan CSS 3.0 dapat memberikan kesempatan kepada kami untuk berpartisipasi dalam perkembangan kedua standard tersebut.

Penggunaan HTML 5

Dalam mengembangkan website ini kami mencoba untuk menerapkan hampir seluruh tag HTML baru seperti header, footer, article, hgroup, time, aside, nav. Selain berdasarkan standard yang dikembangkan oleh W3C, penerapan HTML 5 banyak terbantu oleh beberapa tutorial dari website seperti alistapart dan html5doctor.

Salah satu contoh penggunaan HTML 5 pada website ini adalah di dalam data post. Kami menyusun setiap post dengan struktur HTML sebagai berikut :

<article>
<header>
  <h1>Title Here</h1>
  <p>

    <time pubdate datetime="machine date">Post date</time>
  </p>
</header>
<div>
  Content Here ....
</div>

<div id="entry-metadata">
  <section>
    Category List
  </section>
  <section>
    Tag List
  </section>

</div>
<section id="entry-related">
  Related Post
</section>
</article>

Artikel ini tidak akan membahas teknis dari penggunaan HTML 5 secara mendetail, namun disini kami akan menjelaskan sedikit tentang struktur HTML diatas. Satu hal yang dapat disimpulkan setelah menggunakan HTML 5 adalah bahwa adanya tag baru tersebut memberikan kita peluang yang lebih luas dalam mendeskripsikan content. Sebelumnya content hanya dapat dideskripisikan sebagai paragraph, title dan beberapa konteks lain melalui tag inline seperti emphasis, abbreative dsb.

Dengan HTML 5, kita dapat menambahkan arti dari suatu content sebagai header, footer ataupun memecah content menjadi beberapa bab. Namun semua manfaat ini tidak akan kita dapatkan apabila tidak memiliki pemahaman yang kuat terhadap fungsi dari setiap tag. Di sisi lain kurangnya pemahaman dari setiap fungsi tag dapat menyulitkan kita dalam membuat keputusan terhadap pembentukan konteks dari content.

Ada satu kenyataan lain berkaitan dengan penggunaan HTML 5 yaitu kembalinya fungsi tag div sebagai kontainer murni yang tidak memberikan arti apapun terhadap content yang dikandungnya. Penggunaan div lebih sebagai pengait di dalam CSS dan Javascript.

Microformat

Inilah salah satu yang sedikit membingungkan dalam pembentukan HTML 5. Microformat pada dasarnya digunakan untuk menambahkan informasi sematic ke sebuah halaman web menggunakan HTML classes. Ia muncul sebagai akibat kurang mampunya tag HTML dalam menyediakan fungsi tersebut. Dengan semakin banyaknya tag baru yang dapat mengartikan content dalam berbagai konteks, masih bergunakah Microformat di dalam HTML 5 ?

Memang benar beberapa microformat dapat digantikan dengan tag HTML 5, sebagai contoh Microformat datetime-design-pattern dapat diganti dengan element time. Namun demikian selama stadard HTML 5 belum diterapkan secara luas maka microformat masih sangat diperlukan. Cara yang paling bijaksana adalah mencampur keduanya sampai ada standard yang pasti dan pengunaan yang luas dari HTML 5.

Secara prinsip Penambahan Microformat dalam HTML 5 (seperti yang diterapkan pada website ini) adalah sesuatu yang legal karena penambahan micordata dilakukan melalui HTML class tanpa terpengaruh oleh jenis tag yang digunakan. Terlebih lagi jika microdata HTML 5 kurang dapat memenuhi keinginan kita, maka microformat masih tetap diperlukan.

Penggunaan CSS 3.0

Penggunaan CSS 3.0 pada website ini masih belum terlalu signifikan. Hanya beberapa attribute yang kami gunakan untuk memperkuat style dokumen. Attribute tersebut antara lain font-face, text-shadow dan border-radius.

Namun karena attribute ini masih belum disupport oleh semua browser maka efeknya tidak akan dirasakan pada beberapa browser. Saya merekomendasikan untuk menggunakan firefox untuk mendapatkan hasil maksimal dari website ini.

Penutup

Pada dasarnya artikel ini bukan menjelaskan teknis penggunaan HTML 5 maupun CSS 3 namun lebih untuk memperkenalkan penggunaan dua stadard ini di dalam struktur website.

daftar pustaka :

http://iznyn.com/blog/2010/06/14/html-5-dan-css-3-0-di-iznyndotcom/

http://daniiswara.net/2009/09/mencoba-html-5/

http://caiim.blog.binusian.org/

Harapan Putra

Tulisan Terkait

No comments:

Post a Comment