Apa yang baru dari HTML5?

Apa yang baru dengan HTML 5?

Pendahuluan

HTML 5 adalah pengembangan terbaru dari HTML4 yang sudah 10 tahun umurnya. HTML 5 banyak mempunyai fitur tambahan yang sangat berguna di era pengembangan web masa kini. yang paling berkesan buat saya adalah fitur Video dan Audio. fitur baru element <video> dan <audio> mengijinkan kita untuk memutar langsung video dan audio di browser tanpa menggunakan flash player (HTML4, XHTML teknologi sebelumnya menggunakan flash player untuk memutar film, musik atau segala macam jenis file audio video).

<!doctype html>

Implementasi yang sangat simple dan mudah di awal code untuk menegaskan bahwa itu adalah HTML5.

<!doctype html>

ya cuman 2 kata yang kita perlukan, “doctype” dan “html” , ini sangat mudah sekali karena HTML5 adalah juga bagian dari SGML. character set untuk HTML5 menggunakan “UTF-8″
<meta charset=”UTF-8″>

Struktur menarik dari HTML5

beberapa struktur baru yang menarik dan sangat berguna dari HTML5

<canvas> – element yang menyediakan lahan gambar yang di control oleh javascript di Web mu. bisa berbentuk gambar atau grafik yang dinamis .
<video> – menambahkan video di dalam web, dan bisa diputar langsung tanpa embedd flash
<audio> – menambahkan audio di dalam web, dan bisa diputar langsung tanpa embedd flash

Struktur baru HTML 5

HTML5 mengenal di halaman Web mempunyai struktur, seperti buku yang mempunyai struktur dari judul, pembukaan, daftar isi, isi, penutup. hal ini seperti juga XML document yang lain. secara umum halaman web mempunyai header, navigation, body content , sidebar dan footer.

<section> – Menegaskan sebuah bagian, seksi atau bagian buku, bab, buku
<header> – Header halaman. ini tidak sama dengan <head>
<footer>    – Footer halaman, biasanya di gunakan untuk deklarasi resmi halaman/situs.
<nav>       – Navigasi link ke halaman lain.
<arcticle> – block artikel/content utama dapat di bungkus dengan tag ini.
<aside>    – digunakan untuk extra informasi di sebuah block teks atau bisa juga sidebar
<figure>    – defines images that annotate an article

New inline elements

HTML5 mengenalkan elemen baru untuk membantu mengindikasikan elemen dasar seperti waktu atau penomoran.

<mark> – ini menjunjukkan bahwa sedikit teks di tandai dengan berbagai cara. sample <p>Do not forget to buy <mark>milk</mark> today.</p>
<time> – untuk menunjukan waktu, atau tangal di block teks
<meter> – Untuk mengukur bilangan/angka di penyortiran. dapat memiliki banyak atribut, termasuk : value, min, max, low, high and optimum.
<progress> – untuk menunjukan progress bar di beberapa penyortiran. mempunyai pasangan atribut: value dan max. max atribut dapat di abaikan.

HTML 5 Form input Type baru

HTML 5 support standart form input types, tetapai di tambahkan beberapa:

* datetime
* datetime-local
* date
* month
* week
* time
* number
* range
* email
* url

HTML 5 code yang di hilangkan:

beberapa code html4 yang sudah tidak di gunakan lagi di html5 yaitu:

* acronym
* applet
* basefont
* big
* center
* dir
* font
* frame
* frameset
* isindex
* noframes
* noscript
* s
* strike
* tt
* u

* New interactive elements

Some nice things that will make building websites and, perhaps more pointedly, web applications, easier.
<details> – This can be used to provide further information about something specific. For example it could be implemented by browsers as tooltips. This tag can have an open attribute which dictates whether the content is initially shown to the user or not.
<datagrid> – Unlike traditional tables (which are designed to be static), this can be used to provide a set of data with some degree of interactivity. For example selecting rows or columns, editing data, sorting and generally interacting with the data in the client.
<menu> – Previously a deprecated element, <menu> is back in HTML5 with a new meaning. It can, for example, contain <command> elements which cause a particular action to happen. For example you could use this element to provide a toolbar of sorts, or a context menu (see above). It can have label and icon attributes. They can be nested to provide multiple levels of menus.

* New DTD

HTML5 has a new, much simpler DTD: <!doctype html> Much nicer I think you’ll agree and far more memorable. As I understand it, this results from HTML not being associated with SGML any more.
* Optional href on links

This is now optional as links can be used in conjunction with scripting. Perhaps more useful in web applications as opposed to web sites.
* The async attribute

This stipulates that a block of script can be executed asynchronously, instead of blocking the rest of the page until it’s finished.

Summary

HTML5 could well be the update to HTML that everyone has been waiting for. It provides useful additions to the language that will make building web based applications far more easily and efficiently, at the same time as making the code simpler.

Naturally not all browsers will support everything (<cough>MSIE</cough>), but it will come in time, and new items have been specifically designed to accomodate this. So everyone wins. Most browsers already support some of the specification, some for a long time. An example of this is <canvas>, supported by Firefox, Opera, Chrome and Safari. AFAIK Firefox 3.1 will support more of it, namely the <audio> and/or the <video> tags. Can’t wait.