Berkenalan Dengan HTML 5
This idea is posted in
Walaupun spesifikasi HTML 5 masih dalam bentuk draft, namun telah digunakan secara luas oleh beberapa web designer di seluruh dunia. Kehadiran HTML 5 memang sangat dinantikan oleh para web designer di seluruh dunia, selain tentu saja CSS 3. Hal ini tidak mengherankan jika melihat feature baru yang disediakan oleh HTML 5. Salah satunya adalah tag video, yang mana dapat digunakan untuk menyertakan video ke dalam halaman web tanpa menggunakan Flash.
Di dalam artikel ini kami akan mencoba untuk memperkenalkan beberapa tag baru HTML 5 sehingga dapat membantu bagi anda yang mengalami kesulitan dalam memulai memasuki dunia HTML 5. Walaupun dari setiap tag akan dijelaskan secara singkat, namun semoga tetap dapat memberikan pencerahan bagi kita semua.
header
Kita mulai saja perkenalan kita terhadap HTML 5 dengan mempelajari elemen header. Elemen header digunakan untuk menggambarkan header suatu halaman web atau bagian halaman web. Header dapat berupa konten pendahuluan atau daftar isi/navigasi.
Untuk ukuran halaman web secara keseluruhan elemen header dapat berupa Judul situs, pendahuluan atau navigasi situs web. Seperti contoh di bawah ini,
...
<body>
<header>
<h1>iznyndotcom</h1>
<div id="welcome">
<p>Selamat datang di iznyndotcom, tempat anda menemukan banyak hal tentang Web Design</p>
</div>
<ul>
<li><a href="http://iznyn.com/">Home</a></li>
<li><a href="http://iznyn.com/about/">About</a></li>
<li><a href="http://iznyn.com/contact/">Contact</a></li>
</ul>
</header>
...
Elemen header dapat juga digunakan di dalam suatu bagian dari halaman web, berikut adalah contoh penggunaan pada suatu blog post.
...
<article class="hentry">
<header>
<h1 class="entry-title">Berkenalan Dengan HTML 5</h1>
<h2>Table Of Contens</h2>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#new-tags">New Tags</a></li>
<li><a href="#example">Example</a></li>
</ul>
</header>
...
</article>
footer
Elemen footer digunakan untuk menggambarkan footer dari suatu bab atau keseluruhan dokumen. Footer biasanya berisi tentang info penulis, tanggal ditulis, link yang berhubungan dengan dokumen, copyright, dsb.
Berikut ini adalah dua contoh penggunaan elemen footer di dalam suatu situs dan di bagian blog post.
Di dalam situs
... <body> ... <footer> <p>Copyright © 2010 by iznyndotcom</p> </footer> </body> </html>
Di dalam blog post
...
<article class="hentry">
<h1>Berkenalan Dengan HTML 5</h1>
<footer>
<p>Author by Iznyn</p>
<p>In 12 January 2010</p>
<p>Saved under : Web Design</p>
</footer>
...
</article>
Contoh diatas juga menunjukkan bahwa suatu footer tidak selalu harus dibagian akhir dari bagian konten.
section
Elemen section digunakan untuk menggambarkan section dari dokumen. Dalam pengertian yang lebih sederhana section merupakan kumpulan konten atau tulisan dengan sebuah judul. Untuk mempermudah pemahaman, section dapat dibayangkan sebagai bab di dalam suatu karya tulis.
Di dalam halaman depan suatu website, dapat dibagi menjadi beberapa section seperti konten pembuka, beberapa blog post, informasi kontak.
Berikut ini contoh penggunaan elemen section,
<article class="hentry">
<h1>Berkenalan Dengan HTML 5</h1>
<section>
<h1>Elemen Header</h1>
<p>Elemen header digunakan untuk menggambarkan header suatu halaman web atau bagian halaman web.</p>
</section>
<section>
<h1>Elemen footer</h1>
<p>Elemen footer digunakan untuk menggambarkan footer dari suatu bab atau keseluruhan dokumen.</p>
</section>
...
</article>
Adanya elemen section memberikan keleluasaan dalam menentukan elemen header ( h1 – h6 ). Ketika kita menentukan suatu header maka elemen tersebut akan membentuk suatu rangkaian kedalaman header baru. Jadi pada contoh sebelumnya, <h1>Elemen Header</h1> dan <h1>Berkenalan Dengan HTML 5</h1> walaupun menggunakan elemen header sama (h1) tetap memiliki kedalaman yang berbeda.
article
Berikut penjelasan tentang elemen article di dalam W3C spesification.
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Html5doctor memperjelas penggunaan elemen article ini untuk menggambarkan suatu konten yang tidak berhubungan dengan konten lain (independent) dan sesuai untuk diletakkan pada suatu feed reader.
Berikut contoh penggunaan elemen article pada suatu blog post.
<article>
<h1>Berkenalan Dengan HTML 5</h1>
<footer>
<p>Author by Iznyn</p>
<p>In 12 January 2010</p>
<p>Saved under : Web Design</p>
</footer>
<section>
<h1>Elemen Header</h1>
<p>Elemen header digunakan untuk menggambarkan header suatu halaman web atau bagian halaman web.</p>
</section>
<section>
<h1>Elemen footer</h1>
<p>Elemen footer digunakan untuk menggambarkan footer dari suatu bab atau keseluruhan dokumen.</p>
</section>
</article>
hgroup
Elemen hgroup digunakan untuk mengelompokkan elemen hn (h1 – h6) ketika heading mempunyai beberapa kedalaman, seperti subheadings, alternative titles, atau taglines.
Berikut contoh penggunaan elemen hgroup
<article>
<hgroup>
<h1>Berkenalan Dengan HTML 5</h1>
<h2>Dasar-dasar Elemen Baru HTML 5</h2>
</hgroup>
...
</article>
nav
Elemen nav digunakan untuk menggambarkan suatu konten yang menghubungkan ke halaman lain atau bagian lain dalam halaman yang sama. Elemen ini paling sesuai untuk membentuk semantic navigation seperti menu situs web atau daftar isi suatu konten.
Berikut contoh penggunaan elemen nav,
...
<body>
<header>
<h1>iznyndotcom</h1>
<div id="welcome">
<p>Selamat datang di iznyndotcom, tempat anda menemukan banyak hal tentang Web Design</p>
</div>
<nav>
<ul>
<li><a href="http://iznyn.com/">Home</a></li>
<li><a href="http://iznyn.com/about/">About</a></li>
<li><a href="http://iznyn.com/work/">Work</a></li>
<li><a href="http://iznyn.com/blog/">Blog</a></li>
<li><a href="http://iznyn.com/contact/">Contact</a></li>
</ul>
</nav>
</header>
...
aside
Elemen aside digunakan untuk menggambarkan suatu bagian dari dokumen yang berhubungan dengan konten didekatnya namun dapat dipertimbangkan terpisah dari konten tersebut. Contoh penggunaan elemen aside di dalam halaman web adalah sidebar. Suatu sidebar mengandung konten yang berhubungan dengan halaman web, seperti profil, kontak, favorite links dsb. Namun demikian dia dapat terpisah dari konten lainnya di dalam halaman web yang sama.
Berikut contoh penggunaan elemen aside,
...
<header>
<h1>iznyndotcom</h1>
<nav>
<ul>
<li><a href="http://iznyn.com/">Home</a></li>
<li><a href="http://iznyn.com/about/">About</a></li>
</ul>
</nav>
</header>
<aside>
<div>
<h1>About Me</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<nav>
<h1>Archives</h1>
<ul>
<li><a href"/">New Post</li>
<li><a href"/">Old Post</li>
</ul>
</nav>
</aside>
<section>
<h1>Lastest Posts</h1>
<article>
<h1>New Post</h1>
<p>This is new post.</p>
</article>
<article>
<h1>Old Post</h1>
<p>This is old post.</p>
</article>
</section>
<footer>
<p>Copyright © 2010 by Iznyn</p>
</footer>
...
Browser Support
Pada saat article ini, HTML 5 didalam spesifikasi W3C masih dalam bentuk draft. Untuk itu support terhadap elemen-elemen baru HTML 5 belum didukung oleh sebagian besar web browser. Untuk membuktikan hal ini, silahkan jalankan kode berikut di browser anda.
<!DOCTYPE html>
<html>
<head>
<title>Test HTML 5</title>
<style type="text/css">
header { background-color: red; color: blue; }
</style>
</head>
<body>
<section>
<header>
<h1>Hello World</h1>
</header>
</section>
</body>
</html>
Dari kode tersebut jika terlihat background warna merah, berarti web browser anda telah support terhadap elemen baru HTML 5. Jika tidak maka anda perlu menggunakan sedikit hack sehingga elemen-elemen tersebut dapat dimanipulasi dengan CSS. Sebenarnya solusinya cukup sederhana, anda cukup menentukan attribute display dari setiap elemen HTML 5 yang akan digunakan, seperti :
header, hgroup, section, article, nav, aside { display: block; }
Untuk IE disini ada kondisi khusus, dimana solusi diatas tetap tidak bekerja. Salah satu solusi yang dapat digunakan untuk memungkinkan penggunaan elemen HTML 5 di IE adalah menggunakan javascript seperti yang diperkenalkan oleh remy sharp's.
Penutup
Itu tadi hanyalah beberapa elemen HTML 5 dasar yang dapat kami jelaskan disini, walaupun tidak semua elemen baru HTML 5 kami jelaskan termasuk elemen time dan video, namun kami harapkan dapat sedikit menambah pengetahuan tentang teknologi baru ini.
This idea is saved under :
Tagged in :
6 Comments
Join Discussion
Comments are moderated and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise !
Windows 7 blog, 15 October 2010, 17:07
HTML 5, keren banget yaaa…
o ya, salam kenal yaa
Permalink / Replay
Abang Trezz, 16 September 2010, 17:49
wah keren nih mas,, bru aja bljr HTML (newbie),, eh skrang udah ada HTML5,, ane musti belajar lagi…
Salam Kenal ya mas…
Permalink / Replay
Arif R., 26 August 2010, 19:32
memang kemajuan teknologi sangat pesat, termasuk juga css dan html, untuk lebih dapat meningkatkan performa suatu website maka perubahan-perubahan yang positif itu perlu dilakukan, salam kenal mas, juga tolong sampaikan salamku buta HTML 5
Permalink / Replay
iznyn, 27 August 2010, 09:26
Salam kenal juga bung. Ok deh ntar salamnya tak sampaiin.
Permalink / Replay
adiputra, 14 August 2010, 10:43
nice,,udah mulai ya html 5…
wah mesti migrasi lagi ne mas,,
makasih tutornya..
ta save ya…
salam kenal seblumnya..:D
Permalink / Replay
iznyn, 14 August 2010, 16:28
Walaupun efeknya belum dapat dirasakan secara langsung namun paling tidak dengan melakukan pembelajaran secara dini dapat mempersiapkan diri dimasa depan nanti.
Salam kenal juga
Permalink / Replay