HTML5 merupakan versi ke-5 dari html dan saat ini juga masih dalam tahap pengembangan. Berikut adalah fitur-fitur terbaru dalam HMTL5 diantaranya yaitu:
- Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau realplayer untuk memutar audio dan video.
- Canvas : Media corat-coret langsung tanpa flash dan applet java.
- Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.
- Semantic : Mempermudah designer dengan tag khusus layout, seperti: artikel, footer, header, navigasi, dan section
- Dukungan yang lebih baik untuk penyimpanan secara offline.
2. Document Type (DOCTYPE)
DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis. DOCTYPE bukanlah tag HTML dan deklarasi DOCTYPE mengacu pada Document Type Definition (DTD). DTD menetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar. Deklarasi DOCTYPE harus menjadi hal pertama dalam dokumen HTML, sebelum tag <html>. Biasakan selalu menambahkan DOCTYPE ke halaman web agar membantu browser untuk membuat halaman web/blog dengan benar. Penggunaan DOCTYPE pada HTML5 lebih di sederhanakan dengan mengetikkan perintah:
<!DOCTYPE html>
3. STRUKTUR DASAR HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>informasi dokumen</title>
</head>
<body>
....konten yang di tampilkan
pada halaman browser.....
</body>
</html>
4. Elemen Semantik HTML5
Semantic = arti/makna. Semantic elements = elemen dengan makna. Elemen semantik baru yang bertujuan untuk memberi makna ke berbagai bagian dari suatu halaman Web modern: header, footer, navigation bar, sidebar, dan sebagainya. Unsur-unsur semantik baru yang disediakan HTML5 adalah:
- <article>
- <section>
- <nav>
Ini adalah wadah untuk link navigasi utama pada halaman Web.
- <aside>
- <hgroup>
Dalam beberapa kasus, halaman, artikel, atau bagian mungkin memerlukan lebih dari satu pos, seperti di mana Anda memiliki judul dan subjudul dengan tag heading.
- <canvas>
- <audio> dan <video>
Macam - macam jenis input form baru di HTML5 yaitu:
*color *date
*datetime *datetime-local
*email *month
*number *range
*search *tel
*time *url
*week
Selain memberikan elemen-elemen baru, HTML5 menghapus beberapa elemen lama seperti:
*<acronym> *<applet>
* <basefont> *<frame>
*<big> *<dir>
*<center> *<font>
*<frameset> *<noframes>
*<strike> *<tt>
4.Contoh Layout HTML5
Untuk memahami penggunaan elemen semantik pada HMTL5 bisa melihat layout dibawah ini:
latihan2.
5.Figure & Figcaption
HTML5 memperkenalkan tag baru bernama <figure>. Tag ini digunakan sebagai wadah untuk menampung atau meletakkan tag <img> agar dapat tersusun secara rapih. Sedangkan <figcaption> digunakan untuk menuliskan atau memberikan keterangan pada gambar.
<figure>
<img src="url">
<figcaption>Keterangan Gambar</figcaption>
</figure>
Contoh penggunaan tag <figure> dan <figcaption>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Figure dan Figcaption</title>
</head>
<body>
<figure>
<img src="android.jpg" width="192" height="320">
<figcaption>Android OS</figcaption>
<img src="blackberry.jpg" width="192" height="320">
<figcaption>Blackberry OS</figcaption>
</figure>
</body>
</html>
6. Video
HTML5 memperkenalkan tag baru bernama <video>. Tag ini digunakan untuk memasukkan video, misalnya ingin memutar video kedalam halaman web. Pada versi HTML sebelumnya untuk memutar video pada sebuah web menggunakan plugins tambahan yang biasa disebut flash Player. Tag video pada HTML5, setidaknya ada 3 jenis format video yang mendukung yaitu:
- Ogg (File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)
- MPEG4 (File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)
- WebM (File WebM dengan Video Codec VP8 dan Audio Codec Vorbis) (.webm)
Contoh :
<video controls="controls">
<source src="judulvideo.ogg" type="video/ogg">
<source src="judulvideo.mp4" type="video/mp4">
<source src="judulvideo.webm" type="video/webm">
</video>
Atribut pada tag <video>
7. Audio
HTML5 memperkenalkan tag baru bernama <audio>. Tag ini digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web. Ketika di generasi sebelumnya (HTML 4.01) memasukkanaudio ke dalam web masih harus menggunakan flash. Tag audio pada HTML5, setidaknya ada 3 jenis format audio yang mendukung yaitu: Ogg, MP3, Wav.
<audio controls="controls">
<source src="judullagu.mp3" type="audio/mp3">
</audio>
Atribut pada tag <audio>
Referensi :
- http://id.wikipedia.org/wiki/HTML5
- http://www.w3schools.com
