proBlogiz
Mungkin kata-kata yang paling tepat untuk HTML 5 tidak lain Cantik, Aman, Cepat dan Responsif. HTML 5 adalah versi terbaru dari versi sebelumnya ,HTML, HTML 4.01. HTML5 memperkenalkan banyak fitur-fitur terkini yang memungkinkan pengembang untuk membuat website dan aplikasi dengan fungsional, kecepatan, kinerja, dan pengalaman aplikasi desktop. HTML5 adalah hasil kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG).
HTML5 adalah versi terbaru dari Hypertext Markup Language, sebenarnya tediri dari tiga jenis kode: HTML, yang membangun struktur, Cascading Style Sheets (CSS), yang memberi sentuhan tampilan, dan JavaScript, yang membuat sesuatu terjadi. HTML5 didesain untuk memberikan hampir semua yang Anda ingin lakukan secara online tanpa memerlukan software tambahan seperti plugin browser. Baik applikasi , game, musik, responsive website dan movie bahkan Anda dapat membangun aplikasi yang sangat rumit bekerja dibrowser Anda dengan HTML 5. Fitur baru seperti video playback dan fungsi drag-and-drop yang sebelumnya tergantung pada pihak ketiga browser plug-in seperti Adobe Flash, Microsoft Silverlight, dan Google Gears.
HTML5 memperkenalkan sejumlah elemen dan atribut baru yang membantu dalam membangun website modern. Berikut ini adalah fitur yang terpenting diperkenalkan pada HTML5 :
- New Semantic Elements: Ini seperti pada elemen <header>, <footer>, and <section>.
- Forms 2.0: Perbaikan form web HTML di mana atribut baru telah diperkenalkan tag <input>.
- Persistent Local Storage: Untuk menghilangkan ketergantungan pada plugin pihak ketiga.
- WebSocket: Sebuah generasi teknologi terbaru komunikasi dua arah untuk aplikasi web.
- Server-Sent Events: memperkenalkan even yang mengalir dari web server ke web browser yang disebut Server-Sent Events (SSE).
- Canvas: Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan JavaScript.
- Audio & Video: Anda dapat menanamkan/embed audio atau video pada halaman web Anda tanpa menggunakan plugin pihak ketiga.
- Geolocation: Pengunjung dapat memilih untuk berbagi lokasi fisik mereka dengan aplikasi web Anda..
- Microdata: Ini memungkinkan Anda membuat kosakata Anda sendiri di luar HTML5 dan memperluas halaman web Anda dengan kostum semantics.
- Drag and drop: Drag dan drop item dari satu lokasi ke lokasi lain pada halaman web yang sama.
Jadi Apa Saja Yang Baru di HTML 5?
Sebagai kandidat HTML standard W3C Recomendation, syntax HTML 5 didesain kompatible dengan pendahulunya HTML 4 dan XHTML1 (XML syntax). Berikut beberapa aturan baru dari HTML 5 yang telah dibuat :
- Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
- Mengurangi kebutuhan untuk plugin eksternal (seperti Flash)
- Lebih baik dalam hal penanganan kesalahan/error handling
- Lebih markup untuk menggantikan scripting
DOCTYPE
HTML5 memerlukan DOCTYPE yang ditentukan untuk memastikan bahwa browser merender atau membaca halaman situs dalam mode standar. Deklarasi DOCTYPE untuk sintaks HTML dan bersifat case-sensitive, <DOCTYPE html!>. Doctypes dari versi sebelumnya dari HTML lebih panjang karena masih berbasis SGML dan karena itu diperlukan suatu referensi untuk DTD. Dengan HTML5 ini tidak lagi digunakan dan browser hanya memerlukan syntax yang lebih sederhana, <DOCTYPE html!>.
HTML5 DOCTYPE
<!DOCTYPE html>
Vesri HTML sebelumnya DOCTYPE menggunakan rerferensi DTD, seperti contoh ini:
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 Character Sets
Untuk menampilkan halaman HTML dengan benar, browser harus tahu apa Character Sets (charset) yang digunakan. Pada HTML 5 charset Anda dapat menggunakan elemen <meta> dengan atribut charset yang menentukan pengkodean.
Berikut adalah contoh sederhana:
<meta charset="UTF-8">
Contoh di atas dapat menggantikan pemakaian <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> meskipun sintaks tersebut masih diperbolehkan.
Contoh struktur dokumen HTML5 minimum :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...</title> </head> <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> </html>
Elemen-elemen Baru di HTML5 :
- Elemen <canvas> untuk menggambar 2D
- Elemen <video> dan <audio> untuk media player
- Support local storage
- Konten spesifik elemen baru, seperti <article>, <footer>, <header>, <nav>, <section>
- Kontrol form baru, seperti kalender, tanggal, waktu, email, url, search
Daftar lengkap elemen baru di HTML5
| Tag | Description |
|---|---|
| <article> | Mendefinisikan sebuah artikel |
| <aside> | Mendefinisikan konten selain dari konten halaman/post |
| <audio> | Mendefinisikan konten audio |
| <canvas> | Digunakan untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya) |
| <command> | Mendefinisikan tombol perintah untuk dapat memanggil |
| <details> | Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan |
| <datalist> | Menentukan daftar pilihan standar untuk kontrol input |
| <embed> | Mendefinisikan sebuah wadah untuk aplikasi eksternal (non-HTML) |
| <header> | Mendefinisikan sebuah dokumen atau bagian header |
| <figure> | Menentukan konten mandiri |
| <footer> | Mendefinisikan sebuah dokumen atau bagian footer |
| <hgroup> | Groups heading (<h1> to <h6>) elemen |
| <mark> | Mendefinisikan teks yang ditandai / disorot |
| <output> | Mendefinisikan hasil penghitungan |
| <source> | Mendefinisikan beberapa sumber media untuk elemen media (<video> dan <audio>) |
| <summary> | Mendefinisikan sebuah visible heading untuk elemen <details> |
| <time> | Mendefinisikan tanggal / waktu |
| <video> | Mendefinisikan sebuah video atau film |
| <section> | Mendefinisikan bagian dalam dokumen |
Daftar lengkap elemen yang tidak dipakai lagi (obsolete) di HTML5, antara lain:
| Tag | Description |
|---|---|
| <acronym> | Mendefinisikan sebuah akronim |
| <basefont> | Menentukan warna standar, ukuran, dan font untuk semua teks dalam dokumen |
| <big> | Mendefinisikan ukuran teks besar |
| <center> | Mendefinisikan posisi teks dicenter |
| <dir> | Mendefinisikan direktori list |
| <font> | Mendefinisikan font, warna, dan ukuran untuk teks |
| <frame> | Mendefinisikan sebuah window (frame) dalam sebuah frameset |
| <frameset> | Mendefinisikan satu set frame |
| <strike> | Mendefinisikan teks strikethrough |
| <noframes> | Mendefinisikan sebuah konten alternatif bagi pengguna bahwa konten tidak mendukung frame |
| <applet> | Mendefinisikan sebuah applet embed |
Selain elemen-elemen diatas ada juga fitur "conforming" pada HTML5, seperti penggunaan attribut pada elemen tertentu.
Attribut baru HTML 5 antara lain:
| Tag | Description |
|---|---|
| draggable | Menentukan apakah suatu unsur adalah draggable atau tidak |
| contextmenu | Menentukan menu konteks untuk suatu elemen. Menu konteks muncul ketika pengguna mengklik kanan pada elemen |
| hidden | Menentukan bahwa elemen belum, atau tidak lagi, relevan |
| spellcheck | Mendefinisikan posisi teks dicenter |
| dropzone | Mendefinisikan direktori list |
| contenteditable | Mendefinisikan font, warna, dan ukuran untuk teks |
| itemprop | Digunakan untuk group item |
Pada HTML 5 penulisan atribut hanya dapat ditentukan pada tag awal dan tidak boleh digunakan dalam tag akhir. Atribut HTML5 adalah case sensitif dan dapat juga ditulis dalam huruf besar semua atau mix, akan tetapi konvensi yang paling umum adalah tetap menggunakan huruf kecil.
Berikut adalah contoh penulisan dari atribut HTML5 yang menggambarkan bagaimana untuk menandai sebuah elemen div dengan atribut class dengan menggunakan nilai "contoh":
<div class="contoh">...</div>
Sebuah fitur baru yang juga diperkenalkan di HTML 5 adalah penambahan atribut data kustom (Custom Attributes).
Sebuah atribut data kustom dimulai dengan data- dan akan diberi nama berdasarkan kebutuhan Anda. Berikut adalah contoh sederhana :
<div class="contoh" data-subject="physics" data-level="complex"> ... </div>
Contoh diatas adalah penulisan attribut yang valid HTML5 dengan dua atribut khusus yang disebut data-subjek dan data-level. Anda akan bisa mendapatkan nilai-nilai dari atribut dengan menggunakan JavaScript API atau CSS dengan cara yang sama seperti yang Anda gunakan untuk atribut standar.
Browser Support
Versi terbaru dari Apple Safari, Google Chrome, Mozilla Firefox, dan Opera semua mendukung hampir semua fitur HTML5 dan Internet Explorer 9.0 juga akan support untuk beberapa fungsi HTML5.
Browser web mobile pre-instal pada iPhone, iPads, dan Android semua support sangat baik untuk HTML5.
Ok kawan, sementara cukup disini sedikit mengenai hal-hal yang baru di HTML 5, tutorial berikutnya saya akan mencoba untuk menjelaskan convert template blogger menjadi valid HTML 5 dan cara membuat website responsive HTML 5, so stay tune ya.......:)
9 komentar
test
REPLYmantabb...jadi nambah ilmu nih. trim's kang hriza..:)
REPLYhalo sobat:)
REPLYlama ga muncul ya
thanks udah berkunjung:)
sama2 mas hriza. iya saya tunggu2 update postingan anda, baru muncul lagi. salam sukes selalu..
REPLYInforrmasinya lengkap banget mas, bisa menambah pengetahuan saya.
REPLYthanks mas:)
REPLYsemoga bisa bermanfaat
mantap info,,,masih pusing bacanya,,malum masih belajar
REPLYhehe..iya gan:)
REPLYmugnkin karena belum diberi contoh konkritnya
besok udah kelar contohnya2 bos lengkap, dan cara convert dan perbedaan HTML 5
kunjung balik aja besok gan :)
artikel yang bagus. Lebih bagus lagi kalau dilengkapi html yang udah obsolete dengan yang baru. biar bisa diperbarui
REPLYsoalnya blog saya Science And Education masih menggunakan yang obsolete. yang baru gimana?
Kalau gk keberatan dicek kekurangannya apa
Silahkan Berkomentar
ConvertKomentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan