HTML 5: Apa saja yang pertama kali harus di ketahui?

Saat ini siapa yang belum pernah mendengar HTML 5? Generasi selanjutnya dari HTML ini sudah banyak memberikan kemudahan dan kegembiraan pada sebagian besar Developer. Suka ataupun tidak suka HTML 5 akan tetap maju dan menggantikan HTML pendahulunya. Karena, kebutuhan dari pengguna web akan terus meningkat dan sepertinya belum tentu versi HTML sebelumnya bisa memenuhi kebutuhan itu (walaupun bisa sekalipun mungkin tidak semudah yang dibayangkan).

Kali ini saya akan membahas beberapa perbedaan mendasar dari pendahulunya yaitu HTML 4.0 dan XHTML 1.0, jadi dengan berbekal pengetahuan dasar tentang HTML 5 ini, anda sebagai web developer dan web designer bisa segera melakukan transisi pada website anda atau pada pekerjaan anda.

Ada 3 hal yang akan saya bahas sekarang, yaitu :

  1. API di HTML 5
  2. Elemen baru di HTML 5
  3. Perubahan semantic
  4. Lakukan dan gunakan sekarang

API di HTML 5

Dalam HTML 5 terdapat beberapa API yang terintegrasi dengan beberapa elemen dari HTML 5 tersebut, dan ini adalah API tersebut (informasi ini dari www.w3.org) :

  • 2D Drawing API, adalah API yang dapat digunakan untuk manipulasi image 2D yang terintegrasi dengan elemen canvas.
  • Audio and Video API, adalah API yang dapat digunakan untuk memutar dan memainkan media Video dan Audio. API ini sudah terintegrasi dengan elemen audio dan video dari HTML 5.
  • API yang memungkinkan untuk membuat offline web application.
  • API yang memungkinkan web application dapat meregister sendiri untuk beberapa tipe protokol dan media.
  • Editing API di kombinasikan dengan atribut content editable global yang baru.
  • Drag and Drop API di kombinasikan dengan atribut drag-able.
  • API yang dapat mengekspos histori dari browser untuk menambahkan halaman web yang sedang di akses sehingga bisa menambahkan tombol Back di halaman web.
  • Cross-document messaging.

Seperti yang anda lihat, prinsip dari API yang disediakan dari HTML 5 ini adalah agar developer lebih mudah dalam membuat sebuah aplikasi web. Silahkan lihat point ketiga yaitu API untuk offline web application, ini merupakan kabar baik untuk user dan developer atau programmer karena dapat menciptakan aplikasi web yang penuh fitur pada offline environment. Anda dapat berharap banyak aplikasi favorit anda mengikuti Gmail dalam memperkenalkan offline access.

Elemen – elemen baru di HTML 5

