Mengenal HTML dan HTML5: Perbedaan serta Cara Penggunaannya

HTML adalah Hypertext Markup Language. Sedangkan definisi HTML adalah suatu bahasa markup yang dipakai saat membuat website, dan pertama kali dirilis pada 1991. Kamu akan bisa memanfaatkan HTML untuk menyusun dan membuat berbagai konten tulisan pada halaman website maupun aplikasi.

HTML berbeda dari bahasa pemrograman, sehingga kamu tidak bisa menggunakannya untuk membuat software yang memerlukan fungsionalitas dinamis. HTML dirancang oleh seorang ahli fisika bernama Berners-Lee bersama timnya dari lembaga penelitian CERN, Swiss. Saat pertama kali dirilis, HTML memiliki 18 tag saja.

Sejak saat itu penggunaan HTML menjadi booming dan diperlukan banyak pengembangan terhadap sejumlah error yang ada. Versi terbaru HTML adalah HTML5 yang pertama kali dirilis pada 2014 silam.

Versi kelima HTML ini memiliki banyak perbedaan dari versi awalnya. Selain dilakukan perbaikan terhadap error, ada banyak fitur tambahan yang ditawarkan pada pengguna.

HTML5 merupakan bagian proyek dari World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Keduanya bekerja sama membentuk web aplikasi versi sebelumnya, yaitu XHTML 2.0 yang keluar pada 2006.

Tujuan Pembuatan HTML5

HTML5 dibuat dengan tujuan memperbaiki HTML yang masih memiliki banyak bug dan fitur yang kurang lengkap. HTML5 dapat digunakan bersamaan dengan berbagai multimedia yang baru, dan lebih mudah dipahami oleh user dan mesin. Dapat dikatakan bahwa HTML5 bekerja dengan lebih efisien dari versi sebelumnya. 

Beberapa tujuan dari HTML5:

• Lebih mudah dalam pembuatan aplikasi website
• Menggunakan syntax yang lebih simpel
• Adanya perbaikan terhadap sejumlah bug yang ada di versi sebelumnya
• Mendukung pembuatan website yang sifatnya responsif terhadap pengunjung
• Mendukung penggunaan grafik vector
• Bisa disisipkan video dan audio pada konten web
• Kompatibel dengan berbagai macam browser
• Mampu menyimpan informasi yang bersifat lokal
• Mampu menjalankan JavaScript pada Web Browser
• Adanya fokus yang otomatis di bagian kolom Form

Penjelasan Masing-Masing Pembaruan di HTML5

Ada banyak fitur baru di HTML5. Masing-masing dari poin tersebut akan dijelaskan dengan lebih rinci berikut ini.

Perbaikan Banyak Bug atau Error

Dahulu, saat masih menggunakan HTML versi pertama, kamu akan mendapati adanya error pada bagian tampilan masing-masing laman website di browser berbeda. Setiap browser akan memberikan tampilan berbeda yang disebabkan kode HTML yang belum sempurna.

Berangkat dari alasan tersebut, pihak developer browser memutuskan untuk menyempurnakannya. Beberapa algoritma parsing dibuat guna menangani beberapa error tersebut.

Namun kesalahan penulisan kode HTML masih belum teratasi dengan sempurna. Akhirnya pengembangan dilakukan pada bagian HTML dan versi terbaru dari pengembangan tersebut adalah HTML5. Ada banyak sekali error yang diperbaiki.

Proses Pembuatan Aplikasi Web Menjadi Mudah

Sebagian besar website zaman dulu bersifat statis. Berkat dirilisnya HTML5, kamu akan bisa membuat website yang terdapat konten bergerak. Beberapa konten animasi dan video juga bisa disisipkan untuk menambah daya tarik. Untuk menciptakan konten dinamis tersebut, biasanya web developer menggunakan Flash atau Java Script dahulu.

Ada banyak juga website yang hanya mengandalkan single page, karena memang sudah bisa menampilkan banyak konten interaktif. Contoh produk-produk tersebut adalah Google dan Gmail. Saat ini web developer bisa membuat konten dinamis dengan tidak lagi mengandalkan Flash dan JavaScript saja.

Penggunaan Syntax yang Sederhana

HTML5 memberikan kemudahan dalam menggunakan syntax. Website developer tidak lagi harus memakai tag <div> saat akan menggunakan beberapa elemen.

Biasanya tag tersebut dipakai untuk memberikan tanda suatu section di laman website. Penggunaan tag tersebut tidak akan merepotkan saat membuat laman sederhana, tetapi merepotkan saat akan membuat yang rumit.

Kini kamu hanya perlu menggunakan tag <nav> saat ingin menampilkan menu navigasi pada website. Jika ingin menunjukkan bagian footer laman, kamu hanya perlu memakai tag<footer>.

Bagaimana Cara Kerja HTML?

HTML memiliki cara kerja dengan menunjukkan berbagai macam elemen yang ada dalam laman website. Masing-masing elemen tersebut ditunjukkan dengan menggunakan tag <> sebagai pembuka, dan </> sebagai penutup. Di dalam tag tersebut bisa ditambahkan suatu inisial yang memiliki arti berbeda lagi.

Misalkan <p> yang berarti inisial sebuah paragraf. Kamu juga perlu menyertakan penutup saat membuat konten yang diwakili dengan simbol </p>. Walaupun demikian, HTML bukan hanya merupakan elemen-elemen saja. Kamu perlu mempelajari lebih mendalam tentang HTML ini untuk bisa memahami cara kerja HTML secara menyeluruh.

Sedangkan untuk mewakili suatu emphasis, disimbolkan dengan (em). Kode tag pembuka emphasis adalah <em> dan tag penutup adalah </em>. Apabila kamu ingin lebih paham tentang html, bisa menggunakan contoh ini:

• h1 mewakili h untuk heading dan angka 1 untuk ukuran besar
• h2 berarti h adalah heading dan angka 2 untuk ukuran lebih kecil dari 1
• h3 dimana h artinya heading dan angka 3 berarti lebih kecil dari 2
• h4 dimana h berarti heading dan angka 4 berarti lebih kecil dari 3
• h5 artinya h untuk heading dan angka 5 artinya lebih kecil dari 4
• h6 berarti h untuk heading dan angka 6 adalah yang paling kecil

Kodenya dalam HTML5 menjadi:

<h1>Ukuran h1</h1>

<h2>Ukuran h2</h2>

<h3>Ukuran h3</h3>

<h4>Ukuran h4</h4>

<h5>Ukuran h5</h5>

<h6>Ukuran h6</h6>

Saat ditampilkan pada browser, tulisan tersebut akan memiliki ukuran yang berbeda. 

Jadi setiap kali kamu membuat elemen dengan tag pembuka, harus selalu disertai dengan tag penutup di akhir pada bahasa markup. Hanya beberapa elemen saja yang tidak perlu tag penutup dan pembuka, seperti enter dan membuat baris yang baru <br>.

Penggunaan Huruf Besar atau Kecil

Perlu dipahami bahwa penggunaan elemen pada tag biasanya menggunakan huruf kecil. Walaupun memang browser tidak memberikan perbedaan tampilan mengenai huruf besar maupun kecil pada elemen yang ada di dalam tag.

Beberapa contoh elemen pada tag pembuka dengan penulisan huruf kecil yang banyak dipakai di HTML5:

Baris baru <br>

Page <p>

Emphasis <em>

Batasan hyperlink <a>