HTML5 adalah revisi kelima sekaligus
versi terakhir dari HTML dan XHTML. HTML5 merupakan salah satu karya World
Wide Web Consortium (W3C) untuk mendefinisikan sebuah bahasa markah tunggal
yang dapat ditulis dengan cara HTML ataupun XHTML. Tujuan utama pengembangan
HTML5 adalah untuk memperbaiki teknologi HTML agar
mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia, serta mudah
dimengerti oleh mesin.
Pada HTML5 diperkenalkan beberapa
elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern.
Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang
umum digunakan: yaitu elemen (<div>)
dan inline (<span>).
Sebagai contoh, (<span>)
(sebagai blok navigasi website) dan <footer>
(biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari
kode html). Banyak elemen lain yang memberikan kegunaan baru melalui interface yang telah distandarkan,
seperti elemen multimedia <audio>
dan <video>.
Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen
presentasi semata seperti <font>
dan <center>,
yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).
Untuk menambah keluwesan
pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs). Beberapa APIs terbaru
pada HTML5 antara lain:
- Elemen <canvas>, sebagai mode untuk menggambar objek dua dimensi (2D).
- Elemen <video> dan <audio> untuk media pemutaran (timed media playback)
- Penyuntingan dokumen
- Dukungan untuk penyimpanan lokal
- Adanya elemen untuk konten-spesifik, seperti <article>, <footer>, <header>, <nav>, dan <section>
- Drag and Drop
- Cross-document messaging
Berikut ini merupakan kode-kode atau elemen-elemen
dari HTML5:
<!--...-->
<!DOCTYPE>
<a>
<abbr>
<address>
<area>
<article>
<aside>
<audio>
<b>
<base>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen>
<label>
<legend>
<li>
<link>
<mark>
<map>
<menu>
<meta>
<meter>
<nav>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<ruby>
<rp>
<rt>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<ul>
<var>
<video>
<wbr>
HTML5
juga menawarkan elemen-elemen semantik yang dapat digunakan untuk mendapatkan
struktur yang lebih baik. Elemen-elemen semantik baru tersebut adalah:
|
Tag
|
Deskripsi
|
|
<article>
|
Mendefinisikan sebuah artikel. Artikel merupakan
bagian independen dari isi dokumen, seperti blog entry atau artikel koran.
|
|
<aside>
|
Mendefinisikan isi selain dari konten halaman.
|
|
<bdi>
|
Mengisolasi bagian dari teks yang dapat diformat
dalam arahan yang berbeda dari teks lain di luar itu.
|
|
<command>
|
Mendefinisikan sebuah tombol perintah dimana
pengguna dapat
|
|
<details>
|
Mendefinisikan rincian tambahan, dimana pengguna
dapat melihat atau menyembunyikannya.
|
|
<summary>
|
Mendefinisikan sebuah judul yang dapat dilihat untuk
elemen <details>.
|
|
<figure>
|
Menjelaskan konten-konten mandiri, seperti
ilustrasi, diagram, foto, dan sebagainya.
|
|
<figcaption>
|
Mendefinisikan sebuah caption untuk elemen <figure>.
|
|
<footer>
|
Mendefinisikan footer
untuk dokumen.
|
|
<header>
|
Mendefinisikan header
untuk dokumen.
|
|
<hgroup>
|
Kumpulan dari serangkaian elemen <h1> hingga <h6>
ketika heading memiliki beberapa tingkatan.
|
|
<mark>
|
Mendefinisikan teks yang ditandai atau disorot.
|
|
<meter>
|
Mendefinisikan pengukuran skalar dalam kisaran yang
dikenal (gauge).
|
|
<nav>
|
Mendefinisikan hubungan (link) navigasi.
|
|
<progress>
|
Merepresentasikan kemajuan dari suatu tugas.
|
|
<ruby>
|
Mendefinisikan sebuah anotasi ruby (untuk tipografi Asia Timur).
|
|
<rt>
|
Mendefinisikan penjelasan atau pengucapan
(pelafalan) karakter (untuk tipografi Asia Timur)
|
|
<rp>
|
Mendefinisikan apa yang harus ditampilkan pada browsers yang tidak mendukung anotasi ruby.
|
|
<section>
|
Mendefinisikan suatu bagian dalam dokumen.
|
|
<time>
|
Mendefinisikan tanggal ataupun waktu.
|
|
<wbr>
|
Mendefinisikan garis pemisah (line-break) yang mungkin.
|
Selain
itu, HTML5 juga menawarkan beberapa elemen baru untuk konten media, yaitu:
|
Tag
|
Deskripsi
|
|
<audio>
|
Mendefinisikan konten suara.
|
|
<video>
|
Mendefinisikan sebuah video atau film.
|
|
<source>
|
Mendefinisikan beberapa sumber daya media untuk <video> dan <audio>.
|
|
<embed>
|
Mendefinisikan wadah untuk aplikasi eksternal atau
konten interaktif (plug-in).
|
|
<track>
|
Mendefinisikan teks untuk trek <video> dan <audio>.
|
Pada
HTML5 juga terdapat suatu elemen yang baru, yaitu elemen <canvas>. Elemen <canvas> ini merupakan elemen yang
digunakan untuk menggambar grafik atau objek 2 dimensi (2D) dengan cepat
melalui scripting (dengan JavaScript).
HTML5
juga menawarkan beberapa elemen baru lainnya, antara lain:
|
Tag
|
Deskripsi
|
|
<datalist>
|
Menentukan daftar pilihan yang telah ditentukan
untuk kontrol masukan (input).
|
|
<keygen>
|
Defines a key-pair generator field (for forms).
|
|
<output>
|
Mendefinisikan hasil perhitungan.
|
Di samping
itu, terdapat pula beberapa elemen yang dihapuskan dari HTML5 yang sebelumnya terdapat
pada HTML 4.01. Elemen-elemen yang dihapuskan tersebut, antara lain:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
- <u>
Nah, bagaimana ulasan mengenai HTML5
di atas?
Apabila kalian masih merasa
penasaran dan ingin mempelajari HTML5 lebih lanjut, kalian dapat mengunjungi
blog tutorial HTML5 ini. Namun, jangan hanya dibaca saja ya teman, tapi cobalah
menerapkan HTML5 di blog kalian masing-masing. Pokoknya, practice makes perfect deh!
Selamat mencoba, ya!
Nah, jika kalian sudah bisa,
alangkah baiknya jika HTML5 kalian terapkan dalam blog atau situs web untuk
bisnis online. Dijamin deh situs web
atau blog kalian akan semakin keren. Untuk semakin menambah wawasan kalian
mengenai e-commerce, jangan lupa
untuk mengunjungi blog e-commerce lecture
ini ya!
Sumber:
Tidak ada komentar:
Posting Komentar