Struktur baru HTML 5

Saturday 13 October 2012

Struktur baru HTML 5

Saturday, October 13, 2012 Leave a Reply
Seperti layaknya buku, halaman web memiliki struktur seperti navigasi, konten, header, footer dan lain lain.berdasakan hal ini, WHATWG lalu menambahkan beberapa tag baru untuk mendukukng struktur tersebut. Bila pada HTML4 dan XHTML kita harus menggunakan <table> atau <div> untuk membagi struktur, maka pada HTML5 dapat menggunakan tag baru berikut:

Struktur baru HTML 5

<section> - sama fungsinya dengan <div>
<header> - isi konten header disini
<footer> - isi konten footer di sini
<nav> - membuat menu navigasi
<article> - konten artikel (teks, gambar, link)
<aside> - membuat sidebar atau float page
<figure> - meletakkaan gambar dalam artikel

Pada dasarnya, bentuk dasar HTML5 masih sama seperti struktur dasar dokumen HTML pada umumnya:
<!DOCTYPE HTML>
<html>
<body>
<header> isi bagian header (banner, menu, dan lain-lain)
                <nav> menu navigasi bisa disini </nav>
</header>
<section> <article> Selamat Datang </article> </section>
</body>
</html>
Meski demikian, kita masih bisa menggunakan tag HTML versi terdahulu seperti <div> , <table> , <p> dan lain sebagainya.

Inline Elemen Baru HTML5
Berikut adalah elemen baru yang dapat digunkan oleh HTML5.
<mark> - untuk menandai elemen (teks, gambar)
<time> - informasi waktu dan tanggal
<meter> - konten dengan media ukur (misalnya %)
<progress> - menginformasikan progress
HTML5 tidak hanya mendukung form input standar, ia juga memberikan beberapa tipe input baru seperti datetime, month, week, number, range, email dan url.

Fitur Canggih HTML5
Dari banyaknya hal-hal baru yang ditawarkan HTML5 berikut adalah beberapa yang paling canggih:
  • Canvas Elemen:
Dengan tag <canvas>, area tersebut dapat digunakan untuk menggambar grafik secara dinamis menggunakan javascript. Misalnya seperti shape lingkaran, garis diagonal, hingga grafik 3 dimensi.
  • Video & Audio Elemen:
Sebelum HTML5, menyisipkan video atau audio dalam HTML memerlukan bantuan plugin pihak ketiga seperti Apple Quicktime atau Adobe Flash. Dalam HTML5, cukup gunakan tag <video> untuk menyisipkan file  video, dan <audio> untuk file audio.
  • Geolocation:
Melacak posisi user bukanlah hal baru di internet, misalnya menggunakan IP addres detection. Namun metode ini tidak selalu dapat diandalkan. Dengan HTML5 dan javascript, posisi user dapat dilacak menggunakan informasi dari Wi-Fi dan GPS. Mirip seperti yang digunakan pada Smartphone.
  • Offline Web Application
HTML5 memungkinkan User untuk terus berinteraksi dengan aplikasi web tanpa harus selalu online. Misalnya mengedit dokumen pada google docs atau mengedit foto di situs olah gambar seperti picnic.com

Dan masih banyak fitur baru lainnya seperti kemampuan untuk Drag and Drop, text api, datagrid, Cross document mesaging, SVG elemen dan lainnya.

0 komentar:

Silakan Gunakan Kolom berikut Untuk Bertanya Lebih lanjut"! Salam KELUARGA BESAR O-KAO!