HTML 5. Makhluk apakah ini?

HTML 5 merupakan pengembangan dari versi sebelumnya, HTML 4. HTML 5 memiliki beberapa kelebihan dibanding pendahulunya, cekidot gan:

Canvas

Dulu, untuk bisa memberikan interaksi menggambar di halaman web kita harus memakai applet Java atau Flash. HTML 5 akan memberikan satu opsi tambahan: canvas. Seperti namanya, canvas adalah media yang bisa dicorat-coret langsung. Tidak lagi perlu memuat plugin khusus. Cukup tambahkan <canvas> dan javascript maka kita sudah bisa menggambar langsung di halaman web. Sekarang Anda bisa berimaginasi sendiri, kira-kira apa saja yang orang lakukan dengan <canvas>. Apa yang sebelumnya jadi monopoli Flash dan aplet Java akan di-take-over oleh <canvas>.

Video dan Audio

Akan ada tag <audio> dan <video> di HTML 5. Jadi tidak perlu lagi menempelkan flash untuk sekedar memutar audio. Format video yang didukung akan bervariasi terhadap browser, kemungkinan besar codecnya adalah Ogg Theora (patent free) dan H.264. Sepertinya sampai sekarang codecnya masih jadi kontroversi.

Local Storage

Masih ingat Google Gears? Sekarang storage untuk browser akan diakomodasi sebagai standard dalam HTML 5. Aplikasi bisa menyimpan data dalam jumlah lebih besar dari biasanya tanpa harus mengimplementasikan trik dengan cookie atau Flash. Tentunya ini kabar baik bagi pengembang aplikasi web. Mungkin bisa meningkatkan performa aplikasi dengan menggunakan storage sebagai local cache. Coba liat detilnya di sini.

Web Workers

Yang ini juga sempat kita nikmati lewat Google Gears. Jika javascript biasanya yang kita nikmati di web kadangkala menyebabkan komputer kita melambat atau paling tidak membuat browser seperti sesak napas maka web worker akan bsia jadi pelega. Salah satu fitur web worker adalah threading. Kini javascript bisa dipakai untuk melakukan beberapa proses sekaligus tanpa harus menghambat proses terkait UI.

Semantics

Nah ini dia. Buat designer yang sering meng-abuse div dan span sebagia elemen nav, fret no more. Akan ada tag khusus untuk navigasi, section, footer, dll. Tag yang kaya semantic seperti ini pasti akan lebih bermanfaat dari pada tag yang hanya punya informasi format dan layout saja. Dan bagi mesin, HTML5 akan jadi lebih bisa dimengerti.

Tidak berhenti di situ saja, nantinya juga akan ada dukungan microformats yang lebih baik dari sekarang ini. Dukungan microformats ini akan memanfaatkan tag dan atribut baru yang diperkenalkan di HTML 5. Tentang microformats, bisa kita baca progress-nya di sini.

Browser Anda sudah siap untuk HTML 5? Test saja di sini.

sumber : http://www.navinot.com/2009/10/16/apa-saja-isi-html-5/

buat lebih jelas, ni ada lagi dari w3school

New Markup Elements

New elements for better structure:

Tag Description
<article> For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside> For content aside from the content it is placed in. The aside content should be related to the surrounding content
<command> A button, or a radiobutton, or a checkbox
<details> For describing details about a document, or parts of a document
<summary> A caption, or summary, inside the details element
<figure> For grouping a section of stand-alone content, could be a video
<figcaption> The caption of the figure section
<footer> For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header> For an introduction of a document or section, could include navigation
<hgroup> For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark> For text that should be highlighted
<meter> For a measurement, used only if the maximum and minimum values are known
<nav> For a section of navigation
<progress> The state of a work in progress
<ruby> For ruby annotation (Chinese notes or characters)
<rt> For explanation of the ruby annotation
<rp> What to show browsers that do not support the ruby element
<section> For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time> For defining a time or a date, or both

New Media Elements

HTML 5 provides a new standard for media content:

Tag Description
<audio> For multimedia content, sounds, music or other audio streams
<video> For video content, such as a movie clip or other video streams
<source> For media resources for media elements, defined inside video or audio elements
<embed> For embedded content, such as a plug-in

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag Description
<canvas> For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more functionality:

Tag Description
<datalist> A list of options for input values
<keygen> Generate keys to authenticate users
<output> For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element’s type attribute has many new values, for better input control before sending it to the server:

Type Description
tel The input value is of type telephone number
search The input field is a search field
url The input value is a URL
email The input value is one or more email addresses
datetime The input value is a date and/or time
date The input value is a date
month The input value is a month
week The input value is a week
time The input value is of type time
datetime-local The input value is a local date/time
number The input value is a number
range The input value is a number in a given range
color The input value is a hexadecimal color, like #FF8800

You may also like...

2 Responses

  1. Really glad i stumbled on this information.

  1. August 2, 2010

    […] This post was mentioned on Twitter by Fahmi Ramadhan, Fahmi Ramadhan, Listiyanti, Fahmi Ramadhan, Fahmi Ramadhan and others. Fahmi Ramadhan said: Mau kenalan sama HTML 5? cekidot gan! http://bit.ly/9FO6wk […]

Leave a Reply

Your email address will not be published. Required fields are marked *