HTML5 dan Masa Depan Internet

Perkembangan HTML 5

Perkembangan Web semakin tidak dapat dipungkiri. Situs-situs baru dan inovatif yang diciptakan setiap hari, memperlebar batas-batas dari HTML ke segala arah. HTML 4 telah digunakan sekitar hampir satu dekade dari sekarang, dan pengembang terus mencari teknik baru untuk meningkatkan fungsionalitas yang terkendala oleh bahasa dan browser. Untuk memberikan lebih banyak fleksibilitas dan interoperabilitas bagi pengembang, dan memungkinkan website dan aplikasi lebih interaktif dan menarik, HTML 5 diperkenalkankan dengan meningkatkan berbagai fitur termasuk kontrol form, API, multimedia, struktur, dan semantik. Sejak tahun 2004 hingga saat ini dilakukan pengembangan bersama antara W3C HTML WG dan WHATWG . Banyak pemain kunci yang berpartisipasi dalam upaya W3C tersebut termasuk perwakilan dari empat vendor browser utama: Apple, Mozilla, Opera, dan Microsoft, dan berbagai organisasi lain dan individu dengan beragam kepentingan dan keahlian.

Berikut perjalanan panjang perkembangan HTML 5 hingga sekarang:

• Pada tahun 1997, W3C mengumumkan tidak akan lagi memperpanjang HTML 4 dan melihat XML dan XHTML sebagai masa depan. Penanganan Kesalahan Draconian, (Draco adalah pemimpin Yunani yang diberi hukuman mati karena pelanggaran kecil), diinstruksikan bahwa browser adalah untuk memperlakukan semua kesalahan dalam XML sebagai sesuatu yang fatal. Dengan 99% dari halaman web menampilkan kesalahan kecil, dan kurangnya fitur-fitur baru dalam XML, banyak webmaster mengabaikan standar baru atau lanjutan untuk melayani situs Web mereka sebagai HTML, bahkan ketika mengadopsi XHTML.
• Pada tahun 2004, sekelompok pengembang dan vendor browser termasuk Apple, Opera dan Mozilla memberikan presentasi kepada W3C pada perkembangan HTML 4 untuk menyertakan fitur baru untuk aplikasi web modern. W3C menolak proposal mereka memperluas HTML dan CSS. Mereka berniat memberontak perkembangan HTML4 dan memisahkan diri dari W3C, membentuk kelompok kerja mereka sendiri yang disebut WHATWG (Web Hypertext Applications Technology Working Group). Inti dari keyakinan WHATWG adalah kompatibilitas mundur dan mengampuni penanganan kesalahan. Visi WHATWG adalah untuk memperpanjang fitur HTML termasuk penanganan form sambil memastikan bahwa hal itu akan menurunkan keanggunan di browser lama. Sementara dunia W3C ingin pindah ke XML standar baru, WHATWG direncanakan untuk mengevolusi HTML yang ada untuk mendukung internet modern.
• Pada tahun 2006, Tim Berners-Lee, pendiri W3C, mengakui bahwa para pemberontak di WHATWG telah mendapatkan momentum dan mengumumkan bahwa W3C akan bekerja sama dengan WHATWG untuk mengembangkan HTML. Kelompok Kerja W3C HTML dibentuk, bekerja dengan HTML dalam kaitannya dengan XHTML. HTML5 secara resmi lahir.
• Pada bulan Oktober 2009, W3C menutup XHTML2 dan membuat HTML 5 Internet masa depan. Para perompak mengambil alih kapal!

