Mendengar kata HyperText Markup Language atau yang baisa disebut HTML pasti kita langsung berfikir mengenai kode-kode yang rumit dan sulit diartikan. Perkembangan standart bahasa markup website menuju HTML5 sudah ditunggu-tunggu developer web seluruh dunia. Meskipun belum dirilis secara resmi, banyak fitur HTML5 yang sudah diimplementasikan oleh browser-browser besar seperti Mozilla Firefox, Opera, Safari, dan Google Chrome. Ada baiknya Anda mengetahui fitur-fitur yang pastinya akan banyak dipakai di dunia Internet masa datang ini.
Berikut ini adalah beberapa hal tentang HTML5 yang wajib Anda ketahui jika Anda ingin menjadi developer web yang handal.
- Deklarasi doctype baru. Sebelum membuat sebuah halaman dengan HTML5, tentu saja doctype yang digunakan juga harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML, sehingga Anda tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, Anda harus menuliskannya dengan panjang.
Sedangkan pada HTML5, doctype tersebut disederhanakan menjadi
<!DOCTYPE html>
- Struktur semantic. Pada XHTML, programmer HTML bisa saja menjadi pembuat stress programmer CSS karena struktur halaman yang dibuatnya. Harus ada kesepakatan penamaan yang solid antara kedua pihak agar tidak ada masalah pembacaan struktur halaman. Biasanya, dalam XHTML akan dibuat sebuah “div” dengan id-nya masing-masing, seperti pada gambar
Struktur tersebut tidak terlihat semantic, sulit dibaca dan dideskripsikan, serta bagi programmer HTML yang iseng, bisa saja id header diubah sesukanya. HTML5 menawarkan elemen-elemen yang umum digunakan dalam sebuah struktur halaman website. Sehingga, penulisan tag setiap elemen dapat terlihat lebih semantic dan mudah dibaca, seperti pada gambar.
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Banyak manfaat jika menggunakan struktur seperti ini. Elemen “header” merepresentasikan header dari suatu section. Elemen “footer” juga merepresentasikan footer dari suatu section. Elemen “nav” cocok digunakan untuk merepresentasikan link navigasi. Sedangkan elemen “section” merepresentasikan suatu bagian generic dari dokumen.
- Contenteditable. Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi langsung pada tampilan. Contoh sederhananya:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul</title>
</head>
<body>
<h2>Daftar barang piknik</h2>
<ul contenteditable="true">
<li>Jas hujan</li>
<li>Tenda</li>
<li>Air minum</li>
</ul>
</body>
</html>
Hasil tampilan dari kode di atas adalah memungkinkan untuk penambahan list dalam tag “ul” yang telah diberikan atribut tersebut. Jika dikombinasikan dengan sedikit Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang cukup powerful namun mudah untuk dibuat.
- Validasi email. Dengan validasi langsung di tampilan, Anda dapat mencegah seorang user untuk memanggil script website dengan input yang salah. Ini dapat mengurangi jumlah request yang tidak valid terhadap script program Anda. HTML5 menawarkan fitur validasi email secara langsung dengan mengubay type dari elemen input menjadi “email”. Sayangnya, masih belum semua browser memberikan support untuk fitur ini. Dari percobaan penulis, salah satu browser yang memiliki fitur ini adalah Opera.
<label for="email">Email:</label>
<input id="email" type="email" name="email" />
<button type="submit">OK</button>
</form>
- Atribut required. Satu lagi untuk input pada HTML5, memungkinkan validasi pada sisi client terhadap input yang harus diisi. Dengan demikian, Anda tidak perlu membuat fungsi javascript untuk melakukannya. Cukup menambahkan atribut “required” pada elemen “input”. Jika tombol submit ditekan, akan muncul pesan error<form method="post" action=""><label for="someInput">Nama:</label><input type="text" id="someInput" name="someInput" placeholder="Muhammad Fauzil Haqqi" required>
<button type="submit">Go</button>
</form>.
- Internet Explorer Hack. Seperti biasanya, Internet Explorer selalu terlambat dalam mengimplementasikan teknologi website terbaru, meski Microsoft selalu memiliki teknologi sendiri seperti silverlight untuk browsernya tersebut. Pada IE, secara default semua elemen akan ditampilkan secara “inline”. Untuk itu, Anda harus mendeklarasikan style tersendiri agar tampilan dapat seperti seharusnya, seperti berikut ini.header, footer, article, section, nav, menu, hgroup {display: block;}Meskipun demikian IE tetap tidak menghiraukan style tersebut. Anda harus membuat javascript di bawah ini ke dalam “head” dari setiap halaman.document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
Untuk kemudahan, seseorang bernama Remy Sharp telah membuat library javascript untuk mengatasi error yang dibuat oleh IE tersebut. Script ini biasa disebut dengan HTML5 shim. Anda bisa memasukkan kode di bawah ini ke dalam head halaman website Anda, atau mendownload script tersebut secara lokal.
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> - Masih banyak elemen html5 lainnya seperti canvas, video, audio, mark, dan sebagainya. Setiap elemen akan berperilaku berbeda di setiap browser, karena memang standart resimnya belum dikeluarkan oleh W3C. Untuk melihat kompatibilitas browser terhadap HTML5 dan CSS3, Anda bisa mengunjungi halamanhttp://www.findmebyip.com/litmus atau kunjungi blog ini.
Sumber :
http://blog.haqqi.net/2011/06/komponen-html5-yang-wajib-diketahui/
http://www.html5code.com/tutorials/introducing-html5/
http://www.html5code.com/tutorials/understanding-the-html5-timeline/
http://rivermaya.wordpress.com/2007/02/03/kode-kode-html/
http://www.html5code.com/tutorials/
pertamax belajar html 5
BalasHapus