apa itu html5

56
Apa itu HTML5? HTML5 akan menjadi standar baru untuk HTML, XHTML, dan DOM HTML. Versi sebelumnya dari HTML datang pada tahun 1999. Web telah banyak berubah sejak saat itu. HTML5 masih dalam proses. Namun, sebagian browser modern mempunyai dukungan HTML5. Bagaimana Memulai Apakah HTML5? HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerja sama dan membuat versi baru dari HTML. Beberapa aturan tambahan untuk HTML5: 1. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript 2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash) 3. Lebih baik penanganan kesalahan 4. Lebih markup untuk menggantikan scripting 5. HTML5 harus perangkat independen 6. Proses pembangunan harus terlihat untuk umum Fitur Baru Beberapa fitur baru yang paling menarik di HTML5: 1. Unsur kanvas untuk menggambar 2. Unsur-unsur video dan audio untuk media pemutaran 3. Dukungan yang lebih baik untuk penyimpanan offline lokal 4. Baru isi elemen tertentu, seperti artikel, footer, header, nav, bagian 5. New bentuk kontrol, seperti kalender, tanggal, waktu, email, url, cari Dukungan Browser HTML5 standar belum resmi, dan tidak ada browser memiliki dukungan penuh HTML5. Tapi semua browser utama (Safari, Chrome, Firefox, Opera, Internet Explorer) terus menambahkan fitur HTML5 baru ke versi yang terbaru. Elemen baru di HTML5 Internet telah berubah banyak sejak HTML 4.01 menjadi standar pada tahun 1999. Hari ini, beberapa elemen dalam HTML 4.01 yang usang, tidak pernah digunakan, atau tidak menggunakan cara mereka dimaksudkan. Elemen ini dihapus atau ditulis ulang di HTML5. Untuk lebih menangani menggunakan internet saat ini, HTML5 juga mencakup unsur-unsur baru untuk struktur yang lebih baik, gambar, isi media, dan penanganan bentuk yang lebih baik. Elemen Baru Markup Elemen baru untuk struktur yang lebih baik: Tag Keterangan <article> Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal <aside> Untuk konten selain dari konten itu ditempatkan masuk Isi samping harus berkaitan dengan isi sekitarnya <command> Sebuah tombol, atau radiobutton, atau checkbox <details> Untuk menjelaskan rincian tentang dokumen, atau bagian dari dokumen <summary> Sebuah judul, atau ringkasan, di dalam elemen rincian <figure> Untuk pengelompokan bagian konten yang berdiri sendiri, bisa video <figcaption> Judul dari bagian gambar

Upload: m-jarwanto

Post on 11-Mar-2015

264 views

Category:

Documents


11 download

TRANSCRIPT

Page 1: Apa itu HTML5

Apa itu HTML5?

HTML5 akan menjadi standar baru untuk HTML, XHTML, dan DOM HTML.Versi sebelumnya dari HTML datang pada tahun 1999. Web telah banyak berubah sejak saat itu.HTML5 masih dalam proses. Namun, sebagian browser modern mempunyai dukungan HTML5.

Bagaimana Memulai Apakah HTML5?

HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext ApplicationTechnology Working Group (WHATWG).WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Pada tahun 2006,mereka memutuskan untuk bekerja sama dan membuat versi baru dari HTML.

Beberapa aturan tambahan untuk HTML5:1. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash)3. Lebih baik penanganan kesalahan4. Lebih markup untuk menggantikan scripting5. HTML5 harus perangkat independen6. Proses pembangunan harus terlihat untuk umum

Fitur Baru

Beberapa fitur baru yang paling menarik di HTML5:1. Unsur kanvas untuk menggambar2. Unsur-unsur video dan audio untuk media pemutaran3. Dukungan yang lebih baik untuk penyimpanan offline lokal4. Baru isi elemen tertentu, seperti artikel, footer, header, nav, bagian5. New bentuk kontrol, seperti kalender, tanggal, waktu, email, url, cari

Dukungan Browser

HTML5 standar belum resmi, dan tidak ada browser memiliki dukungan penuh HTML5.Tapi semua browser utama (Safari, Chrome, Firefox, Opera, Internet Explorer) terus menambahkan fiturHTML5 baru ke versi yang terbaru.

Elemen baru di HTML5

Internet telah berubah banyak sejak HTML 4.01 menjadi standar pada tahun 1999.Hari ini, beberapa elemen dalam HTML 4.01 yang usang, tidak pernah digunakan, atau tidak menggunakancara mereka dimaksudkan. Elemen ini dihapus atau ditulis ulang di HTML5.Untuk lebih menangani menggunakan internet saat ini, HTML5 juga mencakup unsur-unsur baru untuk strukturyang lebih baik, gambar, isi media, dan penanganan bentuk yang lebih baik.

Elemen Baru MarkupElemen baru untuk struktur yang lebih baik:Tag Keterangan<article> Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari

sumber eksternal<aside> Untuk konten selain dari konten itu ditempatkan masuk Isi samping harus berkaitan dengan isi

sekitarnya<command> Sebuah tombol, atau radiobutton, atau checkbox<details> Untuk menjelaskan rincian tentang dokumen, atau bagian dari dokumen<summary> Sebuah judul, atau ringkasan, di dalam elemen rincian<figure> Untuk pengelompokan bagian konten yang berdiri sendiri, bisa video<figcaption> Judul dari bagian gambar

Page 2: Apa itu HTML5

<footer> Untuk footer dari dokumen atau bagian, dapat mencakup nama penulis, tanggal dokumen,informasi kontak, atau informasi hak cipta

<header> Untuk pengenalan dokumen atau bagian, dapat mencakup navigasi<hgroup> Untuk bagian judul, menggunakan <h1> untuk <h6>, dimana yang terbesar adalah utama

menuju bagian tersebut, dan yang lain sub-judul<mark> Untuk teks yang harus disorot<meter> Untuk pengukuran, yang digunakan hanya jika nilai maksimum dan minimum diketahui<nav> Untuk bagian navigasi<progress> Keadaan karya dalam penyelesaian<ruby> Untuk anotasi ruby (catatan Cina atau karakter)<rt> Untuk penjelasan tentang anotasi ruby<rp> Apa untuk menunjukkan browser yang tidak mendukung elemen ruby<section> Untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen<time> Untuk mendefinisikan waktu atau tanggal, atau keduanya<wbr> Word break. Untuk menentukan kesempatan line-break.

Elemen Baru MediaHTML5 memberikan standar baru untuk konten media:Tag Keterangan<audio> Untuk konten multimedia, suara, musik atau audio lainnya stream<video> Untuk konten video, seperti klip film atau video lainnya stream<source> Untuk sumber daya media untuk elemen media, yang didefinisikan di dalam unsur-unsur video

atau audio<embed> Untuk konten tertanam, seperti plug-in

Elemen KanvasUnsur kanvas menggunakan JavaScript untuk membuat gambar di halaman web.Tag Keterangan<canvas> Untuk membuat grafik dengan script

Elemen Formulir BaruHTML5 menawarkan unsur-unsur bentuk yang lebih, dengan fungsionalitas yang lebih:Tag Keterangan<datalist> Sebuah daftar opsi untuk nilai input<keygen> Buat kunci untuk mengotentikasi pengguna<output> Untuk berbagai jenis output, seperti output yang ditulis oleh script

Input Baru Tipe Atribut NilaiJuga, atribut jenis elemen input yang memiliki nilai-nilai baru, untuk kontrol input yang lebih baik sebelummengirimnya ke server:Tipe Keterangantel Nilai input adalah jenis nomor teleponsearch kolom input adalah bidang pencarianurl Nilai masukan URLemail Nilai input satu atau lebih alamat emaildatetime Nilai masukan tanggal dan / atau waktudate Nilai masukan tanggalmonth Nilai masukan bulanweek Nilai masukan seminggutime nilai input adalah tipe waktudatetime-local Nilai masukan tanggal lokal / waktunumber Nilai masukan nomorrange nilai input adalah angka dalam kisaran tertentu

HTML 5 VIDEO

Page 3: Apa itu HTML5

Banyak situs web modern menunjukkan video. HTML5 menyediakan standar untuk menunjukkan kepadamereka. Di bawah ini script untuk pengecekan video di html

<title>HTML5 Video</title><script type="text/javascript">function checkVideo(){if(!!document.createElement('video').canPlayType){var vidTest=document.createElement("video");oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');if (!oggTest){h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');if (!h264Test){document.getElementById("checkVideoResult").innerHTML="Maaf tidak support video";}

else{if (h264Test=="probably"){document.getElementById("checkVideoResult").innerHTML="Siip! Video OK!";}

else{document.getElementById("checkVideoResult").innerHTML="Wah. Cuma sebagian aja.";}

}}

else{if (oggTest=="probably"){document.getElementById("checkVideoResult").innerHTML=" Siip! Video OK!";}

else{document.getElementById("checkVideoResult").innerHTML=". Cuma sebagian aja.";}

}}

else{document.getElementById("checkVideoResult").innerHTML=" Maaf tidak support video"}

}</script>

<hr /><p class="intro">Beberapa websites modern menampilkan video. HTML5 menyediakan sebuah

standar untuk menampilkan video.</p><table class="example" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><h2 class="example">Check if your browser supports HTML5 video</h2><table class="example_code notranslate" border="0" cellpadding="0" cellspacing="0"

width="100%"><tr><td><div id="checkVideoResult"><button onclick="checkVideo()">Check</button></div></td></tr></table></td></tr></table><br /><hr />

Video pada halaman WEBSampai saat ini, tidak pernah ada sebuah standar untuk menampilkan video pada halaman web.Hari ini, video yang paling akan ditampilkan melalui plugin (seperti flash). Namun, tidak semua browsermemiliki plugin yang sama.

Page 4: Apa itu HTML5

Format VideoHTML5 menetapkan cara standar untuk memasukkan video, dengan elemen video. mereka.Saat ini, ada 3 format video yang didukung untuk elemen video:Format IE Firefox Opera Safari ChromeOgg Tidak 3.5 + 10.5 + 5.0 + NoMPEG 4 9.0 + Tidak Tidak 5.0 + 3.0 +WebM Tidak 4.0 + 10.6 + 6.0 + No

Ogg = Ogg file dengan codec video Theora dan Vorbis audio codecMPEG4 = MPEG 4 file dengan codec H.264 video dan AAC audio codecWebM = WebM file dengan VP8 codec video dan audio codec Vorbis

Cara Bekerja

Untuk menampilkan video dalam HTML5, ini adalah semua yang Anda butuhkan:<video src="movie.ogg" controls="controls"></video>

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume.Hal ini juga selalu ide yang baik untuk menyertakan atribut lebar dan tinggi.Sisipkan konten antara <video> dan </ video> tag untuk browser yang tidak mendukung elemen video:Contoh ;<video src="movie.ogg" width="320" height="240" controls="controls">Your browser does not support the video tag.</video>

Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome.Untuk membuat karya video di Internet Explorer, Safari dan Chrome versi masa depan, kita harusmenambahkan MPEG4 dan file WebM.Elemen elemen video memungkinkan beberapa sumber. Sumber elemen dapat link ke file video yang berbeda.Browser akan menggunakan format diakui pertama:

Contoh ;<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg" /><source src="movie.mp4" type="video/mp4" /><source src="movie.webm" type="video/webm" />

Your browser does not support the video tag.</video>

All <video> Attributes

