TUTORIAL HTML 5 - BAGIAN 1 ~ infoku.net

HTML5 vs (HTML 4 dan XHTML 1.1)

HTML5 adalah versi terbaru dari HTML. Versi terakhir HTML sebelum HTML5 adalah HTML 4.01. dan XHTML 1.1. Kali ini kita akan membahas apa saja fitur-fitur baru yang tersedia di dalam HTML5 serta perbedaannya dengan versi HTML sebelumnya.
Perkembangan HTML terhenti pada versi 4.01 di tahun 1999. W3C sebagai badan yang bertanggung jawab dalam standarisasi teknologi internet (termasuk HTML), kemudian beralih mengembangkan XHTML yang juga akhirnya menemui jalan buntu pada versi 2.0. Jika sebelumnya anda sudah terbiasa menggunakan HTML 4.01 ataupun XHTML 1.1, terdapat perubahan kecil pada HTML5.
Pada dasarnya HTML5 adalah gabungan ‘best practice‘ dari HTML 4.01 dan XHTML. Hampir semua tag atau elemen pada HTML 4.01 maupun XHTML 1.1 dapat digunakan dalam HTML5.

Beberapa perbedaan yang akan ditemukan dalam HTML5:

Penulisan doctipe pada HTML5 lebih sederhana. Mungkin inilah perbedaan paling mencolok dari halaman HTML yang ditulis menggunakan HTML5 atau tidak. Penulisan Doctype atau DTD pada HTML5 menjadi lebih sederhana: <!DOCTYPE html>.

Penulisan type atribut untuk tag <style> dan <script> tidak diperlukan pada HTML5. Hal ini karena secara default web browser akan menggunakan text/css untuk tag <style>, dan text/javascript untuk tag <script>. Sebagai contoh, untuk menggunakan external CSS, Pada HTML versi sebelumnya kita menuliskan tag <style> secara lengkap: <style type=”text/css”>…kode CSS… </style>, namun dalam HTML5 kita bisa membuatnya lebih sederhana: <style>…..kode CSS…..</style>

Penulisan meta tag karakter set (charset) pada HTML5 menjadi lebih sederhana: <meta charset=”utf-8″>, dibandingkan versi sebelumnya: <meta http-equiv=”content-type” content=”text/html;charset=UTF-8″ />.

Pada HTML5, tag yang berdiri sendiri (void element) tidak harus ditutup seperti dalam XHTML. Penulisan tag <br> (break) dapat ditulis dengan <br> maupun <br />.

Walaupun tidak dianjurkan, sebuah tag pada HTML5 boleh ditulis tanpa tag awal atau tanpa tag akhir. Sebagai contoh, kita tidak perlu menutup tag <p> dengan tag </p>.

Penulisan tag dan atribut adalah case-insensitive di dalam HTML5, sehingga tag <p> dan tag <P> akan dianggap sama. Hal ini berbeda dengan XHTML yang mengharuskan seluruh tag ditulis dalam huruf kecil.

Penulisan atribut tidak harus di dalam tanda kutip. Sebagai contoh: <p class=satu> adalah valid. Namun jika nilai atribut terdiri dari karakter spasi, maka tetap harus menggunakan tanda kutip, seperti: <p class=”satu dua tiga”>.

HTML5 mendukung multimedia secara langsung menggunakan tag <audio> dan <video>, sehingga kita tidak perlu tergantung kepada aplikasi pihak ke-3 seperti flash player.

HTML 5 hanya memiliki 1 versi, tidak seperti pendahulunya yang memiliki 3 versi (pada HTML 4 dan XHTML, anda akan menemukan versi strict, transitional, dan frameset).

Sebagai contoh, kode HTML berikut dinyatakan valid oleh validator HTML5 di http://validator.w3.org/:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>Tes Validasi HTML5</TITLE>

  <style>

    .penting {

      color:blue;

     }

  </style>

</head>

<BODY>

   <p CLASS=penting>Paragraf ini menggunakan atribut tanpa 

      menggunakan tanda kutip </p>

   <br>

   <p> Paragraf ini tidak memiliki penutup tag

