Mengenal HTML5 dan Perbedaannya dengan HTML4

Akhir tahun 2014 lalu, HTML5 sudah rampung. Sebagian besar browser yang ada saat ini sudah mendukung HTML5. HTML5 dibuat lebih semantik dibandingkan dengan versi HTML sebelumnya. HTML5 adalah masa depan dunia website berikutnya.

Bisa kamu cek, sekarang ini sebagian besar website menggunakan HTML5. Mungkin kamu bingung apa yang membedakan HTML5 dengan HTML4. Saya akan mengulas beberapa perbedaannya di entri kali ini.

HTML5 Lebih Semantik

Jika kamu terbiasa menggunakan div id="blabla", maka pada HTML5 element HTML langsung ditulis sesuai dengan kegunaannya. Berikut ini adalah contoh perubahan besar dari HTML4 ke HTML5. Pada bagian kiri format penulisan HTML4, sedangkan pada bagian kanan format penulisan HTML5.

HTML4	HTML5
<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div id="post">	<article>
<div id="footer">	<footer>

Selain itu, format penulisan jenis dokumen dan pengkodean lebih sederhana.

HTML4	HTML5
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">	<meta charset="utf-8">

Karena tidak semua browser mendukung HTML5, terutama Internet Explorer, maka untuk menanggulangi hal itu dipakailah HTML5Shiv. Fungsinya adalah untuk menerjemahkan elemen HTML5 yang tidak didukung menjadi DIV. Berikut ini adalah kode yang harus ditambahkan pada bagian heading sebuah dokumen HTML5.

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

Berikutnya adalah perbedaan penggunaan <section>, <article>, dan <div> dalam sebuah halaman HTML5.

Beda dan Fungsi <section>, <article>, dan <div>

Bagi orang yang baru saja mengenal HTML5, biasanya kesulitan menentukan kapan <section>, <article>, dan <div> digunakan. Tidak ada standar harus menaruh <div> di dalam <section> atau sebaliknya. Hanya saja, kamu harus memahami kapan <section>, <article>, dan <div> digunakan. <section> digunakan untuk mendefinisikan bagian tertentu. Misalkan dalam sebuah halaman saya mempunyai dua bagian, yaitu "main" dan "sidebar", maka saya tulis seperti ini.

<section>

  <article></article>

</section>

<section>

  <aside></aside>

</section>

<aside> digunakan untuk mendefinisikan "sidebar", sedangkan <article> untuk mendefinisikan "main" yang berisi artikel. Namun, di dalam sebuah <article>-pun bisa terdapat <section>. Berikut ini adalah contohnya.

<article>

  <section>

    <h1>Judul Artikel</h1>

    <p>Pada suatu hari hiduplah seorang ... </p>

  </section>

  <section>

    <h1>Judul Artikel Kedua</h1>

    <p>Walaupun dia tidak mengerti ... </p>

  </section>

</article>

Selanjutnya, adalah tentang penulisan kode yang benar dan sesuai gaya HTML5.

Gaya Penulisan Kode HTML5

Setiap bahasa pemrograman tentu mempunyai gaya penulisan sendiri. Dalam penulisan kode HTML5 sangat disarankan untuk menggunakan huruf kecil semua (lowercase). Meskipun, diketahui bahwa penulisan <!DOCTYPE html> menggunakan huruf besar, namun alangkah baiknya menulisnya dengan <!doctype html> untuk konsistensi gaya penulisan.

Dalam HTML5 pun kamu bisa menggunakan dua format dalam kasus elemen yang kosong. Yang pertama tanpa garis miring (/) (contohnya: <meta charset="utf-8">), yang kedua tentunya menggunakan garis miring (contohnya: <meta charset="utf-8" />). Namun, dalam kasus elemen <script> harus diakhiri dengan </script> atau menggunakan garis miring pada penulisan XHTML.

Selain itu, masih banyak hal lainnya yang nantinya akan saya bahas di blog ini pada entri lainnya. Untuk kamu yang baru saja belajar HTML5, sangat penting untuk mengetahui standar-standar HTML5 sebelum melangkah lebih jauh. Karena kebiasaan menulis kode yang buruk akan terbawa hingga nanti, begitu juga kebiasaan menulis kode yang baik. Akhir kata, selamat mencoba.