Mencoba HTML 5

Posted: September 6, 2009 at 10:19:58 by Dani Iswara. Words count: 483.
Last updated: July 31, 2010 at 12:06:17.

HTML 5 sedang dirancang oleh W3C untuk meneruskan kesuksesan HTML 4 dan XHTML 1. Tampaknya HTML 5 akan menjadi favorit seperti yang terjadi pada DOCTYPE sejuta umat, XHTML 1.0 Transitional.

Kelebihan dan kekurangan HTML 5

Beberapa kelebihan yang dijanjikan pada HTML 5:
  • Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
  • 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 peramban lawas (backwards compatible). Sehingga istilah 'deprecated' tidak akan diperlukan lagi.
Yang masih diperdebatkan dalam pengembangan HTML 5:
  • Makna semantik beberapa elemen presentasioal.
  • Fitur aksesibilitasnya. Seperti atribut alt dan summary.

Contoh HTML 5

Kesederhanaan HTML 5:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Contoh dokumen HTML 5</title> </head> <body> <p>Teks paragraf disini.</p> </body> </html>
Yang menarik dari kesederhanaan kode di atas:
  • Tidak perlu lagi memakai <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">. Walau tag meta tersebut masih diijinkan digunakan.
  • Deklarasi <!DOCTYPE html> adalah 'case-insensitive'. Tidak harus huruf besar/kapital semua.
Sebagai XML, dengan tipe media application/xhtml+xml atau application/xml, HTML 5 cukup dideklarasikan dengan format tambahan:
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
di atas elemen head. Halaman web lain yang sudah memakai HTML 5, diantaranya: Bukan kebetulan dua orang teratas adalah staf (peramban) Opera. :)

Elemen baru di HTML 5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:
  • section serupa seperti h1-h6.
  • article bisa berupa entri blog atau tulisan konten.
  • aside menyajikan konten pelengkap.
  • header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
  • footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
  • dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
  • yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.

Atribut baru di HTML 5

Dikenalkan pula beberapa atribut baru, seperti:
  • atribut media, ping pada elemen pranala,
  • autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input dan form,
  • reversed pada elemen ol untuk urutan besar ke kecil.

Perubahan makna elemen

