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.
Nah, untuk menandai bahwa text yang kita buat adalah HTML5 itu mudah, jika dibandingkan dengan versi lalu XHTML ataupun HTML4 mungkin terlihat ribet dan bikin males karena panjang. Sekarang untuk HTML5 cukup dengan diawali atau dimulai dengan tag <!DOCTYPE html>, simple kan? Itulah kelebihan dari HTML5 dan perubahan tag-tag yang sebelumnya.
<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 selalu di 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 lainlain.
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, berikutnya 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 Hero Fazry pada <time datetime="2012-11-13">
Minggu, 13 November 2012</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 2012, Nama Blog</p>.
Oke mudah kan belajar HTML5? Lebih simple dan gampang dicerna kan, kalo gitu langusng aja di praktekkan membuat website kamu sendiri dan terus mencoba sampai berhasil 100%. Tetap semangat dan happy coding.
Oh ya, mungkin penjelasan saya berikutnya tentang CSS3 jadi tunggu saja kelanjutannya. Bye.
Salam Web Designer.
BANTU MENINGKATKAN SELERA ANAK 2 TAHUN BERSAMA BONNISAN HIMALAYA
4 tahun yang lalu
Postingan
0 komentar:
Posting Komentar