Attribute Value Descriptionaudio muted Mendefinisikan keadaan default audio. Saat ini, hanya "diredam" diperbolehkanautoplay autoplay Jika ada, maka video akan mulai bermain secepat itu siapcontrols controls Jika ada, kontrol akan ditampilkan, seperti tombol putarheight pixels Mengatur ketinggian video playerloop loop Jika ada, video akan mulai dari awal lagi, setiap kali selesaiposter url Menentukan URL gambar yang mewakili videopreload preload Jika ada, video akan dimuat pada beban halaman, dan siap untuk dijalankan.

Diabaikan jika "autoplay" hadirsrc url URL video untuk bermainwidth pixels Mengatur lebar dari video player

HTML5 Audio

HTML5 menyediakan standar untuk memutar audio.

Page 5: Apa itu HTML5

Audio di Web

Sampai saat ini, tidak pernah ada standar untuk memainkan audio di sebuah halaman web.Saat ini, sebagian besar audio diputar melalui sebuah plugin (seperti flash). Namun, tidak semua browsermemiliki plugin yang sama.HTML5 menetapkan cara standar untuk memasukkan audio, dengan unsur audio.Unsur audio bisa memutar file suara, atau stream audio.

Format audio

Saat ini, terdapat 3 format yang didukung untuk unsur audio:Format IE 9 Firefox 3.5 Opera 10,5 Chrome 3.0 Safari 3.0

Ogg Vorbis Tidak ada Ya Ya Ya Tidak adaMP3 Ya Tidak ada Tidak ada Ya YaWav Tidak ada Ya Ya Tidak ada Ya

Cara Bekerja

Untuk memutar file audio di HTML5, ini adalah semua yang Anda butuhkan:<audio src="song.ogg" controls="controls"></audio>

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume.Sisipkan konten antara <audio> dan </ audio> tag untuk browser yang tidak mendukung elemen audio:

Contoh<audio src="song.ogg" controls="controls">Your browser does not support the audio element.</audio>

Coba sendiri »Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome.Untuk membuat karya audio di Internet Explorer dan Safari, menambahkan file audio jenis MP3.Elemen elemen audio memungkinkan beberapa sumber. Sumber elemen dapat link ke file audio yang berbeda.Browser akan menggunakan format diakui pertama:

Contoh<audio controls="controls"><source src="song.ogg" type="audio/ogg" /><source src="song.mp3" type="audio/mpeg" />

Your browser does not support the audio element.</audio>

Coba sendiri »

<audio> Semua Atribut

Atribut Nilai Deskripsi

autoplay autoplayMenentukan bahwa audio tersebut akan mulai bermainsecepat itu siap.

kontrol kontrolMenetapkan bahwa kontrol akan ditampilkan, seperti tombolplay.

putaran putaranMenentukan bahwa audio akan mulai bermain lagi (looping)ketika mencapai akhir

preload preloadMenentukan bahwa audio akan dimuat pada beban halaman,dan siap untuk dijalankan. Diabaikan jika autoplay hadir.

src url Menentukan URL dari audio untuk bermain

Page 6: Apa itu HTML5

HTML5 kanvasUnsur kanvas digunakan untuk menggambar grafik di halaman web.

Apa itu kanvas?

Unsur kanvas HTML5 menggunakan JavaScript untuk menggambar grafik di halaman web.kanvas adalah area persegi, dan Anda mengontrol setiap pixel itu.Unsur kanvas memiliki beberapa metode untuk menggambar jalur, kotak, lingkaran, karakter, danmenambahkan gambar.

Membuat Elemen kanvas

Tambahkan elemen kanvas ke halaman HTML5.Tentukan id, lebar, dan tinggi dari elemen:<canvas id="myCanvas" width="200" height="100"></canvas>

Draw Dengan JavaScript

Unsur kanvas tidak memiliki kemampuan menggambar sendiri. Semua gambar harus dilakukan di dalamJavaScript:<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>

Coba sendiri »JavaScript menggunakan id untuk menemukan elemen kanvas:var c=document.getElementById("myCanvas");

Kemudian, membuat objek konteks:var cxt=c.getContext("2d");

The getContext ("2d") Objek adalah built-in HTML5 objek, dengan banyak metode untuk menggambar jalur,kotak, lingkaran, karakter, gambar dan banyak lagi.Dua baris berikutnya menarik persegi panjang merah:cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);

Metode fillStyle membuatnya merah, dan metode fillRect menentukan bentuk, posisi, dan ukuran.

Memahami Koordinat

Metode fillRect di atas memiliki parameter (0,0,150,75).Ini berarti: Gambarlah sebuah persegi 150x75 di kanvas, dimulai dari pojok kiri atas (0,0).Kanvas 'X dan Y koordinat digunakan untuk posisi gambar di kanvas.Mouse ke kotak di bawah ini untuk melihat koordinat:

X

Page 7: Apa itu HTML5

Y

Contoh kanvas Lebih

Di bawah ini adalah contoh-contoh gambar pada elemen kanvas:Contoh - LineMenarik garis dengan menentukan di mana untuk memulai, dan di mana untuk berhenti:

Coba sendiri »

Contoh - CircleMenggambar sebuah lingkaran dengan menentukan ukuran, warna, dan posisi:

Coba sendiri »

Contoh - GradientMenggambar gradien latar belakang dengan warna yang Anda tentukan:

Coba sendiri »

Contoh - GambarPasang gambar di kanvas:

Coba sendiri »

HTML5 Web Penyimpanan

«Sebelumnya Bab Berikutnya »

Page 8: Apa itu HTML5

Menyimpan Data Klien

HTML5 menawarkan dua objek baru untuk menyimpan data pada klien:

localStorage - menyimpan data tanpa batas waktu sessionStorage - menyimpan data untuk satu sesi

Sebelumnya, ini dilakukan dengan cookie. Cookies tidak cocok untuk data dalam jumlah besar, karena merekaditeruskan oleh SETIAP permintaan ke server, sehingga sangat lambat dan in-efektif.

Dalam HTML5, data TIDAK disampaikan oleh setiap permintaan server, tetapi digunakan HANYA ketikaditanya untuk. Adalah mungkin untuk menyimpan data dalam jumlah besar tanpa mempengaruhi kinerjawebsite.

Data disimpan di daerah yang berbeda untuk website yang berbeda, dan situs web hanya dapat mengakses datayang disimpan dengan sendirinya.

HTML5 menggunakan JavaScript untuk menyimpan dan mengakses data.

Objek localStorage

Menyimpan objek localStorage data tanpa batas waktu. Data akan tersedia pada hari berikutnya, minggu, atautahun.

Cara membuat dan mengakses sebuah localStorage:

Contoh

<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>

Coba sendiri »

Contoh berikut menghitung berapa kali pengguna telah mengunjungi halaman:

Contoh

<script type="text/javascript">if (localStorage.pagecount)

{localStorage.pagecount=Number(localStorage.pagecount) +1;}

else{localStorage.pagecount=1;}

document.write("Visits "+ localStorage.pagecount + " time(s).");</script>

Coba sendiri »

Page 9: Apa itu HTML5

Objek sessionStorage

Menyimpan objek sessionStorage data untuk satu sesi. Data dihapus ketika pengguna menutup jendela browser.

Cara membuat dan mengakses sebuah sessionStorage:

Contoh

<script type="text/javascript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);</script>

Coba sendiri »

Contoh berikut menghitung berapa kali pengguna telah mengunjungi halaman, dalam sesi saat ini:

Contoh

<script type="text/javascript">if (sessionStorage.pagecount)

{sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;}

else{sessionStorage.pagecount=1;}

document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");</script>

Coba sendiri »

«Sebelumnya

HTML5 Input Jenis

«Sebelumnya Bab Berikutnya »

HTML5 Input Jenis Baru

HTML5 memiliki tipe beberapa masukan baru untuk formulir. Fitur-fitur baru yang memungkinkan untukkontrol input yang lebih baik dan validasi.

Bab ini mencakup jenis input baru:

email

Page 10: Apa itu HTML5

url nomor jarak Tanggal pemetik (tanggal, bulan, minggu, waktu, datetime, datetime-lokal) pencarian warna

Dukungan Browser

Jenis input IE Firefox Opera Khrom Safari

email Tidak ada 4.0 9.0 10.0 Tidak ada

url Tidak ada 4.0 9.0 10.0 Tidak ada

nomor Tidak ada Tidak ada 9.0 7.0 Tidak ada

jarak Tidak ada Tidak ada 9.0 4.0 4.0

Tanggal pemetik Tidak ada Tidak ada 9.0 10.0 Tidak ada

pencarian Tidak ada 4.0 11.0 10.0 Tidak ada

warna Tidak ada Tidak ada 11.0 Tidak ada Tidak ada

Catatan: Opera memiliki dukungan terbaik untuk jenis masukan baru. Namun, Anda sudah bisa mulaimenggunakan mereka di semua browser utama. Jika mereka tidak didukung, mereka akan berperilaku sebagaibidang teks biasa.

Input Type - email

Jenis email digunakan untuk field input yang harus berisi alamat e-mail.

Nilai bidang email secara otomatis divalidasi ketika formulir dikirimkan.

Contoh

E-mail: <input type="email" name="user_email" />

Coba sendiri »

Tip: Safari pada iPhone mengakui jenis input email, dan mengubah layar keyboard pada pertandingan itu(menambahkan @ dan pilihan com.).

Input Type - url

Jenis url digunakan untuk field input yang seharusnya berisi alamat URL.

Nilai bidang url secara otomatis divalidasi ketika formulir dikirimkan.

Page 11: Apa itu HTML5

Contoh

Homepage: <input type="url" name="user_url" />

Coba sendiri »

Tip: Safari pada iPhone mengakui jenis input url, dan mengubah layar keyboard pada pertandingan itu(menambahkan opsi com.).

Input Type - jumlah

Jenis nomor digunakan untuk field input yang seharusnya berisi nilai numerik.

Anda juga dapat mengatur pembatasan apa nomor yang diterima:

Contoh

Points: <input type="number" name="points" min="1" max="10" />

Coba sendiri »

Gunakan atribut berikut ini untuk menentukan pembatasan untuk jenis nomor:

Atribut Nilai Deskripsi

max nomor Menentukan nilai maksimum yang diizinkan

min nomor Menentukan nilai minimum diperbolehkan

langkah nomorMenentukan interval nomor hukum (jika step = "3", angkahukum bisa -3,0,3,6, dll)

nilai nomor Menentukan nilai default

Coba contoh dengan semua pembatasan atribut: Coba sendiri

Tip: Safari pada iPhone mengakui jenis masukan nomor, dan mengubah layar keyboard pada pertandingan itu(menunjukkan angka).

Input Type - kisaran

Jenis rentang digunakan untuk field input yang harus mengandung nilai dari kisaran angka.

Jenis rentang ditampilkan sebagai slider bar.

Anda juga dapat mengatur pembatasan apa nomor yang diterima:

Contoh

<input type="range" name="points" min="1" max="10" />

Coba sendiri »

Page 12: Apa itu HTML5

Gunakan atribut berikut ini untuk menentukan pembatasan untuk jenis kisaran:

Atribut Nilai Deskripsi

max nomor Menentukan nilai maksimum yang diizinkan

min nomor Menentukan nilai minimum diperbolehkan

langkah nomorMenentukan interval nomor hukum (jika step = "3", angkahukum bisa -3,0,3,6, dll)

nilai nomor Menentukan nilai default

Input Type - Pengumpul Tanggal

HTML5 memiliki tipe beberapa masukan baru untuk memilih tanggal dan waktu:

tanggal - Memilih tanggal, bulan dan tahun bulan - Memilih bulan dan tahun minggu - Memilih minggu dan tahun waktu - waktu Memilih (jam dan menit) datetime - Memilih waktu, tanggal, bulan dan tahun (waktu UTC) datetime-lokal - Memilih waktu, tanggal, bulan dan tahun (waktu setempat)