Ada beberapa elemen yang berubah makna, diantaranya:
  • Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak 'deprecated' (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen i.
  • Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.
  • Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.
  • dan lain-lain.

Elemen dan atribut yang tidak digunakan

Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5:
  • center,
  • font,
  • strike, u, big,
  • frame, frameset, noframes,
  • acronym,
  • longdesc,
  • scope pada td,
  • dan sebagainya.

Kesiapan peramban

Peramban bermesin Presto (Opera) versi terbaru tampak lebih banyak mendukung elemen baru HTML 5. Sementara peramban berbasis Gecko (Firefox dan turunannya), WebKit (Safari, Chrome, Midori), dan Trident (Internet Explorer) versi terbaru baru mendukung sebagian fitur HTML 5. Bacaan:
  1. HTML 5 (W3C).
  2. HTML Design Principles.
  3. HTML 5 differences from HTML 4.
  4. Comparison of layout engines (HTML 5).
Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com.

Posted in category: Web Standards
Tags:
41 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Mencoba HTML 5 by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

41 Responses to post titled: Mencoba HTML 5

  1. Comment by afwan auliyar on September 6, 2009 at 11:02:49
    using Firefox 3.5.2 on Windows Server 2003

    wew.... sepertinya menarik neh :)
    boleh disimak keknya

  2. Comment by choen on September 7, 2009 at 15:03:34
    using Firefox 3.5.2 on Windows XP

    wah makasih nih, penjelasannya lengkap banget, jadi tambah paham sama HTML 5. Tapi gimana yah misalnya penggunaan element section digunain untuk mengganti penggunaan div, diluar dari element baru HTML. misal

  3. Comment by jenggo on September 7, 2009 at 18:08:36
    using GNU IceCat 3.5.2 on Zenwalk GNU Linux

    Enaknya html5 nerima 'penulis html' yang udah fokus ke xhtml strict.. haha..
    untung masih lama (2022 baru jadi standar umum yah? CMIIW), masih sempet biasain sama doctypenya yang pendek itu.. ehehe..

  4. Comment by dani on September 8, 2009 at 00:59:50
    using Opera 10.00 on GNU/Linux

    choen,
    maaf, kodenya kepotong bos.. :)

    baca juga pengalaman choen mempraktikkan HTML 5 di templat klasik blogspotnya.

  5. Comment by Dani Iswara on September 8, 2009 at 01:20:35
    using Firefox 3.5.2 on SuSE

    jenggo,
    (dikembangkan sejak 2003) 2022 perkiraan para peramban siap mendukung HTML 5. mungkin saja HTML 5 sudah siap dirilis resmi sebelum tahun tersebut. tapi masih parsial didukung oleh para peramban modern. cmiiw :)

  6. Comment by fxekobudi on September 8, 2009 at 09:45:17
    using Firefox 3.0.13 on Ubuntu 9.04

    Wah, saya sudah ketinggalan info nih.. :-)

  7. Comment by ardianzzz on September 8, 2009 at 11:21:31
    using Firefox 3.0.1 on GNU/Linux

    wah wah wah.. dah keluar ya?
    tp saya lebih tertarik dengan CSS3
    hehehe

  8. Comment by Dani Iswara on September 8, 2009 at 13:01:29
    using Firefox 3.5.2 on SuSE

    fxekobudi,
    masi anget kok, pak..bisa juga mulai disinggung buat para siswanya. :)

  9. Comment by Dani Iswara on September 8, 2009 at 13:14:29
    using Firefox 3.5.2 on SuSE

    ardianzzz,
    CSS3 juga menarik. selain perjuangan IE yang terus berbenah, sejak 2007--kalo ngga salah--sudah diributkan mengenai validasi CSS versi W3C yang dianggap berlebihan terhadap vendor specific extensions seperti -moz, -webkit, yang dianggap suatu error. :)

  10. Comment by zam on September 8, 2009 at 13:48:48
    using Shiretoko 3.5.4pre on Ubuntu 9.04

    nce info, gan.. tapi sepertinya utk sekarang belum semua browser bisa ngerender ya?

    terutama si IE itu tuh.. :D

  11. Comment by zam on September 8, 2009 at 14:10:42
    using Shiretoko 3.5.4pre on Ubuntu 9.04

    eh, browser-ku salah dideteksi! hihihihihi

  12. Comment by ganda on September 8, 2009 at 14:56:23
    using Internet Explorer 8.0 on Windows XP

    yah, tapi itulah trik2 yang sering di gunakan, misalnya rounder corner atau transparansi, tanpa menggunakan images

  13. Comment by ganda on September 8, 2009 at 14:57:26
    using Internet Explorer 8.0 on Windows XP

    saya masih mempertanyakan fitur drag n drop HTML5 dan hubungannya terhadap aksesibilitas

  14. Comment by Dani Iswara on September 8, 2009 at 21:48:45
    using Firefox 3.5.2 on SuSE

    zam,
    kebacanya Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1.4pre) Gecko/20090902 Ubuntu/9.04 (jaunty) Shiretoko/3.5.4pre

  15. Comment by Dani Iswara on September 8, 2009 at 21:56:34
    using Firefox 3.5.2 on SuSE

    zam,
    bisa, quirks mode.. :P

  16. Comment by dani on September 9, 2009 at 05:01:42
    using Midori on GNU/Linux

    ganda,
    bacaan ini mungkin menarik: accessible drag and drop (Opera Developer Community).

  17. Comment by Dani Iswara on September 9, 2009 at 05:50:13
    using Firefox 3.5.2 on SuSE

    choen,
    sependek yang saya baca, section bermakna lebih semantik dibanding sekadar div--sebagai block-level container element.

    Di dalam section, bisa mengandung nav, article, aside yang bermakna lebih spesifik semantiknya.

    Yang mungkin berpeluang membingungkan, section tertentu (misal: listing) sendiri memungkinkan berfungsi sebagai bagian dari article.

    Dalam HTML 5, jika elemen blok hanya befungsi sebagai tata letak, disarankan tetap menggunakan div seperti pada HTML 4. Jika bermakna semantik, gunakan langsung misalnya: section, nav, article, atau aside. cmiiw :)

  18. Comment by nara on September 9, 2009 at 11:33:55
    using Firefox 3.5 on Windows Vista

    wah baru tahu ada fitur drag and dropnya bli :)

    baca dl ke operanya..

  19. Comment by Hermanus on September 9, 2009 at 15:59:19
    using Firefox 3.0.13 on Windows XP

    Belajar HTML memang mengasikkan tetapi ya harus sabar, ntar salah-salah kalau ndak jeli bisa berantakan, nah ini yang menjadi kekhawatiran, maklum baru belajar

  20. Comment by Dani Iswara on September 10, 2009 at 02:24:07
    using Firefox 3.5.2 on SuSE

    nara,
    cocok buat situ yang tukang oprek theme. :)

  21. Comment by ganda on September 10, 2009 at 12:38:01
    using Safari 4.0.2 on Windows XP

    makasih bang dani. :)

  22. Comment by masoglek on September 10, 2009 at 23:38:34
    using Firefox 3.0.7 on Windows XP

    baca tulisan ini jadi semangat untuk ikutan "membuang" IE6

  23. Comment by sawali tuhusetya on September 11, 2009 at 00:44:46
    using Firefox 3.0.8 on Ubuntu 9.04

    hmmm ... w3c agaknya sangat konsisten dalam mengembangkan satandar web. bisa mengikuti nggak, ya, pak, saya, hehe ... pingin banyak belajar sama pak dani, nih.

  24. Comment by pushandaka on September 11, 2009 at 20:28:22
    using Firefox 3.0.8 on Windows Vista

    Bli, setiap mampir ke blog ini saya selalu ndak tau harus komentar apa-apa. Saya benar-benar ndak nyambung kalau ngobrolin masalah beginian. Hehe!

    Maaf ya, jadi OOT..

  25. Comment by Dani Iswara on September 12, 2009 at 01:30:14
    using Firefox 3.5.2 on SuSE

    masoglek,
    maksudnya memasukkan ke museum ya.. :)

  26. Comment by Dani Iswara on September 12, 2009 at 01:38:14
    using Firefox 3.5.2 on SuSE

    sawali tuhusetya,
    daripada dikuasai proprietary, mending open web kan, pak.. :)

  27. Comment by Dani Iswara on September 12, 2009 at 01:51:56
    using Firefox 3.5.2 on SuSE

    pushandaka,
    kan memang unessential, bli. boleh diliat, ngga harus dikomentari, kok. :D

  28. Comment by choen on September 12, 2009 at 03:44:45
    using Firefox 3.5.3 on Windows XP

    sip paham gw, makasih banyak boss.

  29. Comment by pututik on September 15, 2009 at 07:48:17
    using Google Chrome 2.0.172.33 on Windows Vista

    salut buat w3c setiap ada update lebih mempermudah user dalam bahasa manusia ^_^ semoga saja kompatibilitasnya cepat disupport oleh semua browser.

  30. Comment by Pradna on September 17, 2009 at 14:48:23
    using Swiftfox on GNU/Linux

    wah, baru mo (niat) belajar yg kek ginian...bukmerk dulu (worship)

  31. Comment by Atmaji on September 20, 2009 at 20:22:11
    using Google Chrome 1.0.154.65 on Windows XP

    lebih mudah mempelajari CSS atau HTML?hehe
    saya msh pelajar jd masih kurang mengerti...

  32. Comment by Dani Iswara on September 21, 2009 at 13:09:16
    using Firefox 3.5.3 on SuSE

    Atmaji,
    IMO, dilihat dari agak ribetnya kompatibilitas peramban, belajar HTML sepertinya lebih mudah.

  33. Comment by rio2000 on October 1, 2009 at 09:34:53
    using Firefox 3.0.14 on Ubuntu 9.04

    asal bikin buka web cepat saja - saya oke2 saja :)

  34. Comment by Dani Iswara on October 1, 2009 at 09:47:50
    using Firefox 3.5.3 on SuSE

    rio2000,
    logikanya sih dengan kode yang hemat (dalam ukuran berkas) dan semantik, akses dan keterbacaan jadi lebih cepat dan mudah. :)

  35. Comment by riza on November 6, 2009 at 13:44:54
    using Firefox 3.5.2 on Windows Vista

    mkasih tas infonya..
    aq pasang di wordpress ku ya..

  36. Comment by Dani Iswara on November 6, 2009 at 21:32:11
    using Firefox 3.5.4 on SuSE

    Riza,
    Terima kasih atas konfirmasinya. Demi menghargai lisensi yang ada, silakan.

Trackbacks/Pingbacks

  1. Pingback by Web Accessibility Guidelines by MS University - Dani Iswara .Net on October 8, 2009 at 05:20:01
    WordPress abc

    [...] or acronym? Since HTML 5 will only use abbr, so you have to rethinking it if there is a plan to change the doctype [...]

  2. Pingback by HTML 5 « Khaesha's Blog on January 7, 2010 at 16:39:51
    XML-RPC

    [...] dari http://daniiswara.net/2009/09/06/mencoba-html-5/, http://teknoinfo.web.id/programmer-harus-bersiap-siap-hadapi-html-5/ Ditulis dalam [...]

  3. Pingback by HTML versi 5 « Hannaamalia's Blog on January 8, 2010 at 17:07:42
    XML-RPC

    [...] http://daniiswara.net/2009/09/06/mencoba-html-5/ [...]

  4. Pingback by Perbedaan html versi 5 dgn sebelumnya « Luthfiariff's Blog on January 8, 2010 at 23:13:36
    XML-RPC

    [...] http://daniiswara.net/2009/09/06/mencoba-html-5/ [...]

  5. Pingback by Penulisan Elemen ABBR yang Aksesibel - Unessential Weblog on April 12, 2010 at 07:03:38
    WordPress abc

    [...] Saat ini, penulisan ‘abbr’ dianggap lebih semantik dibanding acronym. Lihat contoh yang baik dari Panduan Standar Web dan Semantik versi 1.6 milik BBC (situs ‘broadcasting’). Tag ‘acronym’ juga tidak dipakai lagi di HTML5 yang sempat saya coba. [...]

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Dimana Posisi OpenOffice.org?
‹‹ Newer entries: Accessibility Review by Practical eCommerce