</body>

</html>

Dari perbedaan diatas, terlihat bahwa HTML5 ‘lebih bebas‘ dari XHTML. Akan tetapi sebaiknya kita tetap menggunakan penulisan yang ‘rapi‘, seperti menggunakan huruf kecil untuk semua tag, menutup semua tag dan memberi tanda kutip dalam setiap nilai atribut.

XHTML5 : HTML5 “rasa” XML

Jika beberapa aturan diatas dirasa terlalu longgar (terutama jika anda banyak menggunakan XHTML sebelumnya), HTML5 memiliki ‘rasa‘ yang lebih ketat aturan, yakni XHTML5. Di dalam XHTML5, seluruh tag harus ditulis dengan huruf kecil, atribut harus berada di dalam tanda kutip, dan setiap tag harus ditutup.
XHTML5 bukanlah versi lain dari HTML5, akan tetapi hanya HTML5 dengan beberapa aturan dan syntax untuk memenuhi syarat XML.
Untuk menggunakan XHTML5, kita butuh menambahkan atribut xmlns=”http://www.w3.org/1999/xhtml” pada tag <html>, dan menggunakan MIME type: application/xhtml+xml pada http header (diset melalui web server).

Contoh dokumen XHTML5 adalah sebagai berikut:

<!DOCTYPE html>

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <title></title>

  <meta charset="UTF-8" />

  </head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg">

    <rect stroke="black" fill="blue" x="45px" y="45px"

    width="200px" height="100px" stroke-width="2" />

  </svg>

  </body>

</html>

Saat ini penggunaan XHTML5 tidak terlalu populer, karena memang lebih praktis menggunakan HTML5. XHTML5 akan berguna jika anda ingin menggunakan teknologi yang berbasis XML seperti SVG, MathML, Xlink, dll.

HTML5 vs HTML 5

Ya, judul tutorial ini tidaklah salah ketik. HTML5 dan HTML 5 adalah hal yang berbeda (perhatikan tanda spasi pemisah antara HTML dengan angka 5).
Perbedaan penulisan ini muncul karena terdapat 2 badan yang pada awalnya mengembangkan kelanjutan HTML. Yakni W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group).
W3C sebagai badan pembuat standarisasi HTML, tidak melanjutkan pengembangan HTML sejak HTML 4.01. W3C lebih memilih mengembangkan XHTML sebagai masa depan HTML. Namun karena XHTML ‘berhenti’ pada versi XHTML 2.0 dan tidak kunjung rampung, beberapa programmer web membuat badan independen yang disebut dengan WHATWG.

WHATWG dibentuk bukan sebagai pesaing W3C, tetapi sebagai organisasi lepas yang ingin membuat draft kelanjutan HTML 4.01 untuk selanjutnya diserahkan kepada W3C. WHATWG melakukan voting dan sepakat menamainya dengan HTML5 (tanpa spasi).
W3C menyadari bahwa XHTML 2.0 yang mereka kembangkan mengalami jalan buntu. Karena melihat banyak web browser sudah beralih menggunakan fitur HTML5 yang dikembangkan WHATWG, W3C kemudian membentuk HTML Working Group untuk mengikuti perkembangan HTML5. Versi kelanjutan HTML dari W3C ini disebut HTML 5 (dengan spasi !).

Kesepakatan akhir: HTML5

Sejak saat itu, terdapat 2 versi penulisan HTML, yakni HTML5 dan HTML 5. Perbedaan ini menjadi perbincangan menarik, bahkan di situs resmi WHATWG juga membahas tentang hal ini: https://blog.whatwg.org/spelling-html5.

Namun pada akhir cerita, kedua badan ini sepakat menamai versi HTML terakhir dengan HTML5 (tanpa spasi). Jadi, jika anda ingin menulis HTML versi terbaru, hati-hati dengan spasi :)

Dalam tutorial belajar HTML5 berikutnya, kita akan membahasnya di TUTORIAL Tutorial HTML5 bagian 2.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.