Berikut ini saya akan uraikan beberapa hal baru tentang HTML5 yang mungkin belum anda ketahui. Memang tidak begitu banyak perbedaan antara versi sebelumnya namun penyempurnaan di HTML ini menurut saya sudah sangat bagus. Beberapa diantaranya adalah sebagai berikut:
1. Doctype baru yang lebih sederhana.
Pada versi XHTML kita sering menggunakan Doctype yang panjang serpti ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Di HTML5 anda cukup buat seperti ini:
<!DOCTYPE html>
2. Elemen/tag Figure
Pada versi sebelumnya kita biasa membuat informasi kontak seperti ini:
<img src="images/pasfoto.jpg" /> <p>Ini foto Saya </p>
Di html5 Anda bisa menggunakan elemen baru yaitu <figure> untuk menampilkan data berupa profil pribadi beserta foto. Lihat contohnya:
<figure>
<img src="images/pasfoto.jpg"/>
<figcaption>
<p>Ini foto saya yang paling baru</p>
</figcaption>
</figure>
3. Elemen <small>
Ada cara baru untuk menampilkan teks dengan ukuran kecil yaitu menggunakan elemen <small> contohnya seperti ini:
<h2>Selamat datang website <small>Perusahaan kami</small></h2>
Contoh diatas akan memberikan perbedaan ukuran huruf dengan yang ada didalam elemen <small>. Namun penggunaan elemen <small> lebih tepatnya digunakan untuk teks-teks didalam website anda yang memeng diharuskan kecil seperti informasi copyright yang ada dipaling bawah website anda.
4. Tidak perlu menggunakan Types untuk sumber file external.
Pada versi xhtml kita sering menulis sperti ini:
<link rel="stylesheet" href="stylesheet.css" type="text/css" /> <script type="text/javascript" src="script.js"></script>
Sekarang di HTML5 anda bisa menulisnya seperti ini:
<link rel="stylesheet" href="stylesheet.css" /> <script src="script.js"></script>
5. Content editable
Ini sedikit menarik menurut saya. dengan HTML5 anda bisa membut isi konten web anda bisa diedit oleh pengguna. contohnya seperti ini:
<h2> Daftar Belanjaan </h2>
<ul contenteditable="true">
<li> Mobil avanza. </li>
<li> Almari olimpic </li>
<li> Laptoop asus </li>
</ul>
Silahkan lihat demonya disini : http://jsfiddle.net/xo7q3s4L/
6. Type Input khusus untuk email
HTML5 juga menyediakan type input khusus untuk email. jadi ini sekaligus sebagai validator input dari pengguna. jika yang diinput bukan format email maka sistem akan menolak.
<input id="email" name="email" type="email" />
7. Property placeholder untuk input
<input name="email" type="email" placeholder="[email protected]" />
Ini mirip dengan value yang teksnya langsung muncul di form input namun ini hanya teks bayangan saja yang ketika difokus maka teksnya hilang dengan sendirinya.
8. Elemen header dan footer
Sebelumnya kita sering membuat seprti ini:
<div id="header">
...
</div>
<div id="footer">
...
</div>
Di HTML5 anda bisas buat seperti ini
<header>
...
</header>
<footer>
...
</footer>
9. Tambahan atribut required pada form input.
HTML5 memungkinkan Anda bisa membuat form input harus diisi tanpa menggunakan javascript. Ini contohnya
<input type="text" name="nama" required>
10. Support file audio
Anda bisa menjalankan file audio dalam website anda dengan kode dibawah ini
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a>Download this file.</a>
</audio>
11. Support file vidoe
HTML5 juga support file video. jadi anda tidak perlu memakai player video orang lain. Ini contohnya:
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>
12. Regular Expressions
Anda bisa membuat validasi form input dengan karakter tertentu saja dengan menggunakan atribut regular expression. contohnya seperti ini:
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
required>
13. Elemen <mark>
Elemen <mark> memungkinkan anda membuat teks tertentu menjadi otomatis memiliki background kuning. Contonya seperti ini
<h3>Hasil pencarian</h3> <p> Maaf, pencarian dengan kata kunci <mark>"apel merah muda"</mark> tidak ditemukan dalam database kami. </p>
Lihat demonya disini: http://jsfiddle.net/t9eujst7/