HTML 5 hanya memperkenalkan beberapa elemen baru yang tersedia, dan ini adalah perkenalan singkat anda dengan elemen – elemen tersebut :

  • <article>, mendefinisikan konten eksternal.
  • <aside>, mendefinisikan konten yang ditampilkan di samping atau sejajar dengan artikel di halaman web (mungkin sebagai gambaran ini adalah sidebar).
  • <audio>, mendefinisikan file suara seperti musik atau audio streaming lainnya.
  • <canvas>, mendefinisikan gambar 2D seperti grafik atau image lainnya.
  • <command>, mendefinisikan tombol perintah seperti radio button, checkbox, atau button.
  • <datagrid>, mendefinisikan selectable data list. Datagrid ditampilkan sebagai tree-list.
  • <datalist>, mendefinisikan selectable data list. Gunakan elemen ini bersama – sama dengan input elemen, untuk membuat dropdown list untuk input value.
  • <datatemplate>, mendefinisikan container dari template data. Elemen ini harus memiliki elemen di bawahnya untuk mendefinisikan template: elemen <rule>.
  • <details>, mendefinisikan detail dari sebuah elemen, yang dapat dilihat oleh user, dan dapat di sembunyikan saat di klik.
  • <dialog>, mendefinisikan dialog, sama seperti semua pembicaraan.
  • <embed>, mendefinisikan embedded content, seperti sebuah plug-in.
  • <eventsource>, mendefinisikan source untuk event yang di kirim oleh server.
  • <figure>, digunakan untuk grouping beberapa elemen.
  • <footer>, mendefinisikan bagian footer dari sebuah dokumen. Biasanya berisi nama dari author, tanggal document dibuat ataupun informasi kontak.
  • <header>, mendefinisikan bagian header dari sebuah dokumen.
  • <mark>, mendefinisikan teks yang di tandai, gunakan ini untuk memberikan highlights pada beberapa bagian dari text anda.
  • <meter>, mendefinisikan measurement. Gunakan hanya untuk pengukuran dengan nilai minimun dan maximum yang sudah di ketahui.
  • <nav>, mendefinisikan bagian link navigasi.
  • <nest>, mendefinisikan nesting point dalam data template untuk child element. Gunakan bersama – sama dengan elemen <datatemplate> dan <rule>.
  • <section>. mendefinisikan bagian dari dokumen. Seperti halnya sebuah header dan footer.
  • <source>, mendefinisikan elemen untuk resources media, seperti halnya <video> dan <audio>.
  • <time>, mendefinisikan waktu atau tanggal, ataupun keduanya.
  • <video>, mendefinisikan media video, seperti video klip atau video streaming lainnya.

Untuk pemahaman lebih lanjut mengenai elemen – elemen ini akan saya coba ulas lebih detail di artikel saya yang berikutnya :).

Perubahan Semantic

Ini adalah bagian yang seharusnya merubah cara anda untuk membuat struktur website secara fundamental. Termasuk dalam list dibawah ini adalah 6 elemen baru yang dapat membantu anda agar lebih konsisten dalam pembuatan struktur dasar dari website. Elemen – elemen tersebut adalah :

  1. <nav>
  2. <section>
  3. <article>
  4. <header>
  5. <footer>
  6. <aside>

Elemen – elemen ini akan menggantikan elemen <div> yang sekarang sering anda gunakan untuk membuat struktur dasar dari website. Jadi daripada membuat <div class=”header”>, anda bisa persingkat dengan membuat <header>. Perhatikan saya membuat <div> menggunakan “class” daripada menggunakan “id” ini karena elemen tersebut dapat berulang dalam satu halaman (saya akan coba bahas lebih lanjut di artikel lainnya).

Lakukan dan gunakan sekarang

Jangan terlalu senang dengan judul bab yang saya tulis diatas ini, seperti yang sudah di ketahui oleh developer yang baik bahwa setiap browser itu berbeda (beberapa lainnya bahkan lebih buruk dari sebagian lainnya) dalam support untuk HTML4 and XHTML 1.0 walaupun itu adalah browser – browser yang termasuk dalam browser paling banyak digunakan dan umum di gunakan oleh user.

Sekarang coba anda bayangkan bagaimana dengan perubahan besar dari HTML 4 ke HTML 5 ini terhadap browser – browser tersebut? walaupun yang mendorong untuk pemakaian HTML 5 ini adalah Google sekalipun yang notabene memang salah satu “raja” dunia maya tidak akan langsung membuat semua browser langsung kompatible dalam menampilkan HTML 5 ini secara sempurna. Tapi, walaupun begitu ini tidak menjadi alasan anda untuk tidak segera memulai untuk mempersiapkan perubahan besar itu sekarang, dan juga bukan berarti tidak ada cara “pintar” dan trik untuk dapat melakukan akal – akalan agar HTML 5 yang anda buat bisa berjalan di semua browser (atau setidaknya mendekati :D).

Dalam artikel berikutnya saya akan coba lebih dalam untuk mengulas bagian – bagian dan juga tips trik agar anda dapat segera memulai penggunaan HTML 5 secepatnya. Karena lebih cepat memang lebih baik :).

