HTML 5

By Ardhitya Wiedha Irawan -

Apa itu HTML 5 ?  saya pun tak tau, so mari kita belajar mengenalnya ,………………………………

Ok here we go! What is HTML 5 ? HTML5 merupakan revisi ke 5 dari bahasa markup World Wide Web, HTML. Berbeda dengan HTML 4 yang hanya memberikan perubahan layouting pada HTML 5 ini akan membawa perubahan tidak hanya dibidang tersebut, seperti halnya tag canvas dan video kedua tag tersebut merupakan salah satu andalan perubahan pada HTML5. Selain 2 tag itu HTML 5 juga memiliki perubahan dan penambahan tag lainnya, so Mari kita bahas beberapa tag pada html 5, sekali lagi beberapa tag ajah yah kalo mau tau banyak baca aja di doubleYouThreeSchool aje ye…

 

The Doctype.

Sintak ini wajib diletakan pada awal dokumen HTML 5. The doctype ini bukan tag html melainkan sebuah deklarasi untuk mendefinisikan kepadabrowser kode ini (tag html) tersebut ditulis dalam versi HTML apa.

“The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.” (w3school).

Contoh penulisannya :

[sourcecode language=’html’]

< !DOCTYPE html>

The content of the document……


[/sourcecode]

SVG Support

Scalable Vector Graphic merupakan bahasa untuk membuat grafis/gambar 2 dimensi dengan kode XML.

Berikut contoh kode:

[sourcecode language=’html’]


[/sourcecode]

Element

Elemen-elemen berikut telah diperkenalkan dalam struktur yang lebih baik:

  • section merupakan dokumen generik atau bagian aplikasi. Hal ini dapat digunakan bersama dengan h1 , h2 , h3 , h4 , h5 , dan h6 elemen untuk menunjukkan struktur dokumen.

[sourcecode language=’html’]

WWF

The World Wildlife Foundation was born in 1961…

[/sourcecode]

  • article merupakan bagian independen dari isi dokumen, seperti entri blog atau artikel koran.
  • aside merupakan bagian dari konten yang hanya sedikit berhubungan dengan sisa halaman.
  • hgroup digunakan untuk mengelompokan tag heading.

[sourcecode language=’html’]

Welcome to my WWF

For a living planet

[/sourcecode]

  • header tag untuk posisi bagian atas, biasanya merupakan sekelompok navigasi.

  • footer merupakan footer untuk bagian dan dapat berisi informasi tentang penulis, informasi hak cipta, dll

  • nav merupakan bagian dari dokumen dimaksudkan untuk navigasi.

  • figure dapat digunakan untuk pembungkus kode gambar, video, diagram atau foto.

[sourcecode language=’html’]

Example

[/sourcecode]

  • figcaption dapat digunakan sebagai keterangan pada gambar, penggunaanya bisa dibarengkan dengan tag figure. Berikutnya contohnya :

[sourcecode language=’html’]

A view of the pulpit rock in Norway

[/sourcecode]

 

Beberapa tag baru :

  • video dan audio, tag yang dapat digunakan untuk konten multimedia, intinya buat load video atau pideo getoh…

  • track, merupakan tag yang belum disupport oleh browser manapun (w3school), tag ini bertujuan untuk dapat memberikan subtitle pada video.

  • canvas digunakan untuk rendering grafis bitmap dinamis on the fly, seperti grafik atau game. (gambar gambar gituh deh…)

  • mark, digunakan untuk memberikan efek highlight pada text. contoh penggunaannya dibawah ini untuk memberikan efek pada kata milk :

[sourcecode language=’html’]

Do not forget to buy milk today.

[/sourcecode]

  • wbr merupakan element yang digunakan untuk memerikan tanda posisi pemotongan pada text html yang dikarenakan oleh layar. Contohnya pada kata XML<wbr>Http<wbr>Request, dengan pemberian tag ini ketika harus pindah baris maka pemotongan kalimatnya berada setelah text XML atau Http.

[sourcecode language=’html’]
To learn AJAX, you must be familiar with the XMLHttpRequest Object.
[/sourcecode]

Hmmm sepertinya masih banyak element/atribut dan perubahan-perubahan di HTML 5. dan jikalau anda memang tertarik mempelajarinya silakan beranjak ke site doubleYouThreeSchool. Ups satu lagi sebelum anda coba HTML 5 ada baiknya cek kompatibilitas browser anda dengan HTML 5 disini . Saya coba cek kompatibilitas browser firefox 7.x saya dan cukup banyak juga yang masih belum kompatible.

 

Kutipan ringakasan :

Differences from HTML 4.01/XHTML 1.x

The following is a cursory list of differences and some specific examples.

  • New parsing rules oriented towards flexible parsing and compatibility; not based on SGML
  • Ability to use inline SVG and MathML in text/html
  • New elements – section, article, footer, audio, video, progress, nav, meter, time, aside, canvas
  • New types of form controls – dates and times, email, url, search
  • New attributes – ping (on a and area), charset (on meta), async (on script)
  • Global attributes (that can be applied for every element) – id, tabindex, hidden, data-* (custom data attributes)
  • Forms will get support for PUT and DELETE methods too instead of just GET and POST (see Representational State Transfer for use cases)
  • Deprecated elements dropped – center, font, strike, frameset

 

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY