element-element baru dalam HTML 5
<article> = For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside> = For content aside from the content it is placed in. The aside content should be related to the surrounding content
<command> = A button, or a radiobutton, or a checkbox
<details> = For describing details about a document, or parts of a document
<summary> = A caption, or summary, inside the details element
<figure> = For grouping a section of stand-alone content, could be a video
<figcaption> = The caption of the figure section
<footer> = For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header> = For an introduction of a document or section, could include navigation
<hgroup> = For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark> = For text that should be highlighted
<meter> = For a measurement, used only if the maximum and minimum values are known
<nav> = For a section of navigation
<progress> = The state of a work in progress
<ruby> = For ruby annotation (Chinese notes or characters)
<rt> = For explanation of the ruby annotation
<rp> = What to show browsers that do not support the ruby element
<section> = For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time> = For defining a time or a date, or both
<wbr> = Word break. For defining a line-break opportunity.
<audio> = For multimedia content, sounds, music or other audio streams
<video> = For video content, such as a movie clip or other video streams
<source> = For media resources for media elements, defined inside video or audio elements
<embed> = For embedded content, such as a plug-in
<canvas> = For making graphics with a script
<datalist> = A list of options for input values
<keygen>= Generate keys to authenticate users
<output> = For different types of output, such as output written by a script
tel = The input value is of type telephone number
search = The input field is a search field
url =The input value is a URL
email = The input value is one or more email addresses
datetime = The input value is a date and/or time
date = The input value is a date
month = The input value is a month
week = The input value is a week
time = The input value is of type time
datetime-local = The input value is a local date/time
number = The input value is a number
range = The input value is a number in a given range
color = The input value is a hexadecimal color, like #FF8800
html 5 menyuport 3 jenis file : ogg, MPEG4, WebM.
best browser yg menyuport semua format video untuk HTML 5 : chrome 6.0+
contoh
single video<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
multiple video
<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>
content "Your browser does not support the video tag." dimaksudkan jika web browser yg user pakai tidak suport, maka akan muncul tulisan tersebut.
attribute :
attribute value deskripsi
audio muted Defining the default state of the the audio. Currently, only "muted" is allowed
autoplay autoplay If present, then the video will start playing as soon as it is ready
controls controls If present, controls will be displayed, such as a play button
height pixels Sets the height of the video player
loop loop If present, the video will start over again, every time it is finished
poster url Specifies the URL of an image representing the video
preload preload If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present
src url The URL of the video to play
width pixels Sets the width of the video player
HTML 5 menyuport file audio : ogg vorbis, mp3, wav.
sama seperti video, web browser yg menyuport : chrome 6.0+
contoh :
single audio<audio src="song.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
multiple audio
<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>
Attribute value description
autoplay autoplay Specifies that the audio will start playing as soon as it is ready.
controls controls Specifies that controls will be displayed, such as a play button.
loop loop Specifies that the audio will start playing again (looping) when it reaches the end
preload preload Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
src url Specifies the URL of the audio to play
berfungsi untuk menggambar graphic dalam web kita. Menggunakan JavaScript dalam penggambaran'a. Canvas berbentuk persegi panjang, dan anda mengontrol setiap pixel dalam canvas tersebut. anda bisa menggambar garis, kotak, lingkaran, charackter, dan memasukkan image kedalamnya.
contoh:
contoh kanvas element<canvas id="myCanvas" width="200" height="100"></canvas>
javascript untuk menggambar<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
contoh gambar garis
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
contoh gambar lingkaran
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
contoh gradient warna
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
contoh untuk menyisipkan gambar
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="img_flwr.png"
cxt.drawImage(img,0,0);
</script>
untuk mencoba gbr garis klik disini
untuk mencoba gbr lingkaran klik disini
untuk mencoba gradient warna klik disini
untuk mencoba memasukkan gambar klik disini
untuk menggambar sebuah bentuk dalam canvas, anda diharuskan mengetahui koordinat.
contoh :
(0,0,150,75)
150,175 >>> yang berarti menggambar persegi panjang dengan besar 150x75
0,0 >>> yang berarti dimulai dari koordinat 0,0 (X=0, Y=0)
HTML 5 Web Storage
kalau di lihat dari fungsinya, html 5 ini tidak terlalu beda dari fungsi "cookies", tapi tetap ada bedanya lha ya.... 
bedanya dari cookies, web storage ini bisa menyimpan data yg ukuran'a
lebih besar. web storage ini tidak selalu me-request ke server, berbeda
dengan cookies yg selalu me-request ke server, yg menjadikan performa
website internet anda berkurang.
Dalam web storage, data dari stiap web yang berbeda disimpan di tempat
yang berbeda pula, dan website tersebut hanya bisa meng-akses data
stored dari website itu sendiri. HTML 5 web storage menggunakan
javascript untuk men-store dan mengakses data.
jenis-jenis web storage :
local storage object
local storage object menyimpan data tanpa mengenal batasan waktu. Data
akan tetap ada sampai besok, minggu depan, tahun depan (sampai komputer
anda mleduk pokok'a 
).
contoh:
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
dan untuk melihat berapa kali user telah melihat web tersebut
<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>
Session Storage Object
berbeda dengan local storage, session storage ini hanya menyimpan data
sampai user menutup browser nya, dan data tersebut akan automatis
di-delete.
contoh:
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
dan untuk melihat berapa kali user telah melihat web tersebut
<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>
HTML 5 Input Type
HTML 5 mempunyai beberapa input type baru:
* email
* url
* number
* range
* Date pickers (date, month, week, time, datetime, datetime-local)
* search
* color
browser yg terbaik untuk men-suport html 5 input type : Opera 11.0+
note : jika memakai html 5 ini pada browser yang tidak suport, maka akan dibaca sebagai text biasa.
Email
digunakan untuk yg berisikan email address. value dari email address tersebut akan langsung di validasi setelah form di submit.
E-mail: <input type="email" name="user_email" />
Url
digunakan untuk yg berisikan alamat URL. value dari email ini juga akan
langsung di validasi setelah form di submit (mirip kayak email, cuma yg
ini bedanya url).
website: <input type="url" name="user_url" />
Number
input ini digunakan untuk input field yang berupa angka (hanya angka !).
Anda juga bisa membatasi angka apa saja yang bisa di-isi.
Points: <input type="number" name="points" min="1" max="10" />
attribute>>value >>penjelasan :
[color="#FF0000"]max[/color] [color="#00BFFF"]number[/color] Specifies the maximum value allowed[color="#FF0000"]min[/color] [color="#00BFFF"]number[/color] Specifies the minimum value allowed[color="#FF0000"]step[/color] [color="#00BFFF"]number[/color] Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
[color="#FF0000"]value[/color] [color="#00BFFF"]number[/color] Specifies the default value
Range
digunakan untuk input field yang berupa value from a range of number.
Range type ditampilkan sebagai slide bar. Menurut saya input type ini
sama aja sama input type number...
<input type="range" name="points" min="1" max="10" />
attribute>>value >>penjelasan
[color="#FF0000"]max[/color] [color="#00BFFF"]number[/color] Specifies the maximum value allowed
[color="#FF0000"]min[/color] [color="#00BFFF"]number[/color] Specifies the minimum value allowed
[color="#FF0000"]step[/color] [color="#00BFFF"]number[/color] Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc)
[color="#FF0000"]value[/color] [color="#00BFFF"]number[/color] Specifies the default value
Date Picker
date picker berfungsi untuk input type berupa tanggal. (biasanya kan ada kalau registrasi harus mencantumkan tgl lahir..).
fungsi-fungsi input type date picker :
* 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)
contohnya :
[/code]
Date: <input type="date" name="user_date" />
[/code]
Color
digunakan untuk input type berupa warna.
Color: <input type="color" name="user_color" />
HTML 5 Form Element
input - input terbaru dari HTML 5 form :
* datalist
* keygen
* output
Datalist
Datalist element memberikan list yang lebih spesifikasi dari sebuah
option di dalam input type. List di buat dengan option di dalam
datalist.
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>
K3yg3n (3 ganti 'e')
tujuan dari element ini untuk memberikan security, dengan cara
autentikasi user. Element ini mempunyai 2 buah generator, 1 private dan 1
public. private key di simpan di client, sedangkan public key disimpan
di server. Public key digunakan untuk men-generate client sertifikat,
untuk autentikasi user.
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <[JaMu] name="security" /><input type="submit" />
</form>
Output
Output element digunakan untuk berbagai macam output, seperti kalkulasi, atau script output.
<output id="result" onforminput="resCalc()"></output>
HTML 5 Form Attributes
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
langsung saja...
Autocomplete
Autocomplete attribute menjelaskan bahwa form/ input type tersebut
mempunyai autocomplete. Saat user mengetik di autocomplete input type,
browser akan men-display option list untuk mengisi field tersebut.
note : autocomplete bekerja dengan tag <form> dan <input>
type : text, search, url, telephone, email, password, datepickers,
range, dan color.
contoh
<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>
Autofocus
fungsi autofocus : memfokuskan suatu field saat page selesai load.
note : autofocus bekerja dengan tag <input>
contoh:
User name: <input type="text" name="user_name" autofocus="autofocus" />
Form Attribute
form attribute men-spesifikasikan 1 atau lebih form dari suatu input field
note :untuk men-spesifikasikan lebih dari 1 form gunakan space-separated list, dan hanya bekerja pada <input> type.
contoh:
<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" />
Form Overrides
fungsi : mengijinkan anda untuk me-overrides form attribute :
-action
-enctype
-method
-novalidate
-target
note : hanya bekerja pada <input> type : submit dan image.
contoh :
<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>
height dan Width
height dan width men-spesifikasikan height dan width dari sebuah gambar di dalam input field.
contoh:
<input type="image" src="img_submit.gif" width="24" height="24" />
