Sebelum kita membahas fitur apa saja yang terdapat pada HTML5, ada baiknya kita mengetahui dulu apa itu HTML5.
HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997 dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5 lahir pada tahun 2009 yang merupakan standar baru untuk HTML, XHTML dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan situs dunia semakin berkembang.
HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTM L 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
Dalam HTML5 juga terdapat fitur-fitur baru yang tak ada dalam HTML versi sebelumnya. Berikut adalah fitur-fitur yang terdapat pada HTML5
- Canvas
Dengan canvas dapat membuat dan 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.
Saat akan menambahkan elemen canvas ke halaman web Anda, Anda bisa memanipulasinya dengan berbagai macam cara.
- Doctype baru
Dalam HTML 4 penulisan doctype seperti ini
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Namun dalam HTML5 penulisannya hanya seperti ini
<!DOCTYPE html>
- Audio dan Video
HTML5 membuat video dan audio anda benar-benar diakses dengan tag <video> dan tag <audio>. Tag video dan audio ini dibuat hampir sama dengan tag untuk image/gambar yaitu :<video src=”url”/>.
1. <audio autoplay="autoplay" controls="controls">
2. <source src="file.ogg" />
3. <source src="file.mp3" />
4. <a href="file.mp3">Download this file.</a>
5. </audio>
Tag tersebut berfungsi untuk menyisipkan file audio dan video tentunya. Berbeda dengan versi HTML pendahulunya yang harus menyisipkan flash untuk memutar audio/video, HTML5 akan dengan mudah menyisipkan file multimedia tersebut ke dalam webnya.
- Geolocation
Sebuah API yang menarik , 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.
- Media Penyimpanan (Storage)
Berfungsi sebagai pengganti cache sebagai media penyimpanan history halaman web. Local Storage sangat disambut baik oleh para pengembang web. Memungkinkan web untuk menyimpan data cache lebih besar di storage local-nya daripada cache pada browser biasa.
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.
- 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 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.
- 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.
- Semantic
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.
Dari semua fitur 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, Internet Explorer)
Cara Mengidentifikasi HTML4 dengan HTML5
Pada HTML 4 sebagai contoh, bila anda bermaksut membuat struktur halaman web sebagai berikut :
Maka script HTML yang akan kita gunakan adalah sebagai berikut :
<body>
<div id="header">
<!-- header goes here -->
</div>
<div id="nav">
<!-- nav bar goes here -->
</div>
<div id="main-content">
<div id="post">
<!-- main content goes here -->
</div>
</div>
<div id="side-bar">
<!-- side bar goes here -->
</div>
<div class="spacer"></div>
<div id="footer">
<!-- footer goes here -->
</div>
</body>
Sementara itu apabila kita akan membuat struktur halaman website yang tidak jauh berbeda dengan contoh sebelumnya menggunakan HTML 5 dengan tampilan sebagai berikut :
Maka Script HTML yang akan kita gunakan adalag sebagai berikut :
<body>
<header>
<!-- header goes here -->
</header>
<nav>
<!-- nav bar goes here -->
</nav>
<section>
<article>
<!-- main content goes here -->
</article>
</section>
<aside>
<!-- side bar goes here -->
</aside>
<spacer></spacer>
<footer>
<!-- footer goes here -->
</footer>
</body>
Untuk mengetahui apakah suatu website menggunakan HTML 4 atau HTML 5 adalah sebagai berikut:
- Masuk ke website yang diinginkan,
- Tekan "CTRL + U" untuk melihat source code pada website tersebut.
- Kemudian tekan "CTRL+F" dan ketik HTML4 atau HTML5. jika ditemukan tulisan HTML4 pada source code website tersebut, maka website tersebut menggunakan HTML4. Jika ditemukan Tulisan HTML5, maka website tersebut menggunakan HTML5. Namun, jika keduanya tidak ditemukan, maka website tersebut tidak menggunakan HTML4 maupun HTML5.
Sumber:
