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 XHTML?
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.
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 XHTML 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 kehalaman-halaman 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>, <article> dan <time>
Sesuai namanya <article> digunakan untuk membungkus teks artikel atau teks utama
dalam halaman web kita. Kita boleh punya banyak tag <article>, misal saja komentar, nah setiap komentar kita bungkus
pakai <article> atau forum dan lain sebagainya. Apabila kita memiliki list
atau daftar <article>, misal blog, maka kita perlu membungkusnya dengan <section> jika ada elemen lain yang bukan <article> dan menerangkan tentang <article>
tersebut. Bingung? Langsung kecontoh:
<section>
<h1>Artikel
Terbaru</h1>
<article>Isi
Teks Artikel 1</article>
<article>Isi
Teks Artikel 2</article>
<article>Isi
Teks Artikel 3</article>
</section>
Jadi karena diantara kelompok-kelompok <article> ada tag <h1> maka kita tetap perlu membungkusnya dengan <section>.
<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, komentar, forum dan lain
sebagainya. <time> memiliki atribut datetime yang berisi waktu bisa
dalam format yyyy-mm-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
<figure> dan <figcaption>
<figure> digunakan sebagai pembungkus untuk tag <img>. Tetapi tidak selalu semua tag <img> kita bungkus dengan <figure>,
hanya gambar-gambar yang utama saja atau gambar-gambar yang ingin kita beri
label. Nah kita memberi labelnya dengan <figcaption>.
Oke langsung saja lihat contoh kodenya:
<figure>
<img
src="foto.jpg" alt="Foto Artis">
<figcaption>Ini
adalah foto artis yang saya ambil di kali</figcaption>
</figure>
Kira-kira kodenya seperti itu, kita
tinggal menstylenya dengan CSS saja sesuai keinginan kita. Oh iya kita bisa
memasang tag <a>, <strong>, <em> didalam <figcaption>
<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
Agar
HTML5 jalan di IE8, IE7 dan IE6
Ada yang kelupaan kemarin, bagaimana
agar HTML5 jalan di IE8, IE7 dan IE6? mengingat bahwa hanya Internet Explorer 9
saja yang support HTML5. Anda bisa menggunakan Javascript untuk melakukannya,
ada 2 yang menurut saya bagus yaitu Modernizr dan HTML5 Shiv.
Saya akan memberitahu yang HTML5 Shiv saja karena scriptnya lebih cepat dan
mudah. Tetapi jika Anda ingin agar browser IE lama support CSS3 maka gunakan
modernizr. Oke didalam header pasang saja kode seperti ini:
<!--[if lt IE 9]>
<script
src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Tidak ada komentar:
Posting Komentar