Tahun 2011 merupakan tahunnya HTML5, setelah Internet Explorer 9 rilis beberapa bulan
lalu, maka semua browser utama (IE, Firefox, Safari, Chrome dan Opera) telah mendukung
HTML5 dan CSS3. Ya walaupun belum semua fungsi HTML5 & CSS3 didukung spenuhnya,
tetapi tahun ini merupakan lahirnya HTML5. Jadi tunggu apa lagi, Anda masih pakai
XHT ML? atau mungkin malah HTML4? mulailah belajar HTML5, ada banyak tag2 baru yang
sangat menarik. Disini saya akan mengajari tag-tag yang baru saja dan yang paling banyak
digunakan dalam melayout sebuah website.
Sebelum anda meneruskan membaca artikel ini, saya sarankan anda paham mengenai dasar-dasar
HTML dan dasar-dasar CSS terlebih dahulu. Karena disini saya hanya akan menerangkan tag -tag yang
baru di HTML5, maka saya asumsikan Anda sudah tahu tag-tag yang lama.
Oke, sebelumnya kita nanti akan membuat sebuah website dengan HTML5 yang layoutnya /
wireframe nya kira-kira seperti ini:
Nah dengan wireframe seperti itu nanti kira-kira kita akan menggunakan tag berikut ini:
Oke ada banyak tag yang baru yah, mari kita mulai saja, siapkan teks editor Anda dan kita
buat deklarasi HTML5 beserta <head> nya:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drop Down Menu</title>
<head>
<body>
Isi web disini
</body>
</html>
Sip, lebih simpel kan, kalau dulu jaman XHT ML kita perlu mendeklarasikan transitional, atau
strict, sekarang cukup <!DOCTYPE html> . Nah untuk isinya saya akan memberitahu
tag-tag yang baru, nanti setiap kode berikutnya Anda masukkan didalam <body> , yang ada
tulisan Isi web disini.
<header>
Tag pertama kita adalah <header> , sesuai namanya tag ini ditempatkan diatas pada
bagian awal website. Kalau dulu kita pakai <div id="header"> sekarang kita
menggantinya dengan<header> . Tetapi <header> tidak harus melulu dipaling atas
web, kita bisa memiliki beberapa <header> , misal didalam artikel (kita akan bahas ini nanti
dibagian article).
Nah, didalam <header> ini bisa kita isi macam-macam, misal logo, navigasi, heading dan
lain-lain. Bahkan diisi <div> pun tidak masalah.
<hgroup>
Weittss <hgroup> , apa lagi ini? Oke gampangnya jika kita memiliki satu atau lebih dari
satu heading berurutan <h1> - <h6> maka kita bisa mengelompokkannya
dengan <hgroup> . Biasanya digunakan apabila kita memiliki judul dan ada sub judul, atau
untuk judul web kemudian kita memiliki slogan. Tapi kalau headingnya cuma satu ya nggak
usah dikasih <hgroup>. Oke daripada pusing langsung saja lihat contohnya ya:
<header id="main-header">
<hgroup>
<h1>Ini Website HTML5 pertama saya</h1>
<h2>Dan juga yang terakhir karena saya bingung</h2>
</hgroup>
Oke, kalau sudah lihat contohnya paham kan, sip nanti kita masih akan menambahkan
sesuatu kedalam <header> .
<nav>
Nah, dari namanya sudah kelihatan kalau ini fungsinya untuk menampilkan navigasi pada
website Anda. Ya kalau dulu kita pakai <ul><li> untuk membuat navigasi menu, nah
sekarang kita pakai... ummm.. ya sama pakai <ul><li> juga, tetapi kita bungkus
dengan <nav> . Nah langsung saja kita lihat contoh kodenya:
<nav id="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Sip, sama kan? Yang perlu diingat bahwa <nav> digunakan untuk ngelink kehalamanhalaman utama dari website atau bagian dari halaman itu sendiri. Kalau untuk paging, Social
Networking atau list-list yang lain yang menggunakan <ul> nggak perlu dikasih <nav> .
<section> tidak boleh diberi style, tidak boleh sebagai container layout. Tetap gunakan <div> apabila ingin
melayout.
Nah, berijutnya adalah <time> , sesuai namanya, digunakan untuk menunjukan waktu,
biasanya digunakan untuk menunjukkan waktu publish artikel, komenta r, forum dan lain
sebagainya. <time> memiliki atribut datetime yang berisi waktu bisa dalam format yyyymm-dd atau jam seperti 19:00. Hal ini digunakan agar mesin pencari dapat mengenali waktu
dalam format standar meskipun kita menulisnya tidak dalam format standar. Contoh:
<p>Ditulis oleh Dhimas pada <time datetime="2011-11-23">Senin
Pahing, 23 November 2011</time></p>
Mudah kan? oke kita akan lanjut ke tag berikutnya
Oh iya, gosip mengatakan bahwa <time> akan dibuang dari HTML5 nggak tau mau diganti apa, tetapi
menurut saya tag <time> cukup bagus dan tidak perlu digantikan
<aside>
Nah ini nih tag yang saya sendiri masih bingung penggunaannya, karena tiap website contoh
penggunaan <aside> berbeda-beda. Oke kalau dilihat dari sejarahnya <aside> itu
awalnya namanya <sidebar> tetapi kemudian diganti menjadi <aside> .
Nah <aside> merupakan tag yang berisi konten yang berhubungan dengan konten utama
dalam halaman web, oke berarti bisa disimpulan bahwa <aside> digunakan sebagai
sidebar pada website. Nah permasalahannya setiap sidebar misal wordpress, pasti
didalamnya terdapat konten-konten lagi, kalau di wordpress biasanya widget. Nah terus
kode nya seperti apa? Ada 3 kemungkinan, yang pertama:
<aside id="sidebar">
<aside>
Ini Widget Pertama
</aside>
<aside>
Ini Widget Kedua
</aside>
<aside>
Ini Widget Ketiga
</aside>
</aside>
Atau yang kedua:
<aside id="sidebar">
<div>
Ini Widget Pertama
</div>
<div>
Ini Widget Kedua
</div>
<div>
Ini Widget Ketiga
</div>
</aside>
Atau yang ketiga:
<div id="sidebar">
<aside>
Ini Widget Pertama
</aside>
<aside>
Ini Widget Kedua
</aside>
<aside>
Ini Widget Ketiga
</aside>
</aside>
Nah yang mana yang bener? <aside> didalamnya <aside> atau didalamnya <div> ,
atau<div> didalamnya <aside> ? Tidak ada dokumentasi yang pasti yang mana yang
benar, tetapi saya cenderung menggunakan yang ketiga, karena tingkatan <div> lebih luas
atau lebih tinggi levelnya daripada <aside> . Tetapi ya terserah Anda, karena semua
website yang sudah menggunakan HTML5 menggunakan ketiga cara tersebut.
<footer>
Yang terakhir adalah <footer> , sesuai namanya <footer> diletakkan dibagian bawah
website, tetapi kita tidak hanya menggunakannya diakhir website saja. Sama
seperti <header> dimana kita menggunakan <footer> dibagian akhir <article> .
Jadi intinya <footer> sama dengan <header> , hanya saja <footer> diakhir
sedangkan <header> diawal. Berikut ini contoh sederhana penggunaan footer diakhir
website:
<footer>
<p>Copyright 2011, Dhimas Ronggobramantyo</p>
Tag-tag lainnya
Sip, gampang kan? eits jangan senang dulu, itu tadi semua contoh tag -tag yang sering kita
gunakan, masih banyak lagi tag-tag lainnya yang lebih ajaib
seperti <canvas> , <audio> ,<video> , <summary> , <progress> , <datalist>
masih banyak lagi, lupa saya apa aja.
Tetapi yang utama dan penting-penting ya itu tadi yang sudah saya sebutin. Untuk yang
lainnya kapan-kapan kalau sempat saya buat artikel tersendiri, selamat mencoba, jika ada
yang salah silahkan didiskusikan di komentar dibawah.
[Update] 2011-11-09 11:00:00
<!--[if lt IE 9]>
<script
src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->