Contoh berikut ini memungkinkan Anda untuk memilih tanggal dari kalender:

Contoh

Date: <input type="date" name="user_date" />

Coba sendiri »

Tipe Input "bulan": Coba sendiri

Tipe Input "minggu": Coba sendiri

Tipe Input "waktu": Coba sendiri

Input ketik "datetime": Coba sendiri

Input tipe "datetime-lokal": Coba sendiri

Input Type - search

Jenis pencarian digunakan untuk bidang pencarian, seperti pencarian situs, atau pencarian Google.

Kolom pencarian berperilaku seperti field teks biasa.

Input Type - warna

Jenis warna yang digunakan untuk field input yang harus mengandung warna.

Page 13: Apa itu HTML5

Jenis input akan memungkinkan Anda untuk memilih warna dari color picker:

Contoh

Color: <input type="color" name="user_color" />

Coba sendiri »

«Sebelumnya

HTML5 Input Types

« Previous Next Chapter »

HTML5 New Input Types

HTML5 has several new input types for forms. These new features allow for better input control and validation.

This chapter covers the new input types:

email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color

Browser Support

Input type IE Firefox Opera Chrome Safari

email No 4.0 9.0 10.0 No

url No 4.0 9.0 10.0 No

number No No 9.0 7.0 No

range No No 9.0 4.0 4.0

Date pickers No No 9.0 10.0 No

search No 4.0 11.0 10.0 No

color No No 11.0 No No

Note: Opera has the best support for the new input types. However, you can already start using them in allmajor browsers. If they are not supported, they will behave as regular text fields.

Input Type - email

The email type is used for input fields that should contain an e-mail address.

The value of the email field is automatically validated when the form is submitted.

Page 14: Apa itu HTML5

Example

E-mail: <input type="email" name="user_email" />

Try it yourself »

Tip: Safari on the iPhone recognizes the email input type, and changes the on-screen keyboard to match it(adds @ and .com options).

Input Type - url

The url type is used for input fields that should contain a URL address.

The value of the url field is automatically validated when the form is submitted.

Example

Homepage: <input type="url" name="user_url" />

Try it yourself »

Tip: Safari on the iPhone recognizes the url input type, and changes the on-screen keyboard to match it (adds.com option).

Input Type - number

The number type is used for input fields that should contain a numeric value.

You can also set restrictions on what numbers are accepted:

Example

Points: <input type="number" name="points" min="1" max="10" />

Try it yourself »

Use the following attributes to specify restrictions for the number type:

Attribute Value Description

max number Specifies the maximum value allowed

min number Specifies the minimum value allowed

step numberSpecifies legal number intervals (if step="3", legal numberscould be -3,0,3,6, etc)

value number Specifies the default value

Try an example with all the restriction attributes: Try it yourself

Tip: Safari on the iPhone recognizes the number input type, and changes the on-screen keyboard to match it(shows numbers).

Page 15: Apa itu HTML5

Input Type - range

The range type is used for input fields that should contain a value from a range of numbers.

The range type is displayed as a slider bar.

You can also set restrictions on what numbers are accepted:

Example

<input type="range" name="points" min="1" max="10" />

Try it yourself »

Use the following attributes to specify restrictions for the range type:

Attribute Value Description

max number Specifies the maximum value allowed

min number Specifies the minimum value allowed

step numberSpecifies legal number intervals (if step="3", legal numberscould be -3,0,3,6, etc)

value number Specifies the default value

Input Type - Date Pickers

HTML5 has several new input types for selecting date and time:

date - Selects date, month and year month - Selects month and year week - Selects week and year time - Selects time (hour and minute) datetime - Selects time, date, month and year (UTC time) datetime-local - Selects time, date, month and year (local time)

The following example allows you to select a date from a calendar:

Example

Date: <input type="date" name="user_date" />

Try it yourself »

Input type "month": Try it yourself

Input type "week": Try it yourself

Input type "time": Try it yourself

Input type "datetime": Try it yourself

Page 16: Apa itu HTML5

Input type "datetime-local": Try it yourself

Input Type - search

The search type is used for search fields, like a site search, or Google search.

The search field behaves like a regular text field.

Input Type - color

The color type is used for input fields that should contain a color.

This input type will allow you to select a color from a color picker:

Example

Color: <input type="color" name="user_color" />

Try it yourself »

« Previous

HTML5 Form Elements

« Previous Next Chapter »

HTML5 New Form Elements

HTML5 has several new elements and attributes for forms.

This chapter covers the new form elements:

datalist keygen output

Browser Support

Attribute IE Firefox Opera Chrome Safaridatalist No 4.0 9.5 No No

keygen No 4.0 10.5 3.0 No

output No No 9.5 10.0 No

Page 17: Apa itu HTML5

datalist Element

The datalist element specifies a list of options for an input field.

The list is created with option elements inside the datalist.

To bind a datalist to an input field, let the list attribute of the input field refer to the id of the datalist:

Example

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3Schools" value="http://www.w3schools.com" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist>

Try it yourself »

Tip: The option elements should always have a value attribute.

keygen Element

The purpose of the keygen element is to provide a secure way to authenticate users.

The keygen element is a key-pair generator. When a form is submitted, two keys are generated, one private andone public.

The private key is stored on the client, and the public key is sent to the server. The public key could be used togenerate a client certificate to authenticate the user in the future.

Currently, the browser support for this element is not good enough to be a useful security standard.

Example

<form action="demo_form.asp" method="get">Username: <input type="text" name="usr_name" />Encryption: <keygen name="security" /><input type="submit" /></form>

Try it yourself »

output Element

The output element is used for different types of output, like calculations or script output:

Example

Page 18: Apa itu HTML5

<output id="result" onforminput="resCalc()"></output>

Try it yourself »

« Previous

HTML5 Form Elements« Previous Next Chapter »

HTML5 New Form Elements

HTML5 has several new elements and attributes for forms.

This chapter covers the new form elements:

datalist keygen output

Browser Support

Attribute IE Firefox Opera Chrome Safari

datalist No 4.0 9.5 No No

keygen No 4.0 10.5 3.0 No

output No No 9.5 10.0 No

datalist Element

The datalist element specifies a list of options for an input field.

The list is created with option elements inside the datalist.

To bind a datalist to an input field, let the list attribute of the input field refer to the id of the datalist:

Example

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3Schools" value="http://www.w3schools.com" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist>

Try it yourself »

Tip: The option elements should always have a value attribute.

Page 19: Apa itu HTML5

keygen Element

The purpose of the keygen element is to provide a secure way to authenticate users.

The keygen element is a key-pair generator. When a form is submitted, two keys are generated, one private andone public.

The private key is stored on the client, and the public key is sent to the server. The public key could be used togenerate a client certificate to authenticate the user in the future.

Currently, the browser support for this element is not good enough to be a useful security standard.

Example

<form action="demo_form.asp" method="get">Username: <input type="text" name="usr_name" />Encryption: <keygen name="security" /><input type="submit" /></form>

Try it yourself »

output Element

The output element is used for different types of output, like calculations or script output:

Example

<output id="result" onforminput="resCalc()"></output>

Try it yourself »

« Previous

HTML5 Form Attributes« Previous Next Chapter »

HTML5 New Form Attributes

This chapter covers some of the new attributes for <form> and <input>.

New form attributes:

autocomplete novalidate

Page 20: Apa itu HTML5

New input attributes:

autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height and width list min, max and step multiple pattern (regexp) placeholder required

Browser Support

Attribute IE Firefox Opera Chrome Safari

autocomplete 8.0 3.5 9.5 3.0 4.0

autofocus No 4.0 10.0 3.0 4.0

form No 4.0 9.5 10.0 No

form overrides No 4.0 10.5 10.0 No

height and width 8.0 3.5 9.5 3.0 4.0

list No 4.0 9.5 No No

min, max and step No No 9.5 3.0 No

multiple No 3.5 11.0 3.0 4.0

novalidate No 4.0 11.0 10.0 No

pattern No 4.0 9.5 3.0 No

placeholder No 4.0 11.0 3.0 3.0

required No 4.0 9.5 3.0 No

autocomplete Attribute

The autocomplete attribute specifies that the form or input field should have an autocomplete function.

Note: The autocomplete attribute works with <form>, and the following <input> types: text, search, url,telephone, email, password, datepickers, range, and color.

When the user starts to type in an autocomplete field, the browser should display options to fill in the field:

Example

<form action="demo_form.asp" method="get" autocomplete="on">First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br />E-mail: <input type="email" name="email" autocomplete="off" /><br /><input type="submit" /></form>

Try it yourself »

Page 21: Apa itu HTML5

Note: In some browsers you may need to activate the autocomplete function for this to work.

autofocus Attribute

The autofocus attribute specifies that a field should automatically get focus when a page is loaded.

Note: The autofocus attribute works with all <input> types.

Example

User name: <input type="text" name="user_name" autofocus="autofocus" />

Try it yourself »

form Attribute

The form attribute specifies one or more forms the input field belongs to.

Note: The form attribute works with all <input> types.

The form attribute must refer to the id of the form it belongs to:

Example

<form action="demo_form.asp" method="get" id="user_form">First name:<input type="text" name="fname" /><input type="submit" /></form>Last name: <input type="text" name="lname" form="user_form" />

Try it yourself »

Note: To refer to more than one form, use a space-separated list.

Form Override Attributes

The form override attributes allow you to override some of the attributes set for the form element.

The form override attributes are:

formaction - Overrides the form action attribute formenctype - Overrides the form enctype attribute formmethod - Overrides the form method attribute formnovalidate - Overrides the form novalidate attribute formtarget - Overrides the form target attribute

Note: The form override attributes works with the following <input> types: submit and image.

Page 22: Apa itu HTML5

Example

<form action="demo_form.asp" method="get" id="user_form">E-mail: <input type="email" name="userid" /><br /><input type="submit" value="Submit" /><br /><input type="submit" formaction="demo_admin.asp" value="Submit as admin" /><br /><input type="submit" formnovalidate="true"value="Submit without validation" /><br /></form>

Try it yourself »

Note: These attributes are helpful for creating different submit buttons.

height and width Attributes

The height and width attributes specifies the height and width of the image used for the input type image.

Note: The height and width attributes only works with <input> type: image.

Example

<input type="image" src="img_submit.gif" width="24" height="24" />

Try it yourself »

list Attribute

The list attribute specifies a datalist for an input field. A datalist is a list of options for an input field.

Note: The list attribute works with the following <input> types: text, search, url, telephone, email, date pickers,number, range, and color.

Example

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3Schools" value="http://www.w3schools.com" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist>

Try it yourself »

Page 23: Apa itu HTML5

min, max and step Attributes

The min, max and step attributes are used to specify restrictions for input types containing numbers or dates.

The max attribute specifies the maximum value allowed for the input field.

The min attribute specifies the minimum value allowed for the input field.

The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers could be -3,0,3,6, etc).

Note: The min, max, and step attributes works with the following <input> types: date pickers, number, andrange.

The example below shows a numeric field that accepts values between 0 and 10, with a step of 3 (legal numbersare 0, 3, 6 and 9):

Example

Points: <input type="number" name="points" min="0" max="10" step="3" />

Try it yourself »

multiple Attribute

The multiple attribute specifies that multiple values can be selected for an input field.

Note: The multiple attribute works with the following <input> types: email, and file.

Example

Select images: <input type="file" name="img" multiple="multiple" />

Try it yourself »

novalidate Attribute

The novalidate attribute specifies that the form or input field should not be validated when submitted.

If this attribute is present the form will not validate form input.

Note: The novalidate attribute works with: <form> and the following <input> types: text, search, url, telephone,email, password, date pickers, range, and color.

Example

<form action="demo_form.asp" novalidate="novalidate">E-mail: <input type="email" name="user_email" /><input type="submit" />

Page 24: Apa itu HTML5

</form>

Try it yourself »

pattern Attribute

The pattern attribute specifies a pattern used to validate an input field.

The pattern is a regular expression. You can read about this in our JavaScript tutorial.

Note: The pattern attribute works with the following <input> types: text, search, url, telephone, email, andpassword

The example below shows a text field that can only contain three letters (no numbers or special characters):

Example

Country code: <input type="text" name="country_code"pattern="[A-z]{3}" title="Three letter country code" />

Try it yourself »

placeholder Attribute

The placeholder attribute provides a hint that describes the expected value of an input field.

Note: The placeholder attribute works with the following <input> types: text, search, url, telephone, email, andpassword

The hint is displayed in the input field when it is empty, and disappears when the field gets focus:

Example

<input type="search" name="user_search" placeholder="Search W3Schools" />

Try it yourself »

required Attribute

The required attribute specifies that an input field must be filled out before submitting.

Note: The required attribute works with the following <input> types: text, search, url, telephone, email,password, date pickers, number, checkbox, radio, and file.

Example

Name: <input type="text" name="usr_name" required="required" />

Page 25: Apa itu HTML5

Try it yourself »

« Previous

HTML5 Form Attributes

« Previous Next Chapter »

HTML5 New Form Attributes

This chapter covers some of the new attributes for <form> and <input>.

New form attributes:

autocomplete novalidate

New input attributes:

autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height and width list min, max and step multiple pattern (regexp) placeholder required

Browser Support

Attribute IE Firefox Opera Chrome Safari

autocomplete 8.0 3.5 9.5 3.0 4.0

autofocus No 4.0 10.0 3.0 4.0

form No 4.0 9.5 10.0 No

form overrides No 4.0 10.5 10.0 No

height and width 8.0 3.5 9.5 3.0 4.0

list No 4.0 9.5 No No

min, max and step No No 9.5 3.0 No

multiple No 3.5 11.0 3.0 4.0

novalidate No 4.0 11.0 10.0 No

pattern No 4.0 9.5 3.0 No

placeholder No 4.0 11.0 3.0 3.0

required No 4.0 9.5 3.0 No

Page 26: Apa itu HTML5

autocomplete Attribute

The autocomplete attribute specifies that the form or input field should have an autocomplete function.

Note: The autocomplete attribute works with <form>, and the following <input> types: text, search, url,telephone, email, password, datepickers, range, and color.

When the user starts to type in an autocomplete field, the browser should display options to fill in the field:

Example

<form action="demo_form.asp" method="get" autocomplete="on">First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br />E-mail: <input type="email" name="email" autocomplete="off" /><br /><input type="submit" /></form>

Try it yourself »

Note: In some browsers you may need to activate the autocomplete function for this to work.

autofocus Attribute

The autofocus attribute specifies that a field should automatically get focus when a page is loaded.

Note: The autofocus attribute works with all <input> types.

Example

User name: <input type="text" name="user_name" autofocus="autofocus" />

Try it yourself »

form Attribute

The form attribute specifies one or more forms the input field belongs to.

Note: The form attribute works with all <input> types.

The form attribute must refer to the id of the form it belongs to:

Example

<form action="demo_form.asp" method="get" id="user_form">First name:<input type="text" name="fname" /><input type="submit" /></form>Last name: <input type="text" name="lname" form="user_form" />

Page 27: Apa itu HTML5

Try it yourself »

Note: To refer to more than one form, use a space-separated list.

Form Override Attributes

The form override attributes allow you to override some of the attributes set for the form element.

The form override attributes are:

formaction - Overrides the form action attribute formenctype - Overrides the form enctype attribute formmethod - Overrides the form method attribute formnovalidate - Overrides the form novalidate attribute formtarget - Overrides the form target attribute

Note: The form override attributes works with the following <input> types: submit and image.

Example

<form action="demo_form.asp" method="get" id="user_form">E-mail: <input type="email" name="userid" /><br /><input type="submit" value="Submit" /><br /><input type="submit" formaction="demo_admin.asp" value="Submit as admin" /><br /><input type="submit" formnovalidate="true"value="Submit without validation" /><br /></form>

Try it yourself »

Note: These attributes are helpful for creating different submit buttons.

height and width Attributes

The height and width attributes specifies the height and width of the image used for the input type image.

Note: The height and width attributes only works with <input> type: image.

Example

<input type="image" src="img_submit.gif" width="24" height="24" />

Try it yourself »

Page 28: Apa itu HTML5

list Attribute

The list attribute specifies a datalist for an input field. A datalist is a list of options for an input field.

Note: The list attribute works with the following <input> types: text, search, url, telephone, email, date pickers,number, range, and color.

Example

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3Schools" value="http://www.w3schools.com" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist>

Try it yourself »

min, max and step Attributes

The min, max and step attributes are used to specify restrictions for input types containing numbers or dates.

The max attribute specifies the maximum value allowed for the input field.

The min attribute specifies the minimum value allowed for the input field.

The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers could be -3,0,3,6, etc).

Note: The min, max, and step attributes works with the following <input> types: date pickers, number, andrange.

The example below shows a numeric field that accepts values between 0 and 10, with a step of 3 (legal numbersare 0, 3, 6 and 9):

Example

Points: <input type="number" name="points" min="0" max="10" step="3" />

Try it yourself »

multiple Attribute

The multiple attribute specifies that multiple values can be selected for an input field.

Note: The multiple attribute works with the following <input> types: email, and file.

Example

Page 29: Apa itu HTML5

Select images: <input type="file" name="img" multiple="multiple" />

Try it yourself »

novalidate Attribute

The novalidate attribute specifies that the form or input field should not be validated when submitted.

If this attribute is present the form will not validate form input.

Note: The novalidate attribute works with: <form> and the following <input> types: text, search, url, telephone,email, password, date pickers, range, and color.

Example

<form action="demo_form.asp" novalidate="novalidate">E-mail: <input type="email" name="user_email" /><input type="submit" /></form>

Try it yourself »

pattern Attribute

The pattern attribute specifies a pattern used to validate an input field.

The pattern is a regular expression. You can read about this in our JavaScript tutorial.

Note: The pattern attribute works with the following <input> types: text, search, url, telephone, email, andpassword

The example below shows a text field that can only contain three letters (no numbers or special characters):

Example

Country code: <input type="text" name="country_code"pattern="[A-z]{3}" title="Three letter country code" />

Try it yourself »

placeholder Attribute

The placeholder attribute provides a hint that describes the expected value of an input field.

Note: The placeholder attribute works with the following <input> types: text, search, url, telephone, email, andpassword

The hint is displayed in the input field when it is empty, and disappears when the field gets focus:

Page 30: Apa itu HTML5

Example

<input type="search" name="user_search" placeholder="Search W3Schools" />

Try it yourself »

required Attribute

The required attribute specifies that an input field must be filled out before submitting.

Note: The required attribute works with the following <input> types: text, search, url, telephone, email,password, date pickers, number, checkbox, radio, and file.

Example

Name: <input type="text" name="usr_name" required="required" />

Try it yourself »

« Previous

HTML5 Tag Reference

« Previous Next Reference »

HTML5

HTML5 improves interoperability and reduces development costs by making precise rules on how to handle allHTML elements, and how to recover from errors.

Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side datastorage, and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and<figure>.

The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and manyhundreds of other vendors.

Note: HTML5 is not a W3C recommendation yet!

To read about the HTML5 activities at W3C, please read our W3C tutorial.

Ordered Alphabetically

New : New tags in HTML5.

Tag Description

Page 31: Apa itu HTML5

<!--...--> Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation

<acronym> Not supported in HTML5.

<address> Defines an address element

<applet> Not supported in HTML5.

<area> Defines an area inside an image map

<article>New Defines an article

<aside>New Defines content aside from the page content

<audio>New Defines sound content

<b> Defines bold text

<base> Defines a base URL for all the links in a page

<basefont> Not supported in HTML5.

<bdo> Defines the direction of text display

<big> Not supported in HTML5.

<blockquote> Defines a long quotation

<body> Defines the body element

<br> Inserts a single line break

<button> Defines a push button

<canvas>New Defines graphics

<caption> Defines a table caption

<center> Not supported in HTML5.

<cite> Defines a citation

<code> Defines computer code text

<col> Defines attributes for table columns

<colgroup> Defines groups of table columns

<command>New Defines a command button

<datalist>New Defines a dropdown list

<dd> Defines a definition description

<del> Defines deleted text

<details>New Defines details of an element

<dfn> Defines a definition term

<dir> Not supported in HTML5.

<div> Defines a section in a document

<dl> Defines a definition list

<dt> Defines a definition term

<em> Defines emphasized text

<embed>New Defines external interactive content or plugin

<fieldset> Defines a fieldset

<figcaption>New Defines the caption of a figure element

<figure>New Defines a group of media content, and their caption

<font> Not supported in HTML5.

<footer>New Defines a footer for a section or page

<form> Defines a form

<frame> Not supported in HTML5.

<frameset> Not supported in HTML5.

<h1> to <h6> Defines header 1 to header 6

<head> Defines information about the document

<header>New Defines a header for a section or page

<hgroup>New Defines information about a section in a document

Page 32: Apa itu HTML5

<hr> Defines a horizontal rule

<html> Defines an html document

<i> Defines italic text

<iframe> Defines an inline sub window (frame)

<img> Defines an image

<input> Defines an input field

<ins> Defines inserted text

<keygen>New Defines a generated key in a form

<kbd> Defines keyboard text

<label> Defines a label for a form control

<legend> Defines a title in a fieldset

<li> Defines a list item

<link> Defines a resource reference

<map> Defines an image map

<mark>New Defines marked text

<menu> Defines a menu list

<meta> Defines meta information

<meter>New Defines measurement within a predefined range

<nav>New Defines navigation links

<noframes> Not supported in HTML5.

<noscript> Defines a noscript section

<object> Defines an embedded object

<ol> Defines an ordered list

<optgroup> Defines an option group

<option> Defines an option in a drop-down list

<output>New Defines some types of output

<p> Defines a paragraph

<param> Defines a parameter for an object

<pre> Defines preformatted text

<progress>New Defines progress of a task of any kind

<q> Defines a short quotation

<rp>NewUsed in ruby annotations to define what to show browsers that to not support the rubyelement.

<rt>New Defines explanation to ruby annotations.

<ruby>New Defines ruby annotations

<s> Defines text that is no longer correct

<samp> Defines sample computer code

<script> Defines a script

<section>New Defines a section

<select> Defines a selectable list

<small> Defines small text

<source>New Defines media resources

<span> Defines a section in a document

<strike> Not supported in HTML5.

<strong> Defines strong text

<style> Defines a style definition

<sub> Defines subscripted text

<summary>New Defines the header of a "detail" element

<sup> Defines superscripted text

<table> Defines a table

<tbody> Defines a table body

Page 33: Apa itu HTML5

<td> Defines a table cell

<textarea> Defines a text area

<tfoot> Defines a table footer

<th> Defines a table header

<thead> Defines a table header

<time>New Defines a date/time

<title> Defines the document title

<tr> Defines a table row

<tt> Not supported in HTML5.

<u> Not supported in HTML5.

<ul> Defines an unordered list

<var> Defines a variable

<video>New Defines a video

<wbr>New Defines a possible line-break

