Home » HTML » Perbedaan HTML dan HTML5

Perbedaan HTML dan HTML5

by Rhenn
by Rhenn

HTML merupakan bahasa markah (markup language) yang paling banyak digunakan saat ini dalam pembuatan sebuah website. Markup language adalah sebuah sistem yang didesain dengan fungsi untuk memproses, mendefinisikan, serta menyajikan tulisan atau teks untuk memudahkan rekayasa teks bagi komputer dengan cara menyematkan tag dan anotasi teks dalam file styled. 

Dalam teknologi informasi, perkembangan dari sebuah teknologi yang telah ditemukan tidak bisa terelakkan. Termasuk HTML, pada tahun 2014 telah meluncurkan versi baru, yaitu HTML5. Lalu apa itu HTML dan HTML5, serta apa saja perbedaan antara keduannya? Penjelasan lengkap tentang HTML dan HTML5 diuraikan di bawah ini.

Apa Itu HTML

HTML (Hypertext markup language) adalah sebuah bahasa markah yang merupakan salah satu dasar atau bahasa utama dalam pembuatan sebuah website. Dengan menggunakan HTML, sebuah website dapat dibuat menjadi interaktif dan menarik. Sebab HTML memadukan berbagai elemen seperti multimedia, teks, dan link, serta elemen pendukung lainnya menjadi sebuah kesatuan, sehingga dokumen (hypertext) menjadi interaktif.

W3C atau singkatan dari World Wide Web Consortium pada tahun 1997 menciptakan standar dalam HTML. Pada HTML, tag berfungsi untuk menentukan struktur. Tag dan elemen didefinisikan dengan penggunaan karakter < dan >. Contoh tag di antaranya heading, tabel, paragraf, dan lain-lain. Sedangkan tugas browser adalah untuk rendering website melalui tag.

Tahun 1991 HTML pertama kali diluncurkan oleh Tim Berners-Lee. Hingga saat ini HTML telah banyak melakukan perubahan dan pembaharuan. Sekarang telah tersedia versi terbarunya, yaitu HTML5. Dalam HTML5 terdapat penambahan fitur dari versi HTML yang membuat penggunaan HTML menjadi lebih mudah dan hasilnya lebih baik. Namun ada pula penghilangan fitur dari versi sebelumnya yang dianggap sebagai kekakuan pada HTML.

Pada dasarnya, versi HTML5 ini merupakan perbaikan dari HTML. HTML5 saat ini menjadi bahasa markah (markup language) paling favorite yang banyak digunakan oleh developer untuk membangun sebuah website.

Cara Kerja HTML

Untuk menggunakan HTML, tentunya developer harus mengetahui cara kerjanya terlebih dahulu. Agar nantinya saat proses penggunaan tidak mengalami kesulitan yang berarti. Sebenarnya cara kerja HTML tidak terhitung sulit. HTML hanyalah sebuah dokumen yang mirip sebagaimana tulisan biasa. Akan tetapi HTML memiliki kode-kode khusus yang memberikan instruksi tertentu atau dikenal sebagai Tag. 

Pengenalan HTML berfokus pada penggambaran struktur komponen serta format suatu website. Di samping itu untuk website browser berfungsi dalam interpretasi susunan halaman website dengan menggunakan warna, tulisan, teks, juga garis yang hendak ditampilkan pada sebuah halaman website tersebut.

Para pengguna sangat terbantu dengan penggunaan HTML dalam pengaturan format maupun tampilan pada berkas. Ini yang nantinya akan dikirim melalui media. Serta dapat menampilkan berbagai kalimat yang berbeda, yang nantinya menjadi judul atau heading. Selain itu, dapat pula menampilkan kata-kata dengan cetak tebal, miring, atau merubah ukuran tulisan untuk menjadikannya suatu karakter yang diinginkan.

Setiap elemen pada HTML digambarkan dengan tag <> sebagai pembuka, dan </> sebagai penutup. Masing-masing tag tersebut akan berisikan sebuah inisial untuk menunjukan atau mewakili suatu halaman pada website. 

Misalnya tag <P> yang menggambarkan sebagai sebuah paragraf. Tag tersebut berfungsi sebagai penanda saja. Agar halaman website tersebut memiliki sebuah konten, maka diperlukan untuk mengisi atau menuliskan teks di antara <P> dan <P/>. Maka akan terbentuklah sebuah paragraf.

Perbedaan HTML Dan HTML5 

HTML versi keempat telah digunakan mengiringi perkembangan teknologi internet dan website yang sangat pesat sejak tahun 1997. Dan saat ini telah hadir HTML5 yang merupakan versi perbaikan dari HTML. Versi ini diciptakan salah satunya untuk mengatasi kebutuhan pengembangan website yang sifatnya mobile-friendly. 

