HTML5 merupakan standar baru untuk HTML, XHTML, dan DOM HTML. Sejak munculnya HTML versi 4.01, perkembangan website dunia semakin berkembang. Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa browse sudah mendukung HTML5.
HTML5 merupakan hasil proyek dari W3C ( World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.
Berikut tujuan dibuatnya HTML5 :
- Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
- Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
- Penanagan kesalahan yang lebih baik
- Lebih markup untuk menggantikan scripting
- HTML5 merupakan perangkat mandiri
- Proses pembangunan dapat terlihat untuk umum
Fitur baru dalam HTML5 :
- Unsur kanvas untuk menggambar
- Video dan elemen audio untuk media pemutaran
- Dukungan yang lebih baik untuk penyimpanan secara offline
- Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
- Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
Beberapa browse sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Exploree ) akan mendukung beberapa fitur dari HTML5
Apa itu HTML5?
HTML5 merupakan versi lanjutan dari HTML. Yang akan memperkenalkan beberapa fitur baru yang membantu dalam pembuatan HTML dengan lebih mudah. Dan juga dengan fitur barunya yang membuat tata letak situs web Anda lebih jelas bagi pembuat kode dan mesin pencari.
Hal ini dapat membantu mesin pencari karena keberadaan tag pada header, footer, navigasi dan artikel. Kesemuanya itu merupakan tag yang baru diperkenalkan dalam mendefinisikan bagian utama dari sebuah website. Jika Anda dapat memberitahu mesin pencari bahwa navigasi mempunyai link dalam mengatur menu pada seluruh situs, maka mereka (mesin pencari) dapat menggunakan semua link pada bagian ini. Tag artikel mungkin adalah tag yang paling penting, karena konten merupakan bagian terpenting pada halaman Anda yang dapat memungkinkan bagi mesin pencari untuk mengetahui bahwa di area tersebut merupakan semua konten anda.
Terlepas dari tag yang baru, dalam HTML5 juga memperkenalkan API yang memungkinkan Anda untuk membuat gambar grafis, penyimpanan data offline dengan drag dan drop.
Memulai Dengan HTML5
Memulai dengan menggunakan
HTML5 itu sangatlah mudah, dan dengan menggunakan DOCTYPE favorit saya dari fitur HTML5 tersebut.
Ingatkah Anda DOCTYPE yang digunakan untuk transisi XHTML? Jika anda tidak bisa mengingatnya apakah anda selalu mencari referensi tiap membuat halaman baru?.
HTML5 membuatnya menjadi mudah untuk mendefinisikan dokumen sebagai HTML5
Saya rasa anda dapat mengingat yang satu ini. Itulah yang harus Anda lakukan dalam membuat halaman HTML5 Anda, anda dapat melakukannya sekarang tanpa merubah apapun pada halaman Anda. Bahkan browser IE6 akan memahami apa itu. Sejauh ini saya telah merubah pada situs saya ini dan membuat semua perubahan ke versi HTML5, dan saya mulai menggunakan HTML5 pada situs-situs yang saya kerjakan saat ini.
Mengapa Memakainya?
HTML5 dilengkapi dengan sejumlah fitur canggih yang memudahkan bagi developer/desainer dalam menggunakan HTML. Sekarang saya mengerti kalau anda akan mengatakan bahwa HTML itu sangat mudah digunakan dan itulah salah satu alasan mengapa sampai begitu populer. Tapi HTML5 akan mengelompokkan kode Anda, kelompok konten Anda, menciptakan markup yang bersih dan menyajikan Anda fitur-fitur canggih bagi anda yang biasanya ditulis dalam Javascript untuk membuat kodenya.
HTML5 memungkinkan Anda untuk menggambar pada kanvas, memutar video, merancang form dengan lebih baik, atau membangun aplikasi web yang bekerja secara offline.
Alasan utama untuk menggunakan HTML5 saat ini adalah karena kita tahu HTML5 tidak akan usang, dan akan terus berlaku sepanjang waktu. Seperti yang dikatakan W3C tentang HTML5 pada tahun 2009 lalu.
Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML5 and clarify W3C’s position regarding the future of HTML.
Browser apa saja yang mendukung HTML5?
Sekarang semua browser mendukung tag tertentu HTML5 bahkan IE6 pun memahami arti <!doctype html> dan akan membuat halaman dengan benar.
Namun bagi browser versi lama yang tidak memahami tag lain yang baru seperti header, bagian, samping dan artikel browser tersebut tidak akan membuatnya dengan benar dan akan menjadikannya sebagai elemen inline. Dan Ini dapat menimbulkan masalah pada tampilan sehingga Anda perlu mengubah elemen CSS ini untuk memblokir sehingga browser lama dapat memahami bagaimana untuk membuatnya menjadi benar.
1 | header, section, article, aside, nav, footer { |
Menjadikan HTML5 Bekerja Pada IE
Tapi untuk Internet Explorer 8 atau versi yang lebih rendah cara di atas tidak akan berhasil karena mereka tidak mengerti tag apa ini sehingga tag tersebut akan diabaikan, Anda perlu menggunakan Javascript untuk membuat elemen sebelum Anda menggunakannya dalam kode Anda.
2 | document.createElement('header'); |
3 | document.createElement('section'); |
4 | document.createElement('article'); |
5 | document.createElement('aside'); |
6 | document.createElement('nav'); |
7 | document.createElement('footer'); |
Tag Baru HTML5
HTML5 telah merilis tag baru yang membantu untuk menentukan tata letak dan struktur halaman.
Berikut adalah halaman yang biasa menggunakan tag HTML lama.
9 | <div id="article"></div> |
10 | <div id="sidebar"></div> |
Hanya dengan melihat HTML tersebut Anda dapat melihat dengan jelas bagian yang berbeda dan hanya membaca bagian itu Anda dapat memahami dengan jelas apa fungsi masing-masing div yang akan digunakan berkat tag ID.
Namun bagaimana mesin pencari mengetahui fungsi tersebut?
Disinilah mengapa dinamakan HTML5 , di bawah ini merupakan struktur yang sama dengan yang diatas tetapi dalam HTML5.
Sekarang Anda dapat melihat lagi pada bagian tersebut dan apa yang akan mereka eksekusi, Dikarenakan didefinisikan dengan tag maka mesin pencari akan mengetahui apa arti bagian ini.
Perbedaan lain yang mungkin Anda lihat adalah doctype. HTML5 hanya memiliki 1 doctype yang biasa didefinisikan pada awal dokumen.
Yang mana akan memudahkan untuk memberitahu pada browser bahwa itu merupakan dokumen HTML.
Tag Semantic
Perubahan utama pada HTML5 adalah untuk membuat tag yang lebih semantik sehingga mereka akan menjelaskan jenis konten apa yang akan dimasukkan ke dalam tag ini.
HEADER
Elemen Header merupakan sekelompok alat bantu navigasi atau pengantar.
Elemen header biasanya dimaksudkan untuk memberi judul pada bagian tersebut (elemen h1-h6 atau elemen hgroup), namun ini tidak diperlukan.
Dalam hal ini akan berisi header untuk halaman dan/atau bagian dikarenakan header dapat muncul di berbagai tempat pada halaman. Bisa juga sebagai tempat yang ideal untuk logo, kotak pencarian atau tabel isi untuk halaman dan/atau bagian.
NAV
Elemen nav merupakan bagian dari halaman yang membuat link ke halaman lain atau ke bagian di dalam halaman: bagian dengan link navigasi. Tidak semua kelompok link pada halaman harus di dalam elemen nav – hanya bagian yang terdiri dari blok navigasi utama yang sesuai dengan elemen nav.
Oleh karena itu tempat yang ideal bagi tag nav adalah berada dalam header atau footer. Dan suatu judul biasanya akan membuat link yang membantu menavigasi sekitar lokasi, Begitu juga footer yang biasanya akan mempunyai link utama pada website.
SECTION/BAGIAN
Hal yang paling generik dari elemen struktur baru, yang berisi konten yang dapat dikelompokkan secara tematis maupun terkait.
Bagian yang paling generik dari tag struktural, bagian ini didefinisikan sebagai pengelompokan konten yang tematik. Section/bagian biasanya berada diatas antara header dan konten, yang dapat digunakan terpisah untuk sebuah halaman.
Contoh dari section/bagian yang akan menjadi halaman tab atau bagian nomor dari sebuah halaman.
Dalam kebiasaan desain web anda dapat memisahkan isi website ke dalam beberapa bagian, pengenalan, fitur, berita, kontak dll.
SAMPING
Elemen samping selain merupakan bagian dari halaman yang terdiri dari konten yang berhubungan dengan konten pada seluruh elemen samping, yang dapat dianggap terpisah dari konten tersebut. Bagian seperti ini sering direpresentasikan sebagai sidebars dalam bentuk tipografi.
Biasanya digunakan untuk konten yang terkait dengan konten utama tetapi dapat berpindah sendiri, idealnya hal ini digunakan untuk mengutip atau sebagai sidebar. Keduanya terkait dengan halaman namun dapat digunakan secara independen.
ARTICLE
Elemen artikel terdiri dari konten yang ada di dokumen, halaman, aplikasi, atau situs.
Isi artikel ini dimaksudkan untuk secara independen didistribusikan atau digunakan kembali pada tempat lain.
Idealnya hal ini digunakan sebagai konten halaman, posting forum atau posting blog. Hal ini dapat dipisahkan dari halaman dan masih tetap mempunyai nilai. Pada area yang membuat halaman dapat disindikasikan.
FOOTER
Sebuah footer biasanya berisi informasi tentang bagian penulisnya, link ke dokumen yang terkait, data hak cipta, dan sejenisnya.
Biasanya footer berada pada bagian akhir tiap halaman, namun layaknya header, anda dapat memiliki beberapa footer pada setiap halaman seperti yang biasa digunakan untuk mendefinisikan akhir dari bagian.
HGROUP
Unsur hgroup merupakan bagian dari judul. Unsur ini digunakan untuk mengelompokkan satu set elemen h1-h6 ketika pos memiliki beberapa tingkatan, seperti subpos, alternatif judul, atau taglines.
Lalu apa yang anda tunggu lagi?
refrensi
http://ianpanrita.com/apa-itu-html5.ian/
http://tifarez.net/2012/04/24/apa-itu-html5/
0 komentar:
Speak up your mind
Tell us what you're thinking... !