<xmp> Not supported in HTML5.

« Previous Next Reference »

HTML5 Tag Referensi«Sebelumnya Referensi Berikutnya »

HTML5

HTML5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yangtepat tentang bagaimana untuk menangani semua elemen HTML, dan bagaimana memulihkan dari kesalahan.

Beberapa fitur baru dalam HTML5 adalah fungsi untuk audio embedding, video, grafik, klien-sisi penyimpanandata, dan dokumen interaktif. HTML5 juga mengandung unsur-unsur baru seperti <nav>,, <header> <footer>,dan <figure>.

Kelompok HTML5 kerja termasuk AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, dan ratusanvendor lainnya.

Catatan: HTML5 bukan rekomendasi W3C yet!

Untuk membaca tentang kegiatan HTML5 di W3C, silahkan baca tutorial W3C .

Memerintahkan abjad

Baru : Baru tag di HTML5.

Tag Deskripsi

<!--...--> Mendefinisikan komentar

<! DOCTYPE> Mendefinisikan jenis dokumen

<a> Mendefinisikan hyperlink

<abbr> Mendefinisikan singkatan

<acronym> Tidak didukung di HTML5.

<address> Mendefinisikan elemen alamat

Page 34: Apa itu HTML5

<applet> Tidak didukung di HTML5.

<area> Mendefinisikan area dalam peta gambar

<article> Baru Mendefinisikan artikel

<aside> Baru Mendefinisikan konten selain dari konten halaman

<audio> Baru Mendefinisikan isi suara

<b> Mendefinisikan teks tebal

<base> Mendefinisikan URL dasar untuk semua link dalam halaman

<basefont> Tidak didukung di HTML5.

<bdo> Mendefinisikan arah tampilan teks

<big> Tidak didukung di HTML5.

<blockquote> Mendefinisikan sebuah kutipan panjang

<body> Mendefinisikan elemen body

<br> Menyisipkan break satu baris

<button> Mendefinisikan tombol push

<canvas> Baru Mendefinisikan grafis

<caption> Mendefinisikan sebuah judul tabel

<center> Tidak didukung di HTML5.

<cite> Mendefinisikan kutipan

<code> Mendefinisikan kode teks komputer

<col> Mendefinisikan atribut untuk kolom tabel

<colgroup> Mendefinisikan kelompok kolom tabel

<command> Baru Mendefinisikan tombol perintah

<datalist> Baru Mendefinisikan sebuah daftar dropdown

<dd> Mendefinisikan sebuah deskripsi definisi

<del> Mendefinisikan teks yang dihapus

<details> Baru Mendefinisikan elemen rincian

<dfn> Mendefinisikan sebuah istilah definisi

<dir> Tidak didukung di HTML5.

<div> Mendefinisikan sebuah bagian dalam dokumen

<dl> Mendefinisikan sebuah daftar definisi

<dt> Mendefinisikan sebuah istilah definisi

<em> Mendefinisikan teks menekankan

<embed> Baru Mendefinisikan konten interaktif eksternal atau plugin

<fieldset> Mendefinisikan sebuah fieldset

<figcaption> Baru Mendefinisikan judul dari unsur tokoh

<figure> Baru Mendefinisikan sekelompok konten media, dan keterangan mereka

<FONT> Tidak didukung di HTML5.

<footer> Baru Mendefinisikan sebuah footer untuk bagian atau halaman

<form> Mendefinisikan bentuk

<frame> Tidak didukung di HTML5.

<frameset> Tidak didukung di HTML5.

<h1> untuk <h6> Mendefinisikan header 1 ke header 6

<head> Mendefinisikan informasi tentang dokumen

<header> Baru Mendefinisikan sebuah header untuk bagian atau halaman

<hgroup> Baru Mendefinisikan informasi tentang sebuah bagian dalam dokumen

<hr> Mendefinisikan aturan horisontal

<html> Mendefinisikan dokumen html

<i> Mendefinisikan teks miring

<iframe> Mendefinisikan suatu inline sub window (frame)

<img> Mendefinisikan gambar

<input> Mendefinisikan sebuah field input

Page 35: Apa itu HTML5

<ins> Mendefinisikan teks yang disisipkan

<keygen> Baru Mendefinisikan sebuah kunci yang dihasilkan dalam bentuk suatu

<kbd> Mendefinisikan teks keyboard

<label> Mendefinisikan label untuk kontrol form

<legend> Mendefinisikan sebuah judul di sebuah fieldset

<li> Mendefinisikan item daftar

<link> Mendefinisikan referensi sumber daya

<map> Mendefinisikan peta gambar

<mark> Baru Mendefinisikan teks ditandai

<menu> Mendefinisikan daftar menu

<META> Mendefinisikan informasi meta

<meter> Baru Mendefinisikan pengukuran dalam rentang yang telah ditentukan

<nav> Baru Mendefinisikan navigasi link

<noframes> Tidak didukung di HTML5.

<noscript> Mendefinisikan sebuah bagian noscript

<object> Mendefinisikan sebuah objek tertanam

<ol> Mendefinisikan ordered list

<optgroup> Mendefinisikan grup pilihan

<option> Mendefinisikan pilihan dalam daftar drop-down

<output> Baru Mendefinisikan beberapa jenis output

<p> Mendefinisikan paragraf

<param> Mendefinisikan parameter untuk objek

<pre> Mendefinisikan teks terformat

<progress> Baru Mendefinisikan kemajuan tugas apapun

<q> Mendefinisikan kutipan pendek

<rp> BaruDigunakan dalam anotasi ruby untuk menentukan apa yang harus menunjukkan browseryang tidak mendukung elemen ruby.

<rt> Baru Mendefinisikan penjelasan untuk ruby penjelasan.

<ruby> Baru Mendefinisikan ruby penjelasan

<s> Mendefinisikan teks yang tidak lagi benar

<samp> Mendefinisikan sampel kode komputer

<script> Mendefinisikan script

<section> Baru Mendefinisikan bagian

<select> Mendefinisikan daftar dipilih

<small> Mendefinisikan teks kecil

<source> Baru Mendefinisikan sumber daya media

<span> Mendefinisikan sebuah bagian dalam dokumen

<strike> Tidak didukung di HTML5.

<strong> Mendefinisikan teks yang kuat

<style> Mendefinisikan suatu definisi gaya

<sub> Mendefinisikan teks subscript

<summary> Baru Mendefinisikan header dari unsur "detail"

<sup> Mendefinisikan teks superscripted

<table> Mendefinisikan tabel

<tbody> Mendefinisikan sebuah badan tabel

<td> Mendefinisikan sebuah sel tabel

<textarea> Mendefinisikan sebuah area teks

<tfoot> Mendefinisikan sebuah footer tabel

<th> Mendefinisikan sebuah header tabel

<thead> Mendefinisikan sebuah header tabel

<time> Baru Mendefinisikan sebuah tanggal / waktu

Page 36: Apa itu HTML5

<title> Mendefinisikan judul dokumen

<tr> Mendefinisikan sebuah baris tabel

<tt> Tidak didukung di HTML5.

<u> Tidak didukung di HTML5.

<ul> Mendefinisikan unordered list

<var> Mendefinisikan variabel

<video> Baru Mendefinisikan video

<wbr> Baru Mendefinisikan sebuah line break-kemungkinan

<xmp> Tidak didukung di HTML5.

«Sebelumnya

HTML5 Global Attributes

« Previous Next Reference »

The attributes listed below are supported by all HTML 5 tags, with a few exceptions.

HTML5 Global Attributes

New : New global attributes in HTML5.

Attribute Value Description

accesskey character Specifies a keyboard shortcut to access an element

class classname Specifies a classname for an element (used for stylesheets)

contenteditableNewtruefalse

Specifies if the user is allowed to edit the content or not

contextmenuNew menu_id Specifies the context menu for an element

dirltrrtl

Specifies the text direction for the content in an element

draggableNewtruefalseauto

Specifies whether or not a user is allowed to drag an element

dropzoneNewcopymovelink

Specifies what happens when dragged items/data is dropped in theelement

hiddenNew hiddenSpecifies that the element is not relevant. Hidden elements are notdisplayed

id id Specifies a unique id for an element

lang language_code Specifies a language code for the content in an element

spellcheckNewtruefalse

Specifies if the element must have its spelling and grammar checked

style style_definitionSpecifies an inline style for an element

tabindex number Specifies the tab order of an element

title text Specifies extra information about an element

« Previous

Page 37: Apa itu HTML5

HTML5 Global Atribut«Sebelumnya Referensi Berikutnya »

Atribut tercantum di bawah ini didukung oleh semua 5 tag HTML, dengan beberapa pengecualian.

HTML5 Global Atribut

Baru : global atribut Baru di HTML5.

Atribut Nilai Deskripsi

accesskey karakter Menentukan cara pintas keyboard untuk mengakses suatu elemen

kelas classnameClassname untuk menetapkan suatu elemen (digunakan untukstylesheet)

contenteditable Barubenarpalsu

Menentukan jika pengguna diijinkan untuk mengedit isi atau tidak

ContextMenu Baru menu_id Menentukan menu konteks untuk suatu elemen

dirltrrtl

Menentukan arah teks untuk konten dalam suatu elemen

draggable Barubenarpalsumobil

Menentukan apakah pengguna diperkenankan untuk menyeret elemen

dropzone Barusalinanbergeraklink

Menentukan apa yang terjadi saat ditarik item / data akan diputus dalamelemen

tersembunyi Baru tersembunyiMenetapkan bahwa unsur tersebut tidak relevan. Tersembunyi elementidak ditampilkan

id id Menentukan sebuah id unik untuk elemen

lang language_code Menentukan kode bahasa untuk isi dalam suatu elemen

periksaejaan Barubenarpalsu

Menentukan jika elemen harus memiliki ejaan dan tata bahasa diperiksa

gaya style_definitionMenentukan gaya inline untuk elemen

tabindex nomor Menentukan urutan tab elemen

judul teks Menentukan tambahan informasi tentang elemen

«Sebelumnya Referensi Berikutnya »

HTML5 Event Attributes« Previous Next Reference »

Global Event Attributes

HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clickson an element.

To learn more about programming events, please visit our JavaScript tutorial and our DHTML tutorial.

Page 38: Apa itu HTML5

Below are the global event attributes that can be inserted into HTML5 elements to define event actions.

New : New event attributes in HTML5.

Window Event Attributes

Events triggered for the window object.

Applies to the <body> tag:

Attribute Value Description

onafterprintNew script Script to be run after the document is printed

onbeforeprintNew script Script to be run before the document is printed

onbeforeonloadNew script Script to be run before the document loads

onblur script Script to be run when the window loses focus

onerrorNew script Script to be run when an error occur

onfocus script Script to be run when the window gets focus

onhaschangeNew script Script to be run when the document has change

onload script Script to be run when the document loads

onmessageNew script Script to be run when the message is triggered

onofflineNew script Script to be run when the document goes offline

ononlineNew script Script to be run when the document comes online

onpagehideNew script Script to be run when the window is hidden

onpageshowNew script Script to be run when the window becomes visible

onpopstateNew script Script to be run when the window's history changes

onredoNew script Script to be run when the document performs a redo

onresizeNew script Script to be run when the window is resized

onstorageNew script Script to be run when a document loads

onundoNew script Script to be run when a document performs an undo

onunloadNew script Script to be run when the user leaves the document

Form Events

Events triggered by actions inside a HTML form.

Applies to all HTML5 elements, but is most common in form elements:

Attribute Value Descriptiononblur script Script to be run when an element loses focus

onchange script Script to be run when an element changes

oncontextmenuNew script Script to be run when a context menu is triggered

