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 padabrowsers 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:
