Pada html5 ada beberapa tag html
baru, mari kita pelajari satu persatu kawan !
Struktur Wireframe Website HTML 5
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drop Down Menu</title>
<head>
<body>
Isi web disini
</body>
</html>
Sekarang lebih sederhana, cukup <!DOCTYPE html>. Nah untuk isinya saya akan memberitahu tag-tag yang
baru, nanti setiap kode berikutnya Anda masukkan didalam <body>.
<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>
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>
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>.
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 Dhimas pada
<time datetime="2011-11-23">Senin, 04 Mei 2015</time></p>
<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>
<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 2015, Muhammad</p>
Tag-tag
lainnya
Ada beberapa tag-tag lainnya yang belumbisa saya postingkan, kawan-kawan
bisa mempelajari selebihnya, yang diatas hanyalah tag yang sering digunakan,
semoga bermanfaat ya !
0 komentar:
Posting Komentar