Manfaat yang didapatkan pengguna dari HTML5 lebih banyak dibandingkan dengan versi sebelumnya. Terdapat perbedaan antara HTML dan HTML5, yaitu:

  1. HTML5 mendukung SVG, canvas, dan grafis vektor virtual lainnya, sedangkan di HTML tidak. Pada HTML, pemakaian grafis vektor baru bisa dilakukan apabila menggunakan bantuan lain misalnya Flash, VML, serta Silverlight.
  2. HTML5 menggunakan database SQL web yang berfungsi untuk menyimpan cache sementara. Sedangkan pada HTML, hanya menggunakan cache browser.
  3. Di HTML5, JavaScript dapat dijalankan pada website browser, tetapi pada HTML versi sebelumnya JavaScript hanya berjalan pada thread interface website browser.
  4. HTML5 memiliki kompatibilitas yang lebih baik, dengan menyempurnakan aturan parsing.
  5. Penggunaan MathML dan SVG dapat dilakukan pada HTML5. Sementara versi lama tidak bisa.
  6. Terdapat beberapa elemen yang dihapus di HTML5, di antaranya isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, dan tt.
  7. Terdapat form control baru yang didukung di HTML5, seperti tanggal dan waktu, email, nomor, range, tel, url, pencarian, dan lain-lain.
  8. HTML5 juga memperkenalkan banyak elemen baru. Beberapa di antaranya sangat penting yaitu summary, time, aside, audio, command, data, datalist, dan lainnya.
  9. HTML5 mendukung audio tingkat tinggi serta video, sementara tidak didukung pada HTML sebelumnya.

Manfaat HTML5 Bagi Developer

Kehadiran HTML5 memberikan banyak manfaat bagi developer, di antaranya sebagai berikut:

  1. Penanganan Terhadap Error Lebih Baik

Pada versi HTML sebelumnya, kesalahan pada penulisan kode tidak dapat terhindari. Sehingga membuat tampilan website kadang tidak sama jika dibuka menggunakan browser berbeda.

Biasanya disebabkan kode HTML yang tidak sempurna atau tidak sesuai dengan browser tertentu. Hal ini membuat developer harus melakukan uji coba website pada setiap browser untuk melakukan penanganan terhadap error yang ditimbulkan dengan membuat algoritma parsing.

Pada HTML5 sistem untuk menangani error telah lebih disempurnakan. Developer menjadi lebih mudah dalam membuat algoritma parsing tersebut. Sebab sistem, pada HTML5 ini dapat membantu browser menangani error yang ditimbulkan oleh tidak sempurnanya kode HTML yang terdapat pada versi sebelumnya

  1. Memudahkan Pembuatan Aplikasi Web 

Pada versi HTML terdahulu, tidak terdapat dukungan untuk konten dinamis, sehingga animasi atau video tidak bisa dimasukkan sebagai konten pada website. Jika ingin memasukkan konten dinamis pada website yang dibangun dengan HTML lama, maka harus menambahkan dukungan Flash atau JavaScript. 

Akan tetapi dengan hadirnya HTML5 yang telah mendukung audio dan video, sebuah website bisa berfungsi layaknya aplikasi, sebagai contoh Twitter, Facebook, dan Youtube. Pada HTML5 konten yang dinamis menjadi lebih lancar dan tampilan website tampak lebih interaktif.

  1. Syntax Lebih Sederhana

Pada HTML terdahulu developer cukup repot dalam penulisan kode untuk membuat website yang kompleks. Walaupun tidak ada masalah jika hanya membuat website sederhana. Sebab harus menggunakan tag <div> untuk berbagai elemen sebagai penanda sebuah section  pada halaman website.

Pada HTML5 penandaan section diganti dengan syntax yang jauh lebih sederhana. Misalnya tag <naf> sebagai penunjuk menu navigasi pada website. Syntax yang sederhana ini sangat penting bagi developer untuk memudahkan dalam menyelesaikan sebuah website.

  1. Mendukung Pembuatan Website yang Responsif

Kebiasaan browsing dari perangkat seluler meningkat dalam beberapa tahun terakhir ini. Hal ini menuntut developer untuk membuat website yang juga dapat dibuka dengan perangkat mobile. Pada HTML versi sebelumnya belum terdapat framework untuk mengefisienkan website mobile.

HTML5 memberikan solusi untuk masalah tersebut. Website yang dibagun dengan HTML5 dapat dibuat menjadi lebih responsif dimana tampilannya dapat diadaptasikan dengan mudah menjadi website dengan tampilan mobile.

  1. Mendukung Konten Audio dan Video

Konten audio dan video tidak bisa dibuat dengan baik pada HTML versi terdahulu. Terlebih lagi di era tahun  90-an kecepatan internet pun masih terbatas. Sehingga untuk membangun sebuah website dengan konten multimedia cukup sulit pada saat itu.

HTML5 saat ini hadir dengan berbagai fitur yang memudahkan developer untuk pembuatan konten multimedia atau audio dan video, maupun gabungan dari keduanya. Misalnya dengan adanya atribut controls untuk membuat tombol play and pause pada media player.

  1. Mendukung Grafik Vektor