onfocus script Script to be run when an element gets focus

onformchangeNew script Script to be run when a form changes

onforminputNew script Script to be run when a form gets user input

oninputNew script Script to be run when an element gets user input

oninvalidNew script Script to be run when an element is invalid

onreset scriptScript to be run when a form is resetNot supported in HTML5

Page 39: Apa itu HTML5

onselect script Script to be run when an element is selected

onsubmit script Script to be run when a form is submitted

Keyboard Events

Events triggered by a keyboard.

Applies to all HTML5 elements.

Attribute Value Description

onkeydown script Script to be run when a key is pressed

onkeypress script Script to be run when a key is pressed and released

onkeyup script Script to be run when a key is released

Mouse Events

Events triggered by a mouse, or similar user actions:

Applies to all HTML5 elements.

Attribute Value Description

onclick script Script to be run on a mouse click

ondblclick script Script to be run on a mouse double-click

ondragNew script Script to be run when an element is dragged

ondragendNew script Script to be run at the end of a drag operation

ondragenterNew script Script to be run when an element has been dragged to a valid drop target

ondragleaveNew script Script to be run when an element leaves a valid drop target

ondragoverNew script Script to be run when an element is being dragged over a valid drop target

ondragstartNew script Script to be run at the start of a drag operation

ondropNew script Script to be run when dragged element is being dropped

onmousedown script Script to be run when a mouse button is pressed

onmousemove script Script to be run when the mouse pointer moves

onmouseout script Script to be run when the mouse pointer moves out of an element

onmouseover script Script to be run when the mouse pointer moves over an element

onmouseup script Script to be run when a mouse button is released

onmousewheelNew script Script to be run when the mouse wheel is being rotated

onscrollNew script Script to be run when an element's scrollbar is being scrolled

Media Events

Events triggered by medias like videos, images and audio.

Applies to all HTML5 elements, but is most common in media elements, such as audio, embed, img, object,and video:

Attribute Value Description

Page 40: Apa itu HTML5

onabort script Script to be run on an abort event

oncanplayNew script Script to be run when media can start play, but might has to stop for buffering

oncanplaythroughNew scriptScript to be run when media can be played to the end, without stopping forbuffering

ondurationchangeNew script Script to be run when the length of the media is changed

onemptiedNew scriptScript to be run when a media resource element suddenly becomes empty(network errors, errors on load etc.)

onendedNew script Script to be run when media has reach the end

onerrorNew script Script to be run when an error occurs during the loading of an element

onloadeddataNew script Script to be run when media data is loaded

onloadedmetadataNew scriptScript to be run when the duration and other media data of a media element isloaded

onloadstartNew script Script to be run when the browser starts to load the media data

onpauseNew script Script to be run when media data is paused

onplayNew script Script to be run when media data is going to start playing

onplayingNew script Script to be run when media data has start playing

onprogressNew script Script to be run when the browser is fetching the media data

onratechangeNew script Script to be run when the media data's playing rate has changed

onreadystatechangeNew script Script to be run when the ready-state changes

onseekedNew scriptScript to be run when a media element's seeking attribute is no longer true, andthe seeking has ended

onseekingNew scriptScript to be run when a media element's seeking attribute is true, and theseeking has begun

onstalledNew script Script to be run when there is an error in fetching media data (stalled)

onsuspendNew scriptScript to be run when the browser has been fetching media data, but stoppedbefore the entire media file was fetched

ontimeupdateNew script Script to be run when media changes its playing position

onvolumechangeNew scriptScript to be run when media changes the volume, also when volume is set to"mute"

onwaitingNew script Script to be run when media has stopped playing, but is expected to resume

« Previous Next Reference »

HTML5 Tag Reference

« Previous Next Reference »

HTML5

HTML5 improves interoperability and reduces development costs by making precise rules on how to handle allHTML elements, and how to recover from errors.

Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side datastorage, and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and<figure>.

The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and manyhundreds of other vendors.

Page 41: Apa itu HTML5

Note: HTML5 is not a W3C recommendation yet!

To read about the HTML5 activities at W3C, please read our W3C tutorial.

Ordered Alphabetically

New : New tags in HTML5.

Tag Description

<!--...--> Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation

<acronym> Not supported in HTML5.

<address> Defines an address element

<applet> Not supported in HTML5.

<area> Defines an area inside an image map

<article>New Defines an article

<aside>New Defines content aside from the page content

<audio>New Defines sound content

<b> Defines bold text

<base> Defines a base URL for all the links in a page

<basefont> Not supported in HTML5.

<bdo> Defines the direction of text display

<big> Not supported in HTML5.

<blockquote> Defines a long quotation

<body> Defines the body element

<br> Inserts a single line break

<button> Defines a push button

<canvas>New Defines graphics

<caption> Defines a table caption

<center> Not supported in HTML5.

<cite> Defines a citation

<code> Defines computer code text

<col> Defines attributes for table columns

<colgroup> Defines groups of table columns

<command>New Defines a command button

<datalist>New Defines a dropdown list

<dd> Defines a definition description

<del> Defines deleted text

<details>New Defines details of an element

<dfn> Defines a definition term

<dir> Not supported in HTML5.

<div> Defines a section in a document

<dl> Defines a definition list

<dt> Defines a definition term

<em> Defines emphasized text

<embed>New Defines external interactive content or plugin

<fieldset> Defines a fieldset

Page 42: Apa itu HTML5

<figcaption>New Defines the caption of a figure element

<figure>New Defines a group of media content, and their caption

<font> Not supported in HTML5.

<footer>New Defines a footer for a section or page

<form> Defines a form

<frame> Not supported in HTML5.

<frameset> Not supported in HTML5.

<h1> to <h6> Defines header 1 to header 6

<head> Defines information about the document

<header>New Defines a header for a section or page

<hgroup>New Defines information about a section in a document

<hr> Defines a horizontal rule

<html> Defines an html document

<i> Defines italic text

<iframe> Defines an inline sub window (frame)

<img> Defines an image

<input> Defines an input field

<ins> Defines inserted text

<keygen>New Defines a generated key in a form

<kbd> Defines keyboard text

<label> Defines a label for a form control

<legend> Defines a title in a fieldset

<li> Defines a list item

<link> Defines a resource reference

<map> Defines an image map

<mark>New Defines marked text

<menu> Defines a menu list

<meta> Defines meta information

<meter>New Defines measurement within a predefined range

<nav>New Defines navigation links

<noframes> Not supported in HTML5.

<noscript> Defines a noscript section

<object> Defines an embedded object

<ol> Defines an ordered list

<optgroup> Defines an option group

<option> Defines an option in a drop-down list

<output>New Defines some types of output

<p> Defines a paragraph

<param> Defines a parameter for an object

<pre> Defines preformatted text

<progress>New Defines progress of a task of any kind

<q> Defines a short quotation

<rp>NewUsed in ruby annotations to define what to show browsers that to not support the rubyelement.

<rt>New Defines explanation to ruby annotations.

<ruby>New Defines ruby annotations

<s> Defines text that is no longer correct

<samp> Defines sample computer code

<script> Defines a script

<section>New Defines a section

<select> Defines a selectable list

Page 43: Apa itu HTML5

<small> Defines small text

<source>New Defines media resources

<span> Defines a section in a document

<strike> Not supported in HTML5.

<strong> Defines strong text

<style> Defines a style definition

<sub> Defines subscripted text

<summary>New Defines the header of a "detail" element

<sup> Defines superscripted text

<table> Defines a table

<tbody> Defines a table body

<td> Defines a table cell

<textarea> Defines a text area

<tfoot> Defines a table footer

<th> Defines a table header

<thead> Defines a table header

<time>New Defines a date/time

<title> Defines the document title

<tr> Defines a table row

<tt> Not supported in HTML5.

<u> Not supported in HTML5.

<ul> Defines an unordered list

<var> Defines a variable

<video>New Defines a video

<wbr>New Defines a possible line-break

<xmp> Not supported in HTML5.

« Previous

HTML5 Tag Reference

« Previous Next Reference »

HTML5

HTML5 improves interoperability and reduces development costs by making precise rules on how to handle allHTML elements, and how to recover from errors.

Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side datastorage, and interactive documents. HTML5 also contains new elements like <nav>, <header>, <footer>, and<figure>.

The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and manyhundreds of other vendors.

Note: HTML5 is not a W3C recommendation yet!

To read about the HTML5 activities at W3C, please read our W3C tutorial.

Page 44: Apa itu HTML5

Ordered Alphabetically

New : New tags in HTML5.

Tag Description<!--...--> Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation

<acronym> Not supported in HTML5.

<address> Defines an address element

<applet> Not supported in HTML5.

<area> Defines an area inside an image map

<article>New Defines an article

<aside>New Defines content aside from the page content

<audio>New Defines sound content

<b> Defines bold text

<base> Defines a base URL for all the links in a page

<basefont> Not supported in HTML5.

<bdo> Defines the direction of text display

<big> Not supported in HTML5.

<blockquote> Defines a long quotation

<body> Defines the body element

<br> Inserts a single line break

<button> Defines a push button

<canvas>New Defines graphics

<caption> Defines a table caption

<center> Not supported in HTML5.

<cite> Defines a citation

<code> Defines computer code text

<col> Defines attributes for table columns

<colgroup> Defines groups of table columns

<command>New Defines a command button

<datalist>New Defines a dropdown list

<dd> Defines a definition description

<del> Defines deleted text

<details>New Defines details of an element

<dfn> Defines a definition term

<dir> Not supported in HTML5.

<div> Defines a section in a document

<dl> Defines a definition list

<dt> Defines a definition term

<em> Defines emphasized text

<embed>New Defines external interactive content or plugin

<fieldset> Defines a fieldset

<figcaption>New Defines the caption of a figure element

<figure>New Defines a group of media content, and their caption

<font> Not supported in HTML5.

<footer>New Defines a footer for a section or page

<form> Defines a form

<frame> Not supported in HTML5.

Page 45: Apa itu HTML5

<frameset> Not supported in HTML5.

<h1> to <h6> Defines header 1 to header 6

<head> Defines information about the document

<header>New Defines a header for a section or page

<hgroup>New Defines information about a section in a document

<hr> Defines a horizontal rule

<html> Defines an html document

<i> Defines italic text

<iframe> Defines an inline sub window (frame)

<img> Defines an image

<input> Defines an input field

<ins> Defines inserted text

<keygen>New Defines a generated key in a form

<kbd> Defines keyboard text

<label> Defines a label for a form control

<legend> Defines a title in a fieldset

<li> Defines a list item

<link> Defines a resource reference

<map> Defines an image map

<mark>New Defines marked text

<menu> Defines a menu list

<meta> Defines meta information

<meter>New Defines measurement within a predefined range

<nav>New Defines navigation links

<noframes> Not supported in HTML5.

<noscript> Defines a noscript section

<object> Defines an embedded object

<ol> Defines an ordered list

<optgroup> Defines an option group

<option> Defines an option in a drop-down list

<output>New Defines some types of output

<p> Defines a paragraph

<param> Defines a parameter for an object

<pre> Defines preformatted text

<progress>New Defines progress of a task of any kind

<q> Defines a short quotation

<rp>NewUsed in ruby annotations to define what to show browsers that to not support the rubyelement.

<rt>New Defines explanation to ruby annotations.

<ruby>New Defines ruby annotations

<s> Defines text that is no longer correct

<samp> Defines sample computer code

<script> Defines a script

<section>New Defines a section

<select> Defines a selectable list

<small> Defines small text

<source>New Defines media resources

<span> Defines a section in a document

<strike> Not supported in HTML5.

<strong> Defines strong text

