Hal-hal Baru Pada HTML5

Hal-hal baru pada HTML5 merupakan modifikasi bahasa markah terbaru pada website. Dengan semakin majunya ilmu pengetahuan dan teknologi informasi, telah berdampak pada berbagai hal, tak terkecuali pada semakin majunya teknologi internet terutama pada program standar HTML. Hypertext Mark up Language atau yang biasa dikenal dengan HTML merupakan suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen.

HTML5 telah menjadi salah satu teknologi yang sangat ditunggu-tunggu oleh para web developer maupun para pengguna Internet. Banyak hal yang dijanjikan akan hadir di HTML5 yang dapat mengubah sebuah website menjadi lebih interaktif, dinamis serta lebih kaya konten dan fungsinya. Dengan semua fitur yang dimiliki oleh HTML5 maka bukan tidak mungkin HTML5 akan merajai dunia aplikasi kedepannya. Meskipun belum seluruh web browser mendukung teknologi ini, tetapi kemudahan dalam pengembangan maupun penggunaan diyakini akan menjadi nilai dari teknologi ini.

Dengan versi terbaru dari HTML5 ini, pasti juga memiliki beberapa fitur baru yang belum ada pada versi-versi sebelumnya. Berikut fitur-fitur baru yang dimilki HTML5, yaitu:

Hal-hal Baru Pada HTML5

1. Elemen Baru Di HTML5

Dengan munculnya versi terbaru dari HTML yakni HTML versi ke-5 maka HTML5 membawa beberapa elemen-elemen baru untuk mewujudkan struktur halaman web yang lebih baik. Elemen HTML sendiri merupakan semua yang terdapat diantara start tag sampai end tag. Beberapa elemen-elemen baru yang terdapat pada HTML5 diantaranya:

Tag	Keterangan
<article>	Menspesifikasikan konten yang bersifat independen, seperti artikel, blog post, forum post, dan sejenisnya.
<aside>	Digunakan untuk sebuah subkonten. Biasanya digunakan di dalam tag <article>.
<bdi>	Untuk teks yang tidak boleh terikat pada arah teks-elemen induknya
<command>	Sebuah button, atau radiobutton, atau checkbox.
<details>	Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen.
<summary>	Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag <details>
<figure>	Untuk mengelompokkan sekumpulan section, biasanya berupa video.
<figcaption>	Berisi caption/keterangan yang ditempatkan di dalam tag <figure>
<footer>	Digunakan sebagai footer dari sebuah halaman
<header>	Digunakan sebagai header dari sebuah halaman
<hgroup>	Digunakan untuk sekumpulan heading
<mark>	Digunakan pada teks yang akan di highlight
<meter>	Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan
<nav>	Digunakan untuk sekumpulan navigasi
<progress>	Membuat Progress bar
<ruby>	Digunakan untuk anotasi ruby
<rt>	Untuk menjelaskan anotasi ruby
<rp>	Menunjukkan elemen jika browser tidak mendukung ruby
<section>	Untuk sebuah section di dalam halaman. Seperti Bab, Footer, dan sebagainya
<time>	Untuk mendefinisikan waktu dan tanggal
<wbr>	Word Break. Untuk memisah suatu kata bila diperlukan.

2. Atribut Baru Di HTML5

Atribut HTML merupakan suatu informasi  elemen, dimana atribut ini memberikan informasi tambahan tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal tag/start tag. Cara untuk medefinisakan atribut dengan memberikan informasi NAME dan VALUE dari suatu elemen, seperti name=”value“.

Sebelumnya HTML sendiri memiliki atribut-atribut standar yang hampir dipakai pada semua elemen. Atribut-atribut standar tersebut terbagi menjadi tiga kelompok, yakni Atribut Core, Atribut Language, dan Atribut Event. Untuk atribut-atribut baru yang dimiliki oleh HTML5 itu sendiri, antara lain adalah:

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.

Contoh Atribut :

Link HTML atau HTML Links didefinisikan dengan tag <a>. Alamat link inilah yang merupakan atribut.

<a href="http://www.tik.org/">Tik</a>

<a> merupakan elemen html, href adalah name atau nama atribut sedang Tik adalah value atau nilai atribut.

Nilai suatu atribut harus selalu dimulai dan diakhiri dengan tanda petik. Biasanya menggunakan tanda petik (“…”). Tanda petik ini mengapit petikan langsung dari suatu nilai elemen. Tanda petik tunggal juga diperbolehkan untuk digunakan walaupun dalam keadaan tertentu nilai suatu atribut bisa berisi tanda kutip, untuk itu di pergunakan tanda kutip tunggal yang mengapit petikan yang tersusun di dalam petikan lain. Contoh: name=’Organisasi “Cracker” Semarang’