Membuat sebuah website yang responsif membutuhkan desain visual dengan ukuran yang dapat diperbesar namun tanpa terdistorsi. Agar nanti file seperti JPG atau PNG tidak terlihat pecah saat diperbesar. 

HTML5 yang telah mendukung grafik vektor dapat mempermudah pemecahan masalah tersebut.

  1. Lebih Banyak Browser yang Kompatibel

Terdapat banyak web browser yang saat ini dapat digunakan baik pada komputer maupun pada perangkat mobile. Namun terkadang ada kode pada HTML yang tidak terbaca dengan baik oleh web browser tertentu, sehingga tampilan websitenya tidak optimal.

HTML5 telah dibekali dengan fitur yang mampu mengoptimasi berbagai browser. Sehingga tampilan website yang dibuka menggunakan web browser terlihat sempurna.

  1. Penyimpanan Informasi secara Lokal

HTML pada versi sebelumnya melakukan penyimpanan pada cookies yang kapasitasnya hanya mampu menampung sedikit data saja. 

Sementara HTML5 telah dilengkapi dengan local storage yang berfungsi sebagai pengganti cookies menjadi penyimpanan lokal pada browser dari pengguna internet.

  1. Menjalankan JavaScript di Browser

Pada HTML versi terdahulu JavaScript hanya berjalan pada thread antarmuka browser. Sehingga membuat konten-konten interaktif tidak dapat berfungsi sampai halaman tersebut telah selesai dimuat. 

HTML5 telah dilengkapi dengan JS Worker API menjadikan JavaScript bisa berjalan pada thread terpisah. Ini membuat pengguna browser dapat melakukan interaksi pada halaman tersebut seperti klik serta mengetik pada sebuah kolom. 

Belajar HTML5 (Cheat Sheet)

Pada HTML5 terdapat banyak tag baru. Hal ini mungkin akan sedikit menyulitkan bagi yang belum pernah menggunakan HTML versi baru ini. Oleh karena itu, di bawah ini berbagai tag pada HTML5 yang bisa dimanfaatkan untuk belajar oleh pengguna HTML5 pemula.

Document OutlineKeterangan
<!DOCTYPE>Versi HTML
<html>Dokumen HTML
<head>Penampung metadata halaman
<body>Konten halaman
KomentarKeterangan
<!– –>Menuliskan komentar di dalam kode
Informasi HalamanKeterangan
<base>Base URL
<meta>Metadata
<title>judul
<link>Menghubungkan halaman dengan sumber luar
<style>Tampilan sebuah elemen
<script>Menampung sebuah script
Struktur DokumenKeterangan
<h[1-6]>Heading
<div>Section halaman
<span>Menentukan warna sebuah teks
<p>Paragraf
<br>Line Break
<hr>Garis horizontal untuk menandai batas sebuah section
LinkKeterangan
<a href =””>Link halaman
<a href =”mailto”>Link email
<a href =”name”>Anchor
<a href =”#name”>Link ke anchor
Markup TeksKeterangan
<strong>Membuat teks cetak tebal
<em>Membuat teks cetak miring
<blockquote>Kutipan dari sumber luar
<q>Kutipan pendek
<abbr>Singkatan (Prof., Dr.)
<acronym>Singkatan (HTML, JS)
<address>Alamat
<pre>Teks preformatted
<dfn>Definisi
<code>Kode
<cite>Membuat teks miring untuk menyebut judul sebuah karya
<del>Memberi garis pada teks
<ins>Menggarisbawahi teks
<sub>Teks subscript
<sup>Teks superscript
<bdo>Arah teks (kiri-kanan atau sebaliknya)
ListKeterangan
<ol>Ordered list
<ul>Unordered list
<li>Item sebuah list
<dl>List istilah beserta definisinya
<dt>Istilah yang didefinisikan
<dd>Definisi istilah
FormKeterangan
<form>Form
<fieldset>Menyatukan beberapa kolom form dalam satu kategori
<legend>Memberi judul pada suatu <fieldset>
<label>Membuat daftar opsi berbentuk checkbox
<input>Membuat kolom form
<select>Membuat drop-down list
<optgroup>Membuat teks cetak tebal yang digunakan untuk mengklasifikasikan item dalam drop-down box
<option>Membuat item dalam drop-down list
<textarea>Membuat kolom form dengan kapasitas tak terbatas
<button>Tombol
TabelKeterangan
<table>Tabel
<caption>Memberi judul pada suatu tabel
<thead>Header tabel
<tbody>Body tabel
<tfoot>Footer tabel
<colgroup>Mengkategorikan satu atau lebih kolom tabel
<col>Menentukan warna sebuah kolom
<tr>Baris tabel
<th>Cell header
<td>Cell biasa
GambarKeterangan
<img>Gambar
<map>Gambar dengan bagian yang dapat diklik
<area>Bagian gambar yang dapat diklik
ObjekKeterangan
<object>Objek multimedia yang disematkan pada halaman
<param>Parameter untuk mengontrol objek multimedia

You may also like