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.
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:
KODE PROGRAM
<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
