Belajar HTML5 Dasar – Pengenalan Tag-tag HTML5 baru
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:
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Drop Down Menu</title><head><body>Isi web disini</body></html> |
<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:
1
2
3
4
5
6
| <header id="main-header"><hgroup><h1>Ini Website HTML5 pertama saya</h1><h2>Dan juga yang terakhir karena saya bingung</h2></hgroup></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:
1
2
3
4
5
6
7
| <nav id="main-nav"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></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:
1
2
3
4
5
6
| <section><h1>Artikel Terbaru</h1><article>Isi Teks Artikel 1</article><article>Isi Teks Artikel 2</article><article>Isi Teks Artikel 3</article></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:
1
| <p>Ditulis oleh Dhimas pada <time datetime="2011-11-23">Senin Pahing, 23 November 2011</time></p> |
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:
1
2
3
4
| <figure><img src="foto.jpg" alt="Foto Artis"><figcaption>Ini adalah foto artis yang saya ambil di kali</figcaption></figure> |
<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 WordPressbiasanya widget. Nah terus kode nya seperti apa? Ada 3 kemungkinan, yang pertama:
1
2
3
4
5
6
7
8
9
10
11
| <aside id="sidebar"><aside>Ini Widget Pertama</aside><aside>Ini Widget Kedua</aside><aside>Ini Widget Ketiga</aside></aside> |
1
2
3
4
5
6
7
8
9
10
11
| <aside id="sidebar"><div>Ini Widget Pertama</div><div>Ini Widget Kedua</div><div>Ini Widget Ketiga</div></aside> |
1
2
3
4
5
6
7
8
9
10
11
| <div id="sidebar"><aside>Ini Widget Pertama</aside><aside>Ini Widget Kedua</aside><aside>Ini Widget Ketiga</aside></div> |
<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:
1
2
3
| <footer><p>Copyright 2014, Dhimas Ronggobramantyo</p></footer> |
mantap dah artikelnya kawan...
BalasHapushttp://oplosanessen.com