<style> Defines a style definition

Page 46: Apa itu HTML5

<sub> Defines subscripted text

<summary>New Defines the header of a "detail" element

<sup> Defines superscripted text

<table> Defines a table

<tbody> Defines a table body

<td> Defines a table cell

<textarea> Defines a text area

<tfoot> Defines a table footer

<th> Defines a table header

<thead> Defines a table header

<time>New Defines a date/time

<title> Defines the document title

<tr> Defines a table row

<tt> Not supported in HTML5.

<u> Not supported in HTML5.

<ul> Defines an unordered list

<var> Defines a variable

<video>New Defines a video

<wbr>New Defines a possible line-break

<xmp> Not supported in HTML5.

« Previous

HTML5 Tag Referensi«Sebelumnya Referensi Berikutnya »

HTML5

HTML5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yangtepat tentang bagaimana untuk menangani semua elemen HTML, dan bagaimana memulihkan dari kesalahan.

Beberapa fitur baru dalam HTML5 adalah fungsi untuk audio embedding, video, grafik, klien-sisi penyimpanandata, dan dokumen interaktif. HTML5 juga mengandung unsur-unsur baru seperti <nav>,, <header> <footer>,dan <figure>.

Kelompok HTML5 kerja termasuk AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, dan ratusanvendor lainnya.

Catatan: HTML5 bukan rekomendasi W3C yet!

Untuk membaca tentang kegiatan HTML5 di W3C, silahkan baca tutorial W3C .

Memerintahkan abjad

Baru : Baru tag di HTML5.

Tag Deskripsi

Page 47: Apa itu HTML5

<!--...--> Mendefinisikan komentar

<! DOCTYPE> Mendefinisikan jenis dokumen

<a> Mendefinisikan hyperlink

<abbr> Mendefinisikan singkatan

<acronym> Tidak didukung di HTML5.

<address> Mendefinisikan elemen alamat

<applet> Tidak didukung di HTML5.

<area> Mendefinisikan area dalam peta gambar

<article> Baru Mendefinisikan artikel

<aside> Baru Mendefinisikan konten selain dari konten halaman

<audio> Baru Mendefinisikan isi suara

<b> Mendefinisikan teks tebal

<base> Mendefinisikan URL dasar untuk semua link dalam halaman

<basefont> Tidak didukung di HTML5.

<bdo> Mendefinisikan arah tampilan teks

<big> Tidak didukung di HTML5.

<blockquote> Mendefinisikan sebuah kutipan panjang

<body> Mendefinisikan elemen body

<br> Menyisipkan break satu baris

<button> Mendefinisikan tombol push

<canvas> Baru Mendefinisikan grafis

<caption> Mendefinisikan sebuah judul tabel

<center> Tidak didukung di HTML5.

<cite> Mendefinisikan kutipan

<code> Mendefinisikan kode teks komputer

<col> Mendefinisikan atribut untuk kolom tabel

<colgroup> Mendefinisikan kelompok kolom tabel

<command> Baru Mendefinisikan tombol perintah

<datalist> Baru Mendefinisikan sebuah daftar dropdown

<dd> Mendefinisikan sebuah deskripsi definisi

<del> Mendefinisikan teks yang dihapus

<details> Baru Mendefinisikan elemen rincian

<dfn> Mendefinisikan sebuah istilah definisi

<dir> Tidak didukung di HTML5.

<div> Mendefinisikan sebuah bagian dalam dokumen

<dl> Mendefinisikan sebuah daftar definisi

<dt> Mendefinisikan sebuah istilah definisi

<em> Mendefinisikan teks menekankan

<embed> Baru Mendefinisikan konten interaktif eksternal atau plugin

<fieldset> Mendefinisikan sebuah fieldset

<figcaption> Baru Mendefinisikan judul dari unsur tokoh

<figure> Baru Mendefinisikan sekelompok konten media, dan keterangan mereka

<FONT> Tidak didukung di HTML5.

<footer> Baru Mendefinisikan sebuah footer untuk bagian atau halaman

<form> Mendefinisikan bentuk

<frame> Tidak didukung di HTML5.

<frameset> Tidak didukung di HTML5.

<h1> untuk <h6> Mendefinisikan header 1 ke header 6

<head> Mendefinisikan informasi tentang dokumen

<header> Baru Mendefinisikan sebuah header untuk bagian atau halaman

<hgroup> Baru Mendefinisikan informasi tentang sebuah bagian dalam dokumen

Page 48: Apa itu HTML5

<hr> Mendefinisikan aturan horisontal

<html> Mendefinisikan dokumen html

<i> Mendefinisikan teks miring

<iframe> Mendefinisikan suatu inline sub window (frame)

<img> Mendefinisikan gambar

<input> Mendefinisikan sebuah field input

<ins> Mendefinisikan teks yang disisipkan

<keygen> Baru Mendefinisikan sebuah kunci yang dihasilkan dalam bentuk suatu

<kbd> Mendefinisikan teks keyboard

<label> Mendefinisikan label untuk kontrol form

<legend> Mendefinisikan sebuah judul di sebuah fieldset

<li> Mendefinisikan item daftar

<link> Mendefinisikan referensi sumber daya

<map> Mendefinisikan peta gambar

<mark> Baru Mendefinisikan teks ditandai

<menu> Mendefinisikan daftar menu

<META> Mendefinisikan informasi meta

<meter> Baru Mendefinisikan pengukuran dalam rentang yang telah ditentukan

<nav> Baru Mendefinisikan navigasi link

<noframes> Tidak didukung di HTML5.

<noscript> Mendefinisikan sebuah bagian noscript

<object> Mendefinisikan sebuah objek tertanam

<ol> Mendefinisikan ordered list

<optgroup> Mendefinisikan grup pilihan

<option> Mendefinisikan pilihan dalam daftar drop-down

<output> Baru Mendefinisikan beberapa jenis output

<p> Mendefinisikan paragraf

<param> Mendefinisikan parameter untuk objek

<pre> Mendefinisikan teks terformat

<progress> Baru Mendefinisikan kemajuan tugas apapun

<q> Mendefinisikan kutipan pendek

<rp> BaruDigunakan dalam anotasi ruby untuk menentukan apa yang harus menunjukkan browseryang tidak mendukung elemen ruby.

<rt> Baru Mendefinisikan penjelasan untuk ruby penjelasan.

<ruby> Baru Mendefinisikan ruby penjelasan

<s> Mendefinisikan teks yang tidak lagi benar

<samp> Mendefinisikan sampel kode komputer

<script> Mendefinisikan script

<section> Baru Mendefinisikan bagian

<select> Mendefinisikan daftar dipilih

<small> Mendefinisikan teks kecil

<source> Baru Mendefinisikan sumber daya media

<span> Mendefinisikan sebuah bagian dalam dokumen

<strike> Tidak didukung di HTML5.

<strong> Mendefinisikan teks yang kuat

<style> Mendefinisikan suatu definisi gaya

<sub> Mendefinisikan teks subscript

<summary> Baru Mendefinisikan header dari unsur "detail"

<sup> Mendefinisikan teks superscripted

<table> Mendefinisikan tabel

<tbody> Mendefinisikan sebuah badan tabel

Page 49: Apa itu HTML5

<td> Mendefinisikan sebuah sel tabel

<textarea> Mendefinisikan sebuah area teks

<tfoot> Mendefinisikan sebuah footer tabel

<th> Mendefinisikan sebuah header tabel

<thead> Mendefinisikan sebuah header tabel

<time> Baru Mendefinisikan sebuah tanggal / waktu

<title> Mendefinisikan judul dokumen

<tr> Mendefinisikan sebuah baris tabel

<tt> Tidak didukung di HTML5.

<u> Tidak didukung di HTML5.

<ul> Mendefinisikan unordered list

<var> Mendefinisikan variabel

<video> Baru Mendefinisikan video

<wbr> Baru Mendefinisikan sebuah line break-kemungkinan

<xmp> Tidak didukung di HTML5.

HTML5 Global Attributes

New : New global attributes in HTML5.

Attribute Value Description

accesskey character Specifies a keyboard shortcut to access an element

class classname Specifies a classname for an element (used for stylesheets)

contenteditableNewtruefalse

Specifies if the user is allowed to edit the content or not

contextmenuNew menu_id Specifies the context menu for an element

dirltrrtl

Specifies the text direction for the content in an element

draggableNewtruefalseauto

Specifies whether or not a user is allowed to drag an element

dropzoneNewcopymovelink

Specifies what happens when dragged items/data is dropped in theelement

hiddenNew hiddenSpecifies that the element is not relevant. Hidden elements are notdisplayed

id id Specifies a unique id for an element

lang language_code Specifies a language code for the content in an element

spellcheckNewtruefalse

Specifies if the element must have its spelling and grammar checked

style style_definitionSpecifies an inline style for an element

tabindex number Specifies the tab order of an element

title text Specifies extra information about an element

« Previous

HTML5 Global Attributes

New : New global attributes in HTML5.

Attribute Value Description

accesskey character Specifies a keyboard shortcut to access an element

Page 50: Apa itu HTML5

class classname Specifies a classname for an element (used for stylesheets)

contenteditableNewtruefalse

Specifies if the user is allowed to edit the content or not

contextmenuNew menu_id Specifies the context menu for an element

dirltrrtl

Specifies the text direction for the content in an element

draggableNewtruefalseauto

Specifies whether or not a user is allowed to drag an element

dropzoneNewcopymovelink

Specifies what happens when dragged items/data is dropped in theelement

hiddenNew hiddenSpecifies that the element is not relevant. Hidden elements are notdisplayed

id id Specifies a unique id for an element

lang language_code Specifies a language code for the content in an element

spellcheckNewtruefalse

Specifies if the element must have its spelling and grammar checked

style style_definitionSpecifies an inline style for an element

tabindex number Specifies the tab order of an element

title text Specifies extra information about an element

« Previous

HTML5 Event Attributes

« Previous Next Reference »

Global Event Attributes

HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clickson an element.

To learn more about programming events, please visit our JavaScript tutorial and our DHTML tutorial.

Below are the global event attributes that can be inserted into HTML5 elements to define event actions.

New : New event attributes in HTML5.

Window Event Attributes

Events triggered for the window object.

Applies to the <body> tag:

Attribute Value Description

onafterprintNew script Script to be run after the document is printed

onbeforeprintNew script Script to be run before the document is printed

onbeforeonloadNew script Script to be run before the document loads

Page 51: Apa itu HTML5

onblur script Script to be run when the window loses focus

onerrorNew script Script to be run when an error occur

onfocus script Script to be run when the window gets focus

onhaschangeNew script Script to be run when the document has change

onload script Script to be run when the document loads

onmessageNew script Script to be run when the message is triggered

onofflineNew script Script to be run when the document goes offline

ononlineNew script Script to be run when the document comes online

onpagehideNew script Script to be run when the window is hidden

onpageshowNew script Script to be run when the window becomes visible

onpopstateNew script Script to be run when the window's history changes

onredoNew script Script to be run when the document performs a redo

onresizeNew script Script to be run when the window is resized

onstorageNew script Script to be run when a document loads

onundoNew script Script to be run when a document performs an undo

onunloadNew script Script to be run when the user leaves the document

Form Events

Events triggered by actions inside a HTML form.

Applies to all HTML5 elements, but is most common in form elements:

Attribute Value Description

onblur script Script to be run when an element loses focus

onchange script Script to be run when an element changes

oncontextmenuNew script Script to be run when a context menu is triggered

onfocus script Script to be run when an element gets focus

onformchangeNew script Script to be run when a form changes

onforminputNew script Script to be run when a form gets user input

