HTML5 | Unsur Baru HTML5

Jujur saya sendiri juga belum mengerti betul, apa lagi menguasai yang namanya HTML5, yang XHTML saja masih harus banyak belajar. Tapi saya di sini hanya sekedar sharing ilmu aja. Berikut ini unsur-unsur baru yang ada di HTML5. Kalau teman-teman mengerti kan kita jadi bisa saling sharing iya ga?. langsung aja nih unsur baru yang saya dapat dari http://hendro-prayitno.blogspot.com/ sebuah blog yang lumayan buat belajar hehehe.

1.Markup Elements
<article> untuk eksternal konten seperti berita,forum,blog dan lain sebagainya.

<aside> Konten yang berisi konten yang berhubungan pada satu dokumen

<command> Untuk tombol atau radio button

<details> Untuk mendeskripsikan perincian tentang suatu dokumen, atau bagian dari satu dokumen

<summary> Satu teks, atau rangkuman, di dalam elemen detil

<figure> Untuk menggolongkan satu bagian dengan konten yang berdiri sendiri

<figcaption>Teks dari bagian figur

<footer> Untuk satu footer dari satu dokumen atau bagian, termasuk nama dari pengarang, tanggal dokumen, hubungi keterangan, atau keterangan hak cipta

<header> Untuk pengenalan bagian dokumen

<hgroup>Untuk section heading <h1></h1> juga bisa membuat section dan sub-heading
(kalau salah mohon di koreksi)


<mark> Untuk teks yang sudah di tandai atau di highlighted

<meter> Untuk mengukur nilai maksimum dan minimum

<nav> Untuk navigasi

<progress>Untuk bagian tag yang sedang bekerja

<ruby> Nah... yang ini unik, gunanya untuk bahasa cina atau karakter yang lainnya

<rt> ini untuk keterangan dari ruby itu sendiri

<rp> Yang dilihatkan di browser yang tidak suport element ruby

<section> Untuk satu bagian pada satu dokumen. seperti headers,footers,atau bagian lainnya.

<time> Untuk mendefinisikan satu waktu atau satu tanggal, atau keduanya

2. Element Media
<audio> Untuk konten multimedia, bunyi, musik atau audioyang di tambahkan

<video> Untuk konten video

<source>Untuk sumber daya media di dalam tag video atau audio

<embed>Untuk melekatkan konten, seperti menambahkan satu fitur

3. Element kanvas
<canvas> Untuk membuat grafik dengan satu script

4.Form element
<datalist>Untuk daftar list

<keygen>Menghasilkan kunci untuk membuktikan keaslian pengguna

<output>Untuk keluaran yang berbeda yang keluar dengan kode script

Hanya itu yang bisa saya sampaikan. sekian dan terima kasih wassalam

19 komentar:

Jana Virananda, 26 November 2010 at 11:38 | [Reply]

Wowww, canggih ..

Dimas Abi Galoga, 26 November 2010 at 20:08 | [Reply]

@Mr.Kelpo iya gan, tapi sayang saya belum mengerti semuanya hehe

Beben Koben, 30 November 2010 at 05:44 | [Reply]

sebenarnya mah cuman nambahin attribute saja kok, cuman yg bingung itu penerapannya saja..xixixixi

Dimas Abi Galoga, 30 November 2010 at 06:10 | [Reply]

@Beben sebenernya gampang, tpi yg bikin bingung penerapan di blogspot hehe

Anonymous, 30 November 2010 at 08:34 | [Reply]

wah masukkan baru nech....
sob mau gak tuker link???
ne link aku

fresh4u2.blogspot.com

lo mau konfir ya!!!

Dimas Abi Galoga, 1 December 2010 at 00:19 | [Reply]

@Fresh 4 U boleh sob, silahkan pasang duluan

Unknown, 1 December 2010 at 03:56 | [Reply]

wah keren nih sob tips na..emg smua browser sudah bisa baca kode ini skrang..??

jangan lupa mampir ke blog ane jg sob

Photoshop TutorialTips BlogHitsuke

Unknown, 1 December 2010 at 03:58 | [Reply]

oh ya, bleh taw nih pake template apa..?? ane mw tw cara membuat "comment-form" terpisah dengan komentar na disebelah kaya gini :). mohon jawabanna di blog ane ya sob. Thx

Dimas Abi Galoga, 1 December 2010 at 05:50 | [Reply]

@Hitsuke klo untuk kode HTML tentu semuanya bisa membaca. dan untuk templates ini saya bikin sendiri lalu membuat comment-form sebenarnya mudah tpi aga sulit di jelaskan bukanya saya ga mau ngajarin maaf sebelumnya

Unknown, 1 December 2010 at 16:52 | [Reply]

@Dimas Abi Galoga, boleh di copy gak ke notepad template na..?? ane mw bikin kotak komentar yg bersebelahan kaya gini nih. please gan..dari bagian <b:includable id='comment-form' var='post'> kebawah...

Dimas Abi Galoga, 2 December 2010 at 07:04 | [Reply]

@Hitsuke Silahkan di klik dan di baca gan

Unknown, 4 December 2010 at 02:02 | [Reply]

@Dimas Abi Galoga wah link na macet gan..ane ga bisa buka..coba di host di google doc aja deh.. https://docs.google.com/

Dimas Abi Galoga, 4 December 2010 at 18:34 | [Reply]

@Hitsuke https://docs.google.com/leaf?id=0B83HhXOatc7-NDcxYTM2OTktNjg5NS00OGYyLTgyNTctY2E3N2I1NGY4NDZm&hl=en

Unknown, 6 December 2010 at 01:15 | [Reply]

@Dimas Abi Galoga, maaf gan..ane ngerepotin..tapi tetap ga bisa dibuka gan..agan lupa mngganti privisi na..haha ywdah..post di Private Message>

skali lagi maaf gan merepotkan.. :) oh y, link na udah di tambahkan di home page blog ane tuh :)

Dimas Abi Galoga, 6 December 2010 at 03:55 | [Reply]

@Hitsuke oke gan, di blog yg mana gan?

Unknown, 6 December 2010 at 21:38 | [Reply]

@Dimas Abi Galoga di blog ini gan..Photoshop TutorialTips BlogHitsuke
coba cari di homepage..dia baru muncul di homepage..tekan aja CTRL+U buat lihat source na gan..trus cari link agan dengan CTRL + F :) . Thanks y gan..skrang udah bisa semua..

Septian D Chandra, 8 January 2011 at 02:00 | [Reply]

Saya pernah liat nih blogger yg udah pake HTML5 di blogspot. di http://deconstructioncode.blogspot.com. Emang udah ga aktif sih, tapi berarti kita masih mungkin kan pake HTML5 di blogger?

Dimas Abi Galoga, 11 February 2011 at 04:59 | [Reply]

@Septian DC bisalah gan, saya udah posting kok cara pasang HTML5 di blog.

Dimas Abi Galoga, 11 February 2011 at 04:59 | [Reply]

@Septian DC bisalah gan, saya udah posting kok cara pasang HTML5 di blog.

Post a comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home