TUTORIAL HTML5
Elemen-elemen Baru di HTML5 :
- Elemen <canvas> untuk menggambar 2D
- Elemen <video> dan <audio> untuk media player
- Support local storage
- Konten spesifik elemen baru, seperti <article>, <footer>, <header>, <nav>, <section>
- Kontrol form baru, seperti kalender, tanggal, waktu, email, url, search
Berikut daftar beberapa tag yang baru pada HTML versi 5:
Tag
|
Penjelasan
|
<video>
|
Untuk memasukan
video (webm,mp4)
|
<audio>
|
Untuk memasukan
audio
|
<canvas>
|
Untuk manipulasi
gambar dengan script
|
<source>
|
Beberapa sumber dari
audio atau video
|
<track>
|
Teks untuk elemen
video atau audio
|
<article>
|
Mendefinisikan
konten dari tag tersebut merupakan sebuah artikel
|
<aside>
|
Merupakan konten
yang berada disamping (selain konten utama)
|
<command>
|
Sebuah command yang
bisa di-invoke oleh user.
|
<details>
|
Detail tambahan yang
bisa dilihat/disembunyikan dari pembaca.
|
<dialog>
|
Mendefinisikan
sebuah dialog atau window
|
<summary>
|
Heading untuk elemen
<details>
|
<figure>
|
Berisi konten yang
dibuat sendiri.
|
<figcaption>
|
Caption untuk elemen
<figure>
|
<footer>
|
Footer dari dokumen
HTML atau <section>
|
<header>
|
Header dari
dokumen HTML atau <section>
|
<hgroup>
|
Kumpulan grup dari
elemen <h1> sampe <h6> ketika struktur dokumen memiliki heading
multilevel
|
<mark>
|
Teks yang ditandai
|
<meter>
|
Menampilkan ukuran
|
<nav>
|
Navigasi link
|
<progress>
|
Representasi dari
proses
|
<section>
|
section di dalam
dokumen HTML
|
<time>
|
Memuat tanggal atau
waktu
|
<wbr>
|
Possible line-break
|
Tag HTML yang dihapus dari versi HTML
sebelumnya
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
Juga elemen saperti <blink>, <marquee>, <multicol>, <tt> juga telah ditinggalkan penggunaanya di struktur HTML5.
Selain elemen-elemen diatas ada juga fitur "conforming" pada HTML5, seperti penggunaan attribut pada elemen tertentu.
Attribut baru HTML 5 antara lain:
| Tag | Description |
|---|---|
| draggable | Menentukan apakah suatu unsur adalah draggable atau tidak |
| contextmenu | Menentukan menu konteks untuk suatu elemen. Menu konteks muncul ketika pengguna mengklik kanan pada elemen |
| hidden | Menentukan bahwa elemen belum, atau tidak lagi, relevan |
| spellcheck | Mendefinisikan posisi teks dicenter |
| dropzone | Mendefinisikan direktori list |
| contenteditable | Mendefinisikan font, warna, dan ukuran untuk teks |
| itemprop | Digunakan untuk group item |
Pada HTML 5 penulisan atribut hanya dapat ditentukan pada tag awal dan tidak boleh digunakan dalam tag akhir. Atribut HTML5 adalah case sensitif dan dapat juga ditulis dalam huruf besar semua atau mix, akan tetapi konvensi yang paling umum adalah tetap menggunakan huruf kecil.
Berikut adalah contoh penulisan dari atribut HTML5 yang menggambarkan bagaimana untuk menandai sebuah elemen divdengan atribut class dengan menggunakan nilai "contoh":
<div class="contoh">...</div>
Sebuah fitur baru yang juga diperkenalkan di HTML 5 adalah penambahan atribut data kustom (Custom Attributes).
Sebuah atribut data kustom dimulai dengan data- dan akan diberi nama berdasarkan kebutuhan Anda. Berikut adalah contoh sederhana :
<div class="contoh" data-subject="physics" data-level="complex">... </div>
Contoh diatas adalah penulisan attribut yang valid HTML5 dengan dua atribut khusus yang disebut data-subjek dan data-level. Anda akan bisa mendapatkan nilai-nilai dari atribut dengan menggunakan JavaScript API atau CSS dengan cara yang sama seperti yang Anda gunakan untuk atribut standar.
Browser Support
Versi terbaru dari Apple Safari, Google Chrome, Mozilla Firefox, dan Opera semua mendukung hampir semua fitur HTML5 dan Internet Explorer 9.0 juga akan support untuk beberapa fungsi HTML5.
Browser web mobile pre-instal pada iPhone, iPads, dan Android semua support sangat baik untuk HTML5.
* Untuk referensi lengkap HTML 5, kunjungi : www.w3schools.com
Selanjutnya>>
Tutorial HTML Halaman 12
Tidak ada komentar:
Posting Komentar
Silahkan isi komentar Anda pada kolom komentar di bawah ini atau dengan kolom komentar Facebook pada bagian atas ini.
Berkomentarlah dengan sehat! Dilarang membuat komentar dengan isi yang mengandung spam, sara, pornografi, politik, iklan, dan diluar norma yang berlaku. Thanks.