Mengenal HTML5 : Fitur-fitur Baru dari HTML5
blog HTML Tugas KuliahMengenal HTML5
Pengertian HTML5
Mengenal HTML5 - Apa itu HTML5, apa sih bedanya dengan HTML yang biasanya. mungkin banyak dari kita yang belum begitu mengerti tentang HTML5 ini, dari mulai tag-tag baru yang ada di dalamnya maupun keunggulan-keunggulan yang dimilikinya di banding dengan versi HTML sebelumnya. pada kesempatan kali ini, saya akan mencoba menjelaskan mengenai dasar-dasar dari HTML5 ini, dari mulai tag-tag nya dan fitur-fitur baru yang di tawarkan.
HTML5 Bukanlah sebuah bahasa pemrograman, melainkan merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web (WWW), sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga saat ini masih dalam pengembangan dan terus di sempurnakan.
HTML5 adalah versi terbaru dari Hypertext Markup Language, sebenarnya HTML merupakan satu dari 3 jenis kode yang harus di gunakan untuk membuat atau membangun struktur web yang bagus, 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 adalah versi terbaru dari Hypertext Markup Language, sebenarnya HTML merupakan satu dari 3 jenis kode yang harus di gunakan untuk membuat atau membangun struktur web yang bagus, 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.
Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML sebelumnya agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5 merupakan hasil proyek besar 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 yaitu HTML5. HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web." Kabar tersebut nampaknya membawa angin segar pada para pengembang untuk segera merealisasikan HTML5 ini, tentunya tanpa Adobe Flash, para pengguna internet akan merasa lebih nyaman untuk berinternet ria tanpa memikirkan instalasi aplikasi sebelum enikmati konten-konten yang tersedia di internet.
Setelah melalui proses yang cukup panjang, seluruh browser utama (Chrome, Safari, Firefox, Opera, IE) sekarang bisa mendukung HTML5, sehingga teknologi HTML terbaru dapat digunakan dengan sebaik-baiknya. HTML5 sebenarnya sudah mulai dikenal oleh masyarakat pada tahun 2010 meskipun sudah dikenal sejak lama oleh para pengembang web namun masih sedikit orang yang memanfaatkan kelebihan-kelebihan fitur HTML5 tersebut. Dengan adanya pengembangan HTML5, adobe flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau konten apapun di web.
Apa yang Baru pada HTML5?
HTML5 memperkenalkan sejumlah elemen dan atribut baru yang membantu dalam membangun sebuah situs web 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.
Daftar Tag-tag 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 |
Tag yang sudah tidak dipakai dalam HTML5
| 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 |
