HTML5 mulai berkembang pada tahun 2011. Setelah Internet Explorer 9 rilis beberapa bulan lalu, maka semua browser utama seperti Internet Explorer, Firefox, Safari, Chrome dan Opera, telah mendukung HTML5 dan CSS3. Walaupun belum semua fungsi HTML5 dan CSS3 didukung sepenuhnya, tetapi tahun 2011 merupakan tahun lahirnya HTML5. Jadi tunggu apa lagi, Anda masih pakai XHTML? Atau mungkin masih menggunakan HTML4? Sebaiknya mulai belajar HTML5 karena ada banyak tag-tag baru yang sangat menarik. Disini akan dijelaskan beberapa tag yang baru saja dan yang paling banyak digunakan dalam melayout sebuah website.
<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>. Contoh :<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>.<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. Contoh :<section> <h1>Artikel Terbaru</h1> <article>Isi Teks Artikel 1</article> <article>Isi Teks Artikel 2</article> <article>Isi Teks Artikel 3</article> </section>
Bersambung …
Sumber : http://desain-pemrograman-web.blogspot.com/2011/12/belajar-html5-dasar-pengenalan-tag-tag.html