7 Comments
  1. Oom, gimana cara memulai penggunaan HTML5? adakah software yang harus saya instal untuk menulis codingnya? maksudnya, bisa ditulis pakai notepad biasa dan langsung compatible dengan codingnya gitu?
    Oom.. kasih pencerahan dong..
    intinya saya pengen mulai ngoding pake HTML5 tapi gak tau langkah awalnya.

    • HTML 5 itu ga perlu software macem – macem kok, pada prinsipnya sama seperti HTML 4 yang biasa kita pakai sekarang, tapi HTML 5 memberi banyak kemudahan.

      Misalkan kalau mau bikin input dengan default value “Search…” dan kalau di klik di form input ini default value tersebut hilang, kalau dulu kan pakai JavaScript nah kalau sekarang di HTML 5 ada atribut baru di form input itu namanya placeholder (contoh : http://davidwalsh.name/html5-placeholder).

      Dalam layout juga gitu, dulu pakai div untuk membagi – bagi halaman, sekarang ada tag baru seperti article, header, dll supaya layouting lebih mudah.

      Supaya lebih maksimal HTML5 di padukan dengan CSS3 :), tapi sayangnya saat ini belum semua browser support kedua hal tersebut. Untuk browser besar seperti Chrome dan Firefox saja masih support beberapa tag saja. Support atau tidak tagnya bisa dilihat di http://www.findmebyip.com/litmus/.

      Untuk memulai HTML 5 hanya perlu pemahaman lebih lanjut mengenai tag yang ada, dan mempelajari cara layout di HTML 5.

      Semoga membantu.

  2. SOFTWARENYA MANAAAAAAAAA????
    CAPEK 5 JAM NYARI GA KETEMU!

    • HTML 5 itu bukan suatu sesuatu yang dibuat dengan menggunakan software atau aplikasi tertentu, HTML 5 adalah suatu tag HTML biasa yang mempunyai kemampuan lebih.

      Contoh :

      Biasanya HTML 4 (yang biasa di gunakan saat ini) hanya bisa untuk hal statis, atau untuk membuat animasi tertentu harus menggunakan javascript, tapi jika dengan HTML 5 bisa di buat dengan mudah menggunakan tag HTML 5 saja tanpa dengan bantuan javascript.

      Tag HTML 5 biasanya berfungsi dengan baik di browser – browser saat ini, untuk melihat compatibility browser dalam menjalankan HTML 5 silahkan lihat di link ini : http://html5test.com/

      Semoga bisa membantu.

  3. maaf, maksudnya …
    html biasakan pake notepad, atau notepad++
    nah, kalo html 5 pake apa???
    cuma windows 8 yg punya html 5, apa harus install windows 8???

    • HTML 5 juga bisa pakai notepade atau notepad++, coba gini buka http://html5test.com/ di browser yang anda pakai sekarang lalu lihat section VIDEO, jika di “video element” ada tanda centang berarti browser anda mendukung html 5 untuk tag video.

      Sekarang buka halaman ini : http://html5demos.com/video
      kalau ada tampilan video di halaman browser anda berarti itu browser anda mendukung HTML 5, buat file html kosong pakai editor anda lalu silahkan lihat source code halaman tersebut lalu copy ke file html yang anda buat (yang di copy cukup tag saja), setelah disimpan di komputer anda silahkan buka lagi dengan browser anda, jika anda melakukan dengan benar maka seharusnya akan muncul player video di browser anda.

    • HTML 5 juga bisa pakai notepade atau notepad++, coba buka halaman ini :

      http://html5demos.com/video

      kalau ada tampilan video di halaman browser anda berarti browser anda mendukung HTML 5, buat file html kosong pakai editor anda lalu silahkan lihat source code halaman tersebut lalu copy ke file html yang anda buat (yang di copy cukup tag saja), setelah disimpan di komputer anda silahkan buka lagi dengan browser anda, jika anda melakukan dengan benar maka seharusnya akan muncul player video di browser anda.

Leave a Reply

 

Latest Tweet

Follow Us On

YM Live Chat!