Perbedaan HTML5 dengan HTML 4 dan XHTML 1

belajar HTML dan CSS untuk pemula

Dalam tutorial pertama terkait HTML5, kita akan membicarakan mengenai perbedaan antara HTML5 dengan HTML 4 dan XHTML 1.

Tutorial saat ini ditujukan untuk kamu yang pernah memakai HTML 4.01 ataupun XHTML 1.1 sebelumnya. Bila terdapat sejumlah penjelasan yang belum dipahami silahkan abaikan saja, sebab kita akan mendiskusikannya secara lebih mendalam dalam tutorial-tutorial HTML5 berikutnya.

HTML5 vs HTML 4 dan XHTML 1

HTML5 ialah versi paling baru dari HTML. Versi terakhir HTML sebelum HTML5 ialah HTML 4.01. dan XHTML 1.1. Saat ini kita akan mengulas apa saja fitur-fitur baru yang disediakan di dalam HTML5 serta perbedaannya dengan versi HTML sebelumnya.

Perkembangan HTML terhenti pada versi 4.01 pada 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. Bila sebelumnya kamu telah terbiasa memakai HTML 4.01 maupun XHTML 1.1, terdapat perubahan kecil pada HTML5.

Pada hakikatnya HTML5 ialah gabungan ‘best practice‘ dari HTML 4.01 dan XHTML. Hampir seluruh tag atau elemen pada HTML 4.01 ataupun XHTML 1.1 bisa dipakai dalam HTML5.

Beberapa perbedaan yang akan didapati dalam HTML5:
  • Penulisan doctipe pada HTML5 lebih sederhana. Mungkin inilah perbedaan paling mencolok dari halaman HTML yang ditulis memakai HTML5 atau tidak. Penulisan Doctype atau DTD pada HTML5 jadi lebih sederhana: <!DOCTYPE html>.
  • Penulisan type atribut untuk tag <style> dan <script> tidak dibutuhkan pada HTML5. Hal ini sebab secara default web browser akan memakai text/css untuk tag <style>, dan text/javascript untuk tag <script>. Sebagai contoh, untuk memakai external CSS, Pada HTML versi sebelumnya kita menuliskan tag <style> secara lengkap: <style type=”text/css”>…kode CSS… </style>, tetapi dalam HTML5 kita dapat membuatnya lebih sederhana: <style>…..kode CSS…..</style>
  • Penulisan meta tag karakter set (charset) pada HTML5 jadi 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 mesti ditutup seperti dalam XHTML. Penulisan tag <br> (break) bisa ditulis dengan <br> ataupun <br />.
  • Meskipun tidak disarankan, sebuah tag pada HTML5 bisa ditulis tanpa tag awal atau tanpa tag akhir. Sebagai contoh, kita tidak mesti menutup tag <p> dengan tag </p>.
  • Penulisan tag dan atribut ialah case-insensitive di dalam HTML5, sehingga tag <p> dan tag <P> akan dianggap sama. Hal ini beda dengan XHTML yang mengharuskan seluruh tag ditulis dalam huruf kecil.
  • Penulisan atribut tidak mesti di dalam tanda kutip. Sebagai contoh: <p class=satu> ialah valid. Tetapi bila nilai atribut terdiri atas karakter spasi, maka tetap harus memakai tanda kutip, seperti: <p class=”satu dua tiga”>.
  • HTML5 mendukung multimedia secara langsung memakai tag <audio> dan <video>, sehingga kita tidak mesti bergantung kepada aplikasi pihak ketiga seperti flash player.
  • HTML 5 cuma mempunyai 1 versi, tidak seperti pendahulunya yang mempunyai 3 versi (pada HTML 4 dan XHTML, kamu akan mendapatkan 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 
</style>
</head>
<BODY>
<p CLASS=penting>Paragraf ini memakai atribut tanpa 
memakai tanda kutip </p>
<br>
<p> Paragraf ini tidak mempunyai penutup tag
</body>
</html>

Dari perbedaan diatas, tampak bahwa HTML5 ‘lebih bebas‘ dari XHTML. Namun disarankan kita tetap memakai penulisan yang ‘rapi‘, seperti memakai huruf kecil bagi semua tag, menutup seluruh tag dan memberi tanda kutip dalam setiap nilai atribut.

XHTML5 : HTML5 “rasa” XML

Bila beberapa aturan diatas dirasa terlalu longgar (terutama bila kamu banyak memakai XHTML sebelumnya), HTML5 mempunyai ‘rasa‘ yang lebih ketat aturan, yaitu XHTML5. Di dalam XHTML5, seluruh tag harus ditulis dengan huruf kecil, atribut harus berada di dalam tanda kutip, dan tiap tag harus ditutup.

XHTML5 bukanlah versi lain dari HTML5, namun cuma HTML5 dengan beberapa aturan dan syntax untuk memenuhi syarat XML.

Untuk memakai XHTML5, kita perlu menambahkan atribut xmlns=”http://www.w3.org/1999/xhtml” pada tag <html>, dan memakai MIME type: application/xhtml+xml pada http header (diset melalui web server).

Contoh dokumen XHTML5 yaitu 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>

Sekarang ini pemakaian XHTML5 tak terlalu populer, sebab memang lebih praktis memakai HTML5. XHTML5 akan berguna bila kamu mau memakai teknologi yang berbasis XML seperti SVG, MathML, Xlink, dll.

Dalam tutorial belajar HTML5 saat ini kita sudah membicarakan mengenai HTML5, HTML4, dan XHTML. Tetapi bila kamu perhatikan, penulisan HTML5 ditulis tanpa memakai spasi antara huruf HTML dengan angka 5. Mengapa harus demikian? kita akan mendiskusikannya dalam tutorial HTML5 selanjutnya: Perbedaan antara HTML5 dengan HTML 5.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *