Download - 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
<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
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.
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.
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
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
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 »
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 »
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:
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.
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 »
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.
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.
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).
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
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
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
<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.
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
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 »
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.
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 »
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" />
</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" />
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
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" />
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 »
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
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:
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
<!--...--> 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
<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
<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
<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
<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
<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
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.
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
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
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.
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
<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
<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.
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.
<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
<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
<!--...--> 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
<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
<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
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
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
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
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
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
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
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