oninputNew script Script to be run when an element gets user input

oninvalidNew script Script to be run when an element is invalid

onreset scriptScript to be run when a form is resetNot supported in HTML5

onselect script Script to be run when an element is selected

onsubmit script Script to be run when a form is submitted

Keyboard Events

Events triggered by a keyboard.

Applies to all HTML5 elements.

Attribute Value Description

onkeydown script Script to be run when a key is pressed

onkeypress script Script to be run when a key is pressed and released

onkeyup script Script to be run when a key is released

Page 52: Apa itu HTML5

Mouse Events

Events triggered by a mouse, or similar user actions:

Applies to all HTML5 elements.

Attribute Value Description

onclick script Script to be run on a mouse click

ondblclick script Script to be run on a mouse double-click

ondragNew script Script to be run when an element is dragged

ondragendNew script Script to be run at the end of a drag operation

ondragenterNew script Script to be run when an element has been dragged to a valid drop target

ondragleaveNew script Script to be run when an element leaves a valid drop target

ondragoverNew script Script to be run when an element is being dragged over a valid drop target

ondragstartNew script Script to be run at the start of a drag operation

ondropNew script Script to be run when dragged element is being dropped

onmousedown script Script to be run when a mouse button is pressed

onmousemove script Script to be run when the mouse pointer moves

onmouseout script Script to be run when the mouse pointer moves out of an element

onmouseover script Script to be run when the mouse pointer moves over an element

onmouseup script Script to be run when a mouse button is released

onmousewheelNew script Script to be run when the mouse wheel is being rotated

onscrollNew script Script to be run when an element's scrollbar is being scrolled

Media Events

Events triggered by medias like videos, images and audio.

Applies to all HTML5 elements, but is most common in media elements, such as audio, embed, img, object,and video:

Attribute Value Description

onabort script Script to be run on an abort event

oncanplayNew script Script to be run when media can start play, but might has to stop for buffering

oncanplaythroughNew scriptScript to be run when media can be played to the end, without stopping forbuffering

ondurationchangeNew script Script to be run when the length of the media is changed

onemptiedNew scriptScript to be run when a media resource element suddenly becomes empty(network errors, errors on load etc.)

onendedNew script Script to be run when media has reach the end

onerrorNew script Script to be run when an error occurs during the loading of an element

onloadeddataNew script Script to be run when media data is loaded

onloadedmetadataNew scriptScript to be run when the duration and other media data of a media element isloaded

onloadstartNew script Script to be run when the browser starts to load the media data

onpauseNew script Script to be run when media data is paused

onplayNew script Script to be run when media data is going to start playing

Page 53: Apa itu HTML5

onplayingNew script Script to be run when media data has start playing

onprogressNew script Script to be run when the browser is fetching the media data

onratechangeNew script Script to be run when the media data's playing rate has changed

onreadystatechangeNew script Script to be run when the ready-state changes

onseekedNew scriptScript to be run when a media element's seeking attribute is no longer true, andthe seeking has ended

onseekingNew scriptScript to be run when a media element's seeking attribute is true, and theseeking has begun

onstalledNew script Script to be run when there is an error in fetching media data (stalled)

onsuspendNew scriptScript to be run when the browser has been fetching media data, but stoppedbefore the entire media file was fetched

ontimeupdateNew script Script to be run when media changes its playing position

onvolumechangeNew scriptScript to be run when media changes the volume, also when volume is set to"mute"

onwaitingNew script Script to be run when media has stopped playing, but is expected to resume

« Previous

HTML5 Event Atribut

«Sebelumnya Referensi Berikutnya »

Global Event Atribut

HTML 4 menambahkan kemampuan untuk membiarkan kejadian memicu tindakan dalam browser, sepertimemulai JavaScript ketika pengguna mengklik elemen.

Untuk mempelajari lebih lanjut tentang kejadian pemrograman, silakan kunjungi kami JavaScript tutorial dankami DHTML tutorial .

Berikut ini adalah atribut acara global yang dapat dimasukkan ke dalam elemen HTML5 untuk menentukantindakan acara.

Baru : Acara baru atribut di HTML5.

Event Window Atribut

Acara memicu untuk objek jendela.

Berlaku untuk tag <body>:

Atribut Nilai Deskripsi

onafterprint Baru naskah Script yang akan dijalankan setelah dokumen dicetak

onbeforeprint Baru naskah Script yang akan dijalankan sebelum dokumen dicetak

onbeforeonload Baru naskah Script yang akan dijalankan sebelum beban dokumen

onblur naskah Script untuk dijalankan ketika jendela kehilangan fokus

OnError Baru naskah Script untuk dijalankan ketika kesalahan terjadi

onfocus naskah Script untuk dijalankan ketika mendapat fokus jendela

Page 54: Apa itu HTML5

onhaschange Baru naskah Script untuk dijalankan ketika dokumen telah berubah

onload naskah Script untuk dijalankan ketika dokumen beban

onmessage Baru naskah Script yang akan dijalankan bila pesan dipicu

onoffline Baru naskah Script untuk dijalankan ketika dokumen masuk offline

ononline Baru naskah Script untuk dijalankan ketika dokumen datang online

onpagehide Baru naskah Script untuk dijalankan ketika jendela tersembunyi

onpageshow Baru naskah Script untuk dijalankan ketika jendela menjadi terlihat

onpopstate Baru naskah Script untuk dijalankan ketika jendela sejarah perubahan

onredo Baru naskah Script untuk dijalankan ketika dokumen melakukan redo

onresize Baru naskah Script untuk dijalankan ketika jendela diubah ukurannya

onstorage Baru naskah Script untuk dijalankan ketika beban dokumen

onundo Baru naskah Script untuk dijalankan ketika dokumen melakukan undo

onunload Baru naskah Script untuk dijalankan ketika user meninggalkan dokumen

Formulir Acara

Peristiwa dipicu oleh tindakan dalam bentuk HTML.

Berlaku untuk semua elemen HTML5, tetapi yang paling umum pada elemen form:

Atribut Nilai Deskripsionblur naskah Script untuk dijalankan ketika elemen kehilangan fokus

onchange naskah Script untuk dijalankan ketika sebuah perubahan unsur

oncontextmenu Baru naskah Script untuk dijalankan ketika menu konteks dipicu

onfocus naskah Script untuk dijalankan ketika elemen mendapat fokus

onformchange Baru naskah Script untuk dijalankan ketika sebuah perubahan bentuk

onforminput Baru naskah Script untuk dijalankan ketika bentuk mendapat input pengguna

oninput Baru naskah Script untuk dijalankan ketika elemen mendapat input pengguna

oninvalid Baru naskah Script untuk dijalankan ketika elemen tidak valid

onreset naskahScript untuk dijalankan ketika formulir resetTidak didukung di HTML5

onselect naskah Script untuk dijalankan ketika elemen dipilih

onsubmit naskah Script untuk dijalankan ketika formulir dikirimkan

Keyboard Acara

Peristiwa dipicu oleh keyboard.

Berlaku untuk semua elemen HTML5.

Atribut Nilai Deskripsi

onkeydown naskah Script untuk dijalankan ketika tombol ditekan

onkeypress naskah Script untuk dijalankan ketika tombol ditekan dan dilepaskan

onkeyup naskah Script untuk dijalankan ketika tombol dilepaskan

Page 55: Apa itu HTML5

Mouse Acara

Peristiwa dipicu oleh mouse, atau tindakan pengguna serupa:

Berlaku untuk semua elemen HTML5.

Atribut Nilai Deskripsi

onclick naskah Script untuk dijalankan pada klik mouse

ondblclick naskah Script untuk dijalankan pada mouse klik ganda

ondrag Baru naskah Script untuk dijalankan ketika elemen diseret

ondragend Baru naskah Script untuk dijalankan pada akhir sebuah operasi drag

ondragenter Baru naskahScript untuk dijalankan ketika elemen yang terbawa ke target penurunan yangvalid

ondragleave Baru naskahScript untuk dijalankan ketika elemen meninggalkan target penurunan yangvalid

ondragover Baru naskahScript untuk dijalankan ketika elemen sedang diseret atas target penurunanyang valid

ondragstart Baru naskah Script untuk dijalankan pada awal operasi drag

ondrop Baru naskah Script yang akan dijalankan ketika unsur diseret sedang jatuh

onmousedown naskah Script untuk dijalankan ketika tombol mouse ditekan

onmousemove naskah Script untuk dijalankan ketika pointer mouse memindahkan

title naskah Script untuk dijalankan ketika pointer mouse bergerak dari suatu elemen

onmouseover naskah Script untuk dijalankan ketika pointer mouse bergerak di atas suatu elemen

onmouseup naskah Script untuk dijalankan ketika tombol mouse dilepaskan

onmousewheel Baru naskah Script untuk dijalankan ketika mouse wheel sedang diputar

onscroll Baru naskah Script untuk dijalankan ketika scrollbar sebuah elemen sedang menggulir

Media Acara

Peristiwa dipicu oleh media seperti video, gambar dan audio.

Berlaku untuk semua elemen HTML5, tetapi yang paling umum pada elemen media, seperti audio, embed, img,objek, dan video:

Atribut Nilai Deskripsi

onabort naskah Script untuk dijalankan pada peristiwa membatalkan

oncanplay Baru naskahScript untuk dijalankan ketika media bisa mulai bermain, tapi mungkin harusberhenti untuk buffering

oncanplaythrough Baru naskahScript untuk dijalankan ketika media dapat dimainkan sampai akhir, tanpaberhenti untuk buffering

ondurationchange Baru naskah Script untuk dijalankan ketika panjang media berubah

onemptied Baru naskahScript untuk dijalankan ketika elemen sumber daya media tiba-tiba menjadi(kesalahan jaringan, kesalahan pada beban dll) kosong

onended Baru naskah Script untuk dijalankan ketika media telah mencapai akhir

OnError Baru naskah Script untuk dijalankan ketika kesalahan terjadi selama pemuatan elemen

onloadeddata Baru naskah Script untuk dijalankan ketika media data dimuat

onloadedmetadata Baru naskahScript untuk dijalankan ketika durasi dan media lainnya data elemen mediadimuat

onloadstart Baru naskah Script untuk dijalankan ketika browser mulai memuat data media

onpause Baru naskah Script untuk dijalankan ketika media data dihentikan sementara

Page 56: Apa itu HTML5

onplay Baru naskah Script untuk dijalankan ketika media data akan mulai bermain

onplaying Baru naskah Script untuk dijalankan ketika media data telah mulai bermain

onprogress Baru naskah Script yang akan dijalankan bila browser mengambil data media

onratechange Baru naskah Script untuk dijalankan apabila laju bermain data media telah berubah

onreadystatechange Baru naskah Script untuk dijalankan ketika perubahan siap-negara

onseeked Baru naskahScript untuk dijalankan ketika atribut elemen media mencari tidak lagi benar,dan mencari telah berakhir

onseeking Baru naskahScript untuk dijalankan ketika atribut elemen media mencari benar, dan telahmulai mencari

onstalled Baru naskahScript yang akan dijalankan bila ada kesalahan dalam mengambil data media(macet)

onsuspend Baru naskahScript untuk dijalankan ketika browser telah mengambil data media, tapiberhenti sebelum seluruh file media dijemput

ontimeupdate Baru naskah Script untuk dijalankan ketika media berubah posisi bermain yang

onvolumechange Baru naskahScript untuk dijalankan ketika media perubahan volume, juga ketika volumedisetel ke "bisu"

onwaiting Baru naskahScript untuk dijalankan ketika media sudah berhenti bermain, namundiperkirakan untuk melanjutkan

«Sebelumnya