Mengenal HTML5 : Pengertian, Fitur, Keunggulan, dan Perbedaan dengan HTML4
HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (Wor Wide Wetium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak]] pembuat web.
Pengertian 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.
Baca Juga | Konsep Dasar Web Design, Yang Wajib Diketahui Web Developer
Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.
Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEOApple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, " Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web”.
Fitur baru di HTML5
Pada bagian ini, Anda akan menemukan beberapa fitur baru yang besar yang HTML5 tawarkan. Pertama anda akan belajar tentang elemen semantik baru yang bertujuan untuk memberi maknake berbagai bagian dari suatu halaman Web modern: headers, footers, navigation bars, sidebars, dan sebagainya.
Unsur-unsur semantik baru yang disediakan HTML5 adalah
<article>
Unsur <article> digunakan untuk mendefinisikan item independen pada halaman yang dapat didistribusikan sendiri, seperti sebuah berita, posting blog, atau komentar.
<section>
Elemen ini merupakan bagian dari sebuah dokumen atau aplikasi, seperti bab atau bagian dari sebuah artikel atau tutorial. Misalnya, bagian Anda baca sekarang bisa dikelilingi oleh elemen <section> di HTML5.
<nav>
Ini adalah wadah untuk link navigasi utama pada halaman Web.
<aside>
Elemen baru ini dapat digunakan untuk menandai sebuah sidebar atau beberapa konten lainnya yangdianggap agak terpisah untuk konten sekitarnya. Contohnya adalah iklan.
<hgroup>
Dalam beberapa kasus, halaman, artikel, atau bagian mungkin memerlukan lebih dari satu pos, seperti di mana Anda memiliki judul dan subjudul.
<canvas>
Unsur ini adalah salah satu aspek yang paling penting dariHTML5 karena memfasilitasi produksi grafik, permainan interaktif,aplikasi paint, dan grafis lain dengan cepat tanpa memerlukan plug-in eksternal seperti Adobe Flash.
<audio> dan <video>
Kedua unsur ini memungkinkan Developer Web untuk memasukkan konten multimedia tanpa bergantung padapengguna untuk memiliki browser tambahan plug-in diinstal.
Form web tambahan
Jika Anda telah membuat aplikasi Web sebelumnya, Anda lebih dari mungkin akrab dengan HTML controls form, beberapa yang diimplementasikan menggunakan <input> yang menggunakan elemen. Dalam HTML 4, jenis input berikut didukung:
- button
- checkbox
- file
- hidden
- image
- password
- reset
- radio
- submit
- text
Macam - macam jenis input form baru di HTML 5:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- wee
Keunggulan terbaru dari HTML5
- Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
- Tersedianya canvas pada HTML 5
- Embed Audio Video Secara Langsung
- 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 browser lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.
Perbedaan Sintak HTML 4 dan HTML 5
Spesifikasi HTML 5 dan HTML 4 sebenarnya sama sama mempunyai 2 syntak. Syntak HTML 5 yaitu html dan XML, dan dapat menyesuaikan dengan pemograman, pasar dan aplikasi. Sedangkan syntak HTML 4 adalah SGML (disebut sebagai HTML 4.01) dan XML (disebut XML 1.0), akan tetapi SGML hampir nyaris tidak didukung karna browsernya terlalu banyak tool, kemudian HTML 5 mendefiniskan bahwa SGML yang hampir mirip dengan html. Berikut perbedaan sintak antara HTML 4 dan HTML 5
HTML 4
<html><head> <title>Hobo Web LTD Scotland</title> </head> <body> <div id="page"> <div id="header"> <h1><a href="/blog/">Hobo Web</a></h1> </div> <div id="container"> <div id="center" class="column"> <div class="post" id="post-102"> <h2><a href="/test-page/"> Test Page 1</a></h2><div class="entry"> <p>Article Text here</p> </div> </div> <div class="post" id="post-101"> <h2><a href="/test2/"> Test 2</a></h2>
<div class="entry"> <p>Article 2 Text here</p> </div> </div> </div> <div class="navigation"> <div class="alignleft"> <a href="/blog/page/2/">« Previous Entries</a> </div> <div class="alignright"></div> </div> </div> <div id="right" class="column"> <ul id="sidebar"> <li><h2>Hobo Stuff</h2> <ul> <li><a href="/blog/comment- policy/">Comment Policy</a></li> <li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2008/04/'>April 2008</a></li> <li><a href='/blog/2008/03/'>March 2008</a></li> <li><a href='/blog/2008/02/'>February 2008</a></li> <li><a href='/blog/2008/01/'>January 2008</a></li> </ul> </li> </ul> </div> <div id="footer"><p>Copyright 2008 Hobo Web LTD</p> </div> </div> </body> </html>
HTML 5
<html><head> <title>Hobo Web LTD Scotland</title> </head> <body> <header> <h1><a href="http://blog/">Hobo Web</a></h1> </header> <section> <article> <h2><a href="/test-page/"> Test Page 1</a></h2><p>Article Text here</p> </article> <article> <h2><a href="/test2/"> Test 2</a></h2> <p>Article Text 2 here</p> </article> <nav> <a href="/blog/page/2/">« Previous Entries</a> </nav> </section> <nav> <ul> <li><h2>Hobo Stuff</h2><ul> <li><a href="/blog/comment- policy/">Comment Policy</a></li> <li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2008/04/'>April 2008</a></li> <li><a href='/blog/2008/03/'>March 2008</a></li> <li><a href='/blog/2008/02/'>February 2008</a></li> <li><a href='/blog/2008/01/'>January 2008</a></li> </ul> </li> </ul> </nav> <footer> <p>Copyright 2008 Hobo Web LTD</p> </footer> </body> </html>
Itulah pembahasan singkat mengenai HTML5. Semoga artikel ini bermanfaat.