Sangat disarankan untuk penulisan atribut dan nilainya tetap menggunakan huruf kecil karena pada versi HTML yang lebih baru (X)HTML meminta penulisan menggunakan huruf kecil.

3. Fitur Baru Pada HTML5

Fitur yang satu ini memungkinkan kita untuk memasukkan objek 2D atau 3D kedalam halaman web. Dengan canvas dapat membuat render grafik, diagram, gambar dan animasi secara dinamis. Awal mulanya konsep dari teknologi canvas ini diperkenalkan oleh Apple Inc. Untuk digunakan dalam Mac OS X WebKit untuk membuat dashboard widgets. Sebelum canvas muncul, kita hanya bisa membuat gambar dalam browser melalui plug-ins seperti Adobe plug-ins for Flash and Scalable Vector Graphics (SVG), Vector Markup Language (VML) only in Internet Explorer, or other clever JavaScript hacks. Fitur baru pada HTML5 antara lain adalah :

1. Doctype baru

HTML lama yang biasanya memiliki Doctype yang panjang, HTML5 datang dengan membawa doctype yang lebih singkat sehingga kita tak perlu menghapal doctype lama yang panjang. Hal ini dapat dibuktikan dengan contoh berikut ini:

Dalam HTML 4 penulisan doctype seperti ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.wwe.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Namun dengan HTML5 penulisannya hanya seperti ini

<!DOCTYPE html>

2. HTML5 Audio

Salah satu fitur baru HTML5 yang paling fenomenal adalah disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa menggunakan plugin tambahan seperti flash player. Dengan menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita.

Untuk menambahkan audio ke dalam web kita, cukup ketikkan kode berikut:

<!DOCTYPE html>

<html>

<body>

<audio controls="controls">

  <source src="music/FromHere.ogg" type="audio/ogg">

Your browser does not support the audio element.

</audio>

</body>

</html>

Di coba pada Google chrome Versi 22.0.1229.94

Keterangan dari tags diatas: 

•  <audio>, tag audio utama, digunakan untuk memasukkan audio ke dalam HTML. 
•  <source>, digunakan untuk mengambil source file yang akan dimainkan audionya.

Atribut pada audio

• Autoplay, atribut ini digunakan untuk member opsi kepada tag audio apakah langsung dimainkan secara otomatis atau tidak. 
• Controls, atribut ini memberikan pilihan untuk menampilkan kontrol audio (volume, seeker, play/pause button). 
• Type, digunakan untuk mendefinisikan tipe audio yang dimainkan. 
• Src, digunakan untuk mendefinisikan source audio yang dimainkan.

Saat ini, ada tiga tipe file audio yang sudah didukung HTML5 yaitu MP3, WAV, dan OGG. Berikut adalah data dukungan browser terhadap audio.

Browser	MP3	Wav	Ogg
Internet Explorer 9	Ya	Tidak	Tidak
Firefox 4.0	Tidak	Ya	Ya
Google Chrome 6	Ya	Ya	Ya
Apple Safari 5	Ya	Ya	Tidak
Opera 10.6	Tidak	Ya	Ya

3. HTML5 Video

Fitur multimedia lainnya yang didukung oleh HTML5 adalah video. Jika selama ini kita harus menggunakan flash player untuk memasukkan konten video, pada HTML5 kita tidak perlu lagi menggunakannya.

Untuk menambahkan elemen video kita gunakan kode berikut

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls="controls">

<source src="video/movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

</body>

</html>

Di tes pada Google chrome Versi 22.0.1229.94

4. Geolocation

Sebuah API (Aplication Programming Interface) yang menarik, yang memungkinkan pengguna untuk berbagi lokasi mereka dengan aplikasi web. Menggunakan API Geolocation cukup mudah. Cukup meminta sebuah posisi (lokasi) dan jika pengguna menyetujui permintaan tersebut browser akan memberikan informasi lokasi tersebut. Posisi disediakan untuk browser oleh perangkat yang mendasari (misalnya, laptop atau ponsel) di mana Geolocation – enabled pada browser sedang berjalan. Informasi lokasi yang disediakan sebagai satu set koordinat lintang dan bujur bersama dengan metadata tambahan. 

5. Media Penyimpanan (Storage)

Dengan HTML5, halaman web dapat menyimpan data secara lokal dalam browser pengguna. Sebelumnya, hal ini dilakukan dengan cookie. Namun, Penyimpanan Web lebih aman dan lebih cepat. Data ini tidak disertakan dengan setiap permintaan server, tetapi digunakan hanya ketika meminta. Hal ini juga memungkinkan untuk menyimpan data dalam jumlah besar, tanpa mempengaruhi kinerja website. Data disimpan dalam kunci / nilai pasangan, dan halaman web hanya dapat mengakses data yang disimpan dengan sendirinya.

Dengan HTML5, web buatan kita dapat menyimpan data secara lokal didalam browser user, sebelumnya hal ini dekerjakan dengan cookies. Penyimpanan web menjadi lebih aman dan lebih cepat, karena data tidak disertakan dengan setiap permintaan ke server, tetapi hanya ketika meminta data. Fitur ini juga memungkinkan penyimpanan data dengan jumlah besar, tanpa mempengaruhi kinerja website. Seperti pada konsep Offline fitur, HTML5 mendukung beberapa jenis media penyimpanan baru yaitu Web Storage (name/value pairs), Indexed DB, dan Web SQL Database. Keuntungan dari adanya berbagai macam media penyimpanan ini adalah peningkatan kecepatan dari aplikasi.

6. Cross Document Messaging

Sampai saat ini, komunikasi antara frame, tab, dan jendela di browser yang berjalan sepenuhnya dibatasi karena masalah keamanan. Dapat berkomunikasi antar frame mungkin berguna untuk situs tertentu untuk berbagi Informasi dari dalam browser, tetapi juga akan membuka kemungkinan untuk serangan berbahaya. Jika browser diberikan kemampuan untuk pemrograman mengakses konten dimuat ke frame lain dan tab, situs akan dapat mencuri informasi apapun yang mereka bisa dapatkan dari konten situs lain yang menggunakan scripting. Contoh klasik adalah "mashup", kombinasi dari aplikasi yang berbeda seperti pemetaan, chatting, dan berita dari berbagai situs, semua dikombinasikan bersama untuk membentuk sebuah meta-aplikasi baru. Di kasus ini, satu set yang terkoordinasi dengan baik dari aplikasi akan dilayani oleh saluran komunikasi langsung dalam browser itu sendiri. Untuk memenuhi kebutuhan ini, vendor browser dan badan standar sepakat untuk memperkenalkan fitur baru: Cross Document Messaging.

7. WebSocket API

Fitur komunikasi yang paling powerfull di spesifikasi HTML5: WebSocket, yang mendefinisikan saluran komunikasi full-duplex yang beroperasi melalui soket tunggal dalam web. WebSocket tidak hanya peningkatan tambahan untuk konvensional HTTP komunikasi, melainkan merupakan kemajuan yang besar, terutama untuk real-time, event-driven aplikasi web.

8. Semantic/Struktur Element Yang Baru

Para web designer yang suka sekali memainkan elemen div, nav, dan lainnya, akan di-stop oleh fitur Semantics dalam HTML5. Semantics akan menjadi masa depan bagi para tetua tag layout dan format. Pastinya web akan menjadi lebih dinamis dan menarik akibat fitur ini. Fitur ini menjadikan web site yang menggunakan teknologi HTML 5 lebih mudah dikenali oleh Google Search Engine. Akibatnya, web aplikasi akan sering muncul pada mesin pencari google sehingga akan lebih sering diakses dan cepat diketahui oleh orang lain.

9. Web Workers

Seringkali ditemukan jika halaman web yang memiliki banyak Javascript yang berakibat pada browser melambat dan komputer nge-hang. Tetapi dengan adanya Web Workers memungkinkan halaman web untuk memproses Javascript yang mereka miliki dengan respon yang lebih cepat dan multitasking.

Dengan semua fitur yang telah disebutkan di atas dapat dilihat bahwa HTML5 akan merajai dunia aplikasi kedepannya. Meskipun belum seluruh web browser mendukung teknologi ini, tetapi kemudahan dalam pengembangan maupun penggunaan diyakini akan menjadi nilai dari teknologi ini.

HTML5 memang belum menjadi standar resmi, dan belum ada browser yang memiliki dukungan HTML5 secara penuh. Namun pada beberapa browser sudah menambahkan HTML5 pada versi terbaru mereka, misalnya (Safari, Chrome, Firefox, Opera, dan Internet Explorer).

Kelebihan dan Kelemahan HTML5

1. Kelebihan HTML5
Kelebihan yang paling mencolok dari HTML5 adalah kemudahan akses yang lebih baik. Tag Baru seperti header, footer, nav, section, dll memungkinkan browser untuk mengakses konten dengan lebih mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class. Dengan tag html5 yang baru, browser mampu menjelajah dokumen HTML dengan lebih baik lagi. Selain itu dukungan yang lebih baik terhadap video dan audio. Kelebihan HTML5 yang lainnya antara lain: 

• Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web. 
• Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script. 
• Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web. 
• Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Hal ini berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”. 
• Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone. 
• Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client. 
• Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.
•  Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi. 
• Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll). 
• Dukungan yang lebih baik untuk penyimpanan secara offline. 
• Unsur kanvas untuk menggambar. 
• Video dan elemen audio untuk media pemutaran file multimedia. 
• Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section. 
• Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search. 
• Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML. 
• Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya. 
• Integrasi ('inline') dengan doctype yang lebih sederhana. 
• Penulisan kode yang lebih efisien. 
• Konten yang ada di situs lebih mudah terindeks oleh search engine. 
• HTML5 merupakan perangkat mandiri. 
• Penanganan kesalahan yang lebih baik. 
• Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash ). 
• Lebih markup untuk menggantikan scripting.

2. Kelemahan HTML5
Seperti halnya teknologi-teknologi lain yang dimana mempunyai banyak kelebihan pasti juga ada kekurangannya. Hal ini pun terjadi pada teknologi HTML5. Kekurangan HTML5 yaitu masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, akibatnya fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser umumnya.

Implementasi HTML5

Seperti yang telah banyak dijelaskan diatas, HTML5 merupakan salah satu teknologi yang sangat ditunggu-tunggu oleh para web developer maupun para pengguna Internet. Banyak hal yang dijanjikan akan hadir di HTML 5 yang dapat mengubah sebuah website menjadi lebih interaktif serta lebih kaya konten dan fungsinya. Tetapi sayangnya implementasinya masih belum sempurna. Masalah kompatibilitas/pendukung dari browser dan juga belum matangnya HTML 5, telah menjadi sedikit kendala. Walupun begitu, sudah banyak para developer web yang mencoba membuat aplikasi web berbasiskan HTML 5. Berikut 5 contoh website yang sudah mengimplementasikan fitur yang diberikan HTML 5 dengan tepat dan menarik. 

1. DeviantART muro

Sebuah aplikasi web “drawing” yang memiliki efek menarik di brush toolnya. DeviantART muro juga mendukung fitur layering serta fitur “save on the fly” yang tentunya menggunakan konsep cloud computing. 

2. Bert’s Breakdown

Contoh penggunaan HTML5 untuk membuat game bisa kita lihat disini. Grafis yang disuguhkan cukup halus di game ini. Bert’s Breakdown mampu menunjukan bagaimana keunggulan HTML5 di dunia web based game development.

3. Canvas + SoundManager Audio Player dengan Efek Waveform

SoundManager Audio Player merupakan pemutar audio berbasis HTML5 ini cukup menarik. Dengan didukung UI yang mempercantik tampilan playernya, serta implementasi animasi yang cukup rumit, membuat website ini menunjukan kekuatan HTML5 di segi multimedia. Khususnya untuk konten audio.

4. Pendeteksi Wajah dengan JavaScript melalui HTML5 Canvas

Kita mungkin sudah sering melihat fitur pendeteksi wajah di berbagai aplikasi seperti iPhoto dan juga Picasa. Bahkan Facebook juga sudah mengeluarkan fitur seperti ini. Uniknya face detection ini dibuat dengan hanya memanfaatkan JavaScript + HTML 5 saja. Pendeteksi Wajah dengan JavaScript

5. Wikipedia Knowledge Map

Wikipedia Knowledge Map adalah salah satu implementasi dari penggunaan HTML5 yang cukup unik. Fitur utama yang disuguhkan adalah pembuatan Knowledge Map menggunakan HTML5, yang menghubungkan artikel-artikel yang ada di Wikipedia. 

Banyak-banyaklah mencari informasi dan belajar materi-materi HTML dan HTML5 sebelum mempraktekkannya. Untuk mengetahui apakah browser yang kita gunakan sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport, bukalah website berikut: http://html5test.com.

Sekian uraian sore kali ini tentang Hal-hal Baru Pada HTML5. Jangan sampai dimanfaatkan dan diperbudak oleh teknologi tetapi manfaatkanlah teknologi. Semoga bermanfaat dan semoga membantu :) Happy Blogwalking
Terimakasih telah berkunjung ke sharexid.blogspot.com

Sumber : 
http://id.wikipedia.org/wiki/HTML5 
http://www.jeanotnahasan.com/2012/02/pengertian-tujuan-fitur-baru-dan.html  http://newbiescript.blogspot.com/2012/11/fitur-baru-html5.html 
http://www.reyvababtista.com/2011/12/html5-apa-fitur-tambahannya.html

http://www.lawatek.com/2012/12/20/deteksi-wajah-bermodalkan-html5-dan-javascript
http://en.wikipedia.org/wiki/Knowledge_Integration_Map