(dikutip dari http://www.uprian.com/2010/06/mengenal-html5-web-masa-depan-internet.html)

Struktur HTML 5

HTML 5 memperkenalkan seluruh set elemen baru yang lebih mudah untuk membuat struktur halaman. Pada HTML 4, halaman web secara umum terdiri dari header, footer dan kolom dan hari ini, adalah cukup umum untuk menandai mereka menggunakan elemen div, memberikan masing-masing deskriptif id atau class. Gambar berikut menunjukkan tata letak dua kolom yang khas ditandai dengan menggunakan divs dengan id dan atribut class. Halaman ini berisi header, footer, dan bar navigasi horisontal di bawah header. Isi utama berisi artikel dan sidebar di sebelah kanan.

Gambar 1. Tata letak web menggunakan HTML 4

Penggunaan div elemen ini terutama karena versi terbaru dari HTML 4 memiliki kekurangan pada aspek semantik yang diperlukan untuk menggambarkan bagian-bagian ini. HTML 5 menggunakan isu ini untuk memperkenalkan unsur-unsur baru yang mewakili masing-masing bagian yang berbeda. Elemen-elemen div dapat diganti dengan unsur-unsur baru: header, nav, bagian, artikel, samping, dan footer seperti pada gambar dibawah ini.

Gambar 2. Tata letak web menggunakan HTML 5

 

Elemen baru di HTML 5

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

1. section serupa seperti h1-h6.
2. article bisa berupa entri blog atau tulisan konten.
3. aside menyajikan konten pelengkap.
4. header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
5. footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
6. dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
7. yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.

Dikenalkan pula beberapa atribut baru, seperti:

1. atribut media, ping pada elemen pranala,
2. autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input dan form,
3. reversed pada elemen ol untuk urutan besar ke kecil.

 

Video dan Audio pada HTML 5

Dalam beberapa tahun terakhir, video dan audio pada web telah menjadi semakin layak dan situs seperti YouTube, Viddler, Revver, MySpace, dan lainnya membuat bagi siapa saja lebih mudah untuk mempublikasikan video dan audio. Namun, karena HTML saat ini tidak memiliki sarana yang diperlukan untuk menanamkan dan mengontrol multimedia itu sendiri, banyak situs yang mengandalkan Flash untuk menyediakan fungsionalitas itu. Meskipun ada kemungkinan untuk menanamkan multimedia menggunakan berbagai plug-in (seperti QuickTime, Windows Media, dll), Flash saat ini hanya banyak digunakan yang menyediakan solusi cross-browser yang kompatibel dengan API untuk pengembang yang diinginkan.

Sebagaimana dibuktikan oleh media berbasis Flash player, pengembang tertarik untuk memberikan antarmuka bagi pengguna yang membuat mereka mengkostum antar muka, yang umumnya memungkinkan pengguna untuk memutar, jeda, berhenti, mencari, dan mengatur volume. Rencananya adalah untuk menyediakan fungsi ini di browser dengan menambahkan dukungan asli untuk embedding video dan audio dan menyediakan DOM AP Apakah untuk script untuk mengontrol pemutaran. Baik Opera dan WebKit telah merilis membangun dengan dukungan parsial untuk elemen video. Anda dapat men-download percobaan membangun Opera atau terakhir malam membangun dari WebKit untuk mencoba contoh-contoh ini. Opera termasuk dukungan untuk Ogg Theora dan WebKit mendukung semua format yang didukung oleh QuickTime, termasuk codec pihak ketiga.

Cara paling sederhana untuk menanamkan video pada HTML 5 adalah dengan menggunakan video elemen dan memungkinkan browser untuk menyediakan antarmuka pengguna default. Para controls atribut atribut boolean yang menunjukkan apakah atau tidak penulis ingin UI ini atau off secara default.

<video src="video.ogv" controls poster="poster.jpg" width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

Opsional atribut poster dapat digunakan untuk menentukan gambar yang akan ditampilkan di tempat video sebelum video telah mulai bermain. Meskipun ada beberapa format video yang mendukung fitur poster mereka sendiri bingkai, seperti MPEG -4, ini memberikan solusi alternatif yang dapat bekerja secara independen dari format video.

Berikut ini menunjukkan sangat sederhana untuk menanamkan audio ke sebuah halaman HTML 5 dengan menggunakan audio elemen. Audio tidak memiliki elemen width , height , dan poster atribut.

<audio src="music.oga" controls>
<a href="music.oga"> Download lagu </a>
</audio>

Semantics

Untuk web designer yang sering meng-abuse div dan span sebagia elemen nav, fret no more. Akan ada tag khusus untuk navigasi, section, footer, dll. Tag yang kaya semantic seperti ini pasti akan lebih bermanfaat dari pada tag yang hanya punya informasi format dan layout saja. Dan bagi mesin, HTML5 akan jadi lebih bisa dimengerti. Tidak berhenti di situ saja, nantinya juga akan ada dukungan microformats yang lebih baik dari sekarang ini. Dukungan microformats ini akan memanfaatkan tag dan atribut baru yang diperkenalkan di HTML 5.

Kelebihan dan kekurangan HTML 5

Beberapa kelebihan yang dijanjikan pada HTML 5:

1. Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
2. Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
3. Integrasi (‘inline’) MathML dan SVG dengan doctype yang lebih sederhana.
4. Penulisan kode yang lebih efisien.
5. Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.

Yang masih diperdebatkan dalam pengembangan HTML 5:

1. Makna semantik beberapa elemen presentasioal.
2. Fitur aksesibilitasnya. Seperti atribut alt dan summary.

Contoh kesederhanaan HTML 5:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Contoh dokumen HTML 5</title>
</head>
<body>
<p>Teks paragraf disini.</p>
</body>
</html>

Yang menarik dari kesederhanaan kode di atas adalah 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"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

di atas elemen head.
Penutup

Evolusi berdasarkan ‘kebutuhan dan pengembang imajinasi pengguna, sebagai standar terbuka, HTML5 mewujudkan beberapa aspek terbaik dari web: bekerja di mana-mana, dan pada perangkat apapun dengan browser modern. HTML5-kompatibel browser dalam rangka untuk menikmati situs-situs dan aplikasi yang mengambil keuntungan dari fitur HTML5 itu. Keuntungan anda sebagai pengguna internet, aenda memiliki banyak pilihan ketika datang ke web browser – dan tidak seperti TV, browser web dapat didownload secara gratis. Fitur lain termasuk kemampuan HTML5 memungkinkan pengguna berinteraksi dengan aplikasi web bahkan ketika mereka tidak memiliki koneksi internet, serta kemampuan drag-and-drop. Di Gmail, misalnya, memungkinkan pengguna mudah drag-and-drop untuk segera melampirkan file ke pesan email hanya dengan menyeret file dari komputer desktop pengguna ke dalam jendela browser.

 

Sumber rujukan :

Lachlan Hunt.  A Preview of HTML 5. http://www.alistapart.com/articles/previewofhtml5

_______. Apa saja Isi HTML 5?. http://www.navinot.com/2009/10/16/apa-saja-isi-html-5/

_______. HTML5 or, in the beginning there was no <video>. http://www.20thingsilearned.com/en-US/html5/1

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

_______. Mengenal HTML5 – Web Masa Depan Internet Modern. http://www.uprian.com/2010/06/mengenal-html5-web-masa-depan-internet.html