Apa Itu HTML?
Sebelum belajar tentang apa itu HTML5, ada baiknya jika Anda memahami pengertian HTML terlebih dahulu. Sesuai dengan namanya, HTML atau hypertext markup language adalah sebuah bahasa markup yang menjadi salah satu dasar pembuatan website.
Tidak seperti bahasa pemrograman yang bertugas mengolah input data dengan logika yang telah ditetapkan, bahasa markup ditulis untuk memberikan struktur pada sebuah halaman website. Agar konsep tersebut dapat lebih mudah dipahami, perhatikanlah penjelasan berikut ini.
Cara Kerja HTML
Pada dasarnya, HTML digunakan untuk menunjukkan elemen-elemen yang terdapat pada suatu halaman website. Setiap elemen ditunjukkan dengan tag <> (pembuka) dan </> (penutup).
Kedua tag tersebut berisi inisial yang mewakili sebuah elemen halaman website. Contohnya adalah <p> yang merepresentasikan sebuah paragraf.
Akan tetapi, tag tersebut hanyalah sebuah penanda. Agar memiliki konten, Anda perlu memasukkan teks di antara tag <p> dan </p>. Dengan demikian, Anda baru saja membuat sebuah paragraf.
Namun, tentunya HTML tidak hanya terdiri dari elemen-elemen. Untuk memahaminya lebih lanjut, Anda dapat membaca panduan belajar HTML kami.
Perbedaan HTML dan HTML5
Versi keempat dari HTML telah digunakan sejak 1997. Tentunya teknologi internet dan website telah berkembang pesat sejak itu. Nah, HTML5 adalah perbaikan dari HTML. Versi ini diciptakan sebagai solusi untuk kebutuhan saat ini — salah satunya adalah dukungan untuk membuat website yang bersifat mobile-friendly.
Namun, perbedaan HTML5 dari pendahulunya tidak berhenti di situ. Berikut ini adalah keunggulan-keunggulan lainnya yang dimiliki HTML5:
- Penanganan Error yang Lebih Baik
- Kemudahan untuk Membuat Aplikasi Web
- Syntax yang Lebih Sederhana
- Dukungan untuk Pembuatan Website Responsive
- Support untuk Konten Video dan Audio
- Dukungan untuk Grafik Vektor
- Kompatibel dengan lebih Banyak Browser
- Penyimpanan Informasi secara Lokal
- Fokus Otomatis pada Kolom Form
- Menjalankan JavaScript di Web Browser
1. Penanganan Error yang Lebih Baik
Bukalah sebuah halaman website pada beberapa web browser yang berbeda. Bisa jadi, ada beberapa bagian dari tampilannya yang tidak terlihat sama di masing-masing browser. Penyebabnya adalah kode HTML halaman tersebut yang kurang sempurna untuk web browser tertentu.
Akan tetapi, kesalahan dalam penulisan kode HTML tidak bisa dihindari. Oleh karena itu, sudah menjadi tugas developer web browser untuk membuat algoritma parsing untuk menangani contoh error di atas.
Untungnya, HTML5 menawarkan sistem penanganan error yang lebih baik dari pendahulunya. Hal ini pun mempermudah kinerja developer web browser dalam pembuatan algoritma parsing.
Dengan kata lain, website yang ditulis dengan HTML5 membantu web browser untuk menangani kode HTML yang tidak sempurna.
2. Kemudahan untuk Membuat Aplikasi Web
Sebelum dirilisnya HTML5, mayoritas website bersifat statis karena HTML versi terdahulu tidak memiliki fitur bawaan yang mendukung konten dinamis seperti animasi dan video. Untuk memungkinkannya, web developer masih bergantung banyak pada Flash dan JavaScript.
Namun, banyak website saat ini yang tampilan dan kinerjanya menyerupai aplikasi yang berjalan di luar web browser. Coba Anda lihat Twitter dan YouTube sebagai contohnya.
Bahkan, kini sudah banyak website dengan model single page. Situs-situs ini hanya menggunakan satu halaman yang ditulis menggunakan HTML, tetapi dapat menampilkan konten interaktif. Contohnya Adalah produk-produk Google seperti Gmail.
Semua itu dapat terjadi berkat berbagai elemen baru dalam HTML5 yang menggantikan kinerja Flash dan JavaScript. Di samping itu, versi kelima ini juga membuat konten dinamis bekerja dengan lebih lancar.
3. Syntax yang Lebih Sederhana
Sebelum implementasi HTML5, web developer harus menggunakan tag <div> untuk berbagai macam elemen. Tag tersebut diperlukan untuk menandai sebuah section pada halaman website.
Penggunaan tag tersebut tidak menjadi masalah jika Anda membuat sebuah halaman yang sederhana. Akan tetapi, hal ini dapat merepotkan developer ketika menulis kode untuk halaman website dengan struktur kompleks.
Untungnya, HTML5 mengganti penandaan section dengan syntax yang lebih sederhana, seperti tag <nav> untuk menunjukkan menu navigasi website dan tag <footer> yang merepresentasikan bagian footer halaman. Tentunya ini menjadi salah satu manfaat HTML5 bagi web developer yang paling penting.
4. Dukungan untuk Pembuatan Website Responsive
Telepon seluler belum dilengkapi dengan web browser ketika HTML4 diluncurkan. Inilah alasan mengapa versi tersebut belum memiliki framework untuk pembuatan website mobile yang efisien.
Akan tetapi, kebiasaan browsing telah berubah banyak sejak saat itu. Di 2018 saja, 58% akses website dilakukan melalui perangkat mobile.
Nah, HTML5 dibuat sebagai solusi untuk perubahan tersebut. Dengan keluaran terbaru ini, web developer dapat membuat website responsive, yaitu website yang tampilannya dapat diadaptasikan untuk tampilan mobile dengan lebih mudah.
5. Support untuk Konten Video dan Audio
HTML4 memang tidak memiliki dukungan yang baik untuk konten-konten video dan audio karena kecepatan koneksi internet di akhir dekade 90-an yang kurang memadai.
Maka dari itu, tidak aneh apabila pembuatan website berisi konten multimedia dengan HTML4 tidak mudah dilakukan.
Sebagai solusi dari masalah tersebut, HTML5 diciptakan dengan fitur-fitur yang mempermudahnya. Contohnya adalah atribut controls yang digunakan untuk membuat tombol play dan pause pada sebuah media player.
6. Dukungan untuk Grafik Vektor
Seperti yang telah disebutkan sebelumnya, website responsive kini merupakan sebuah keharusan. Namun, pembuatannya membutuhkan desain visual yang ukurannya bisa diperbesar tanpa terdistorsi.
Grafik vektor, yang melingkupi file-file dengan tipe SVG, AI, dan EPS, adalah solusinya. Tidak seperti file JPG atau PNG yang pecah ketika diperbesar, kualitas grafik vektor tetap terjaga.
Karena HTML5 mempermudah pembuatan website responsive, dukungan untuk grafik vektor pun sudah termasuk di dalam daftar keunggulannya.
7. Kompatibel dengan lebih Banyak Browser
Saat ini sudah ada begitu banyak web browser yang tersedia. Tak hanya di laptop dan komputer, tetapi juga di perangkat mobile.
Sebenarnya browser-browser tersebut masih dapat membaca website yang ditulis dengan HTML versi lama. Akan tetapi, tidak semuanya dapat menerjemahkan kode HTML4 dengan baik.
Di sisi lain, website yang dibuat dengan HTML5 telah dioptimalkan untuk berbagai web browser yang ada saat ini.
8. Penyimpanan Informasi secara Lokal
Versi-versi HTML sebelumnya memang telah memungkinkan penyimpanan informasi pengguna website. Hal ini diperlukan, terutama untuk website yang memiliki konten interaktif.
Akan tetapi, penyimpanannya dilakukan dengan sistem cookies yang notabene hanya mampu menampung sedikit data.
Pada HTML5, cara penyimpanan informasi telah ditingkatkan dengan objek localStorage yang menggantikan cookies dengan penyimpanan lokal browser pengguna internet.
9. Fokus Otomatis Pada Kolom Form
Untuk memahami keunggulan ini, coba Anda buka sebuah halaman website dengan form di dalamnya. Sebut saja halaman login sebuah website, sebagai contohnya.
Jika kursor Anda langsung muncul di salah satu kolom form tersebut, berarti website tersebut dibuat menggunakan HTML5.
10. Menjalankan JavaScript di Web Browser
Pada website yang menggunakan HTML versi sebelumnya, kode JavaScript hanya bisa dijalankan pada thread antarmuka browser. Hal ini menyebabkan konten interaktif pada halaman tidak berfungsi hingga halaman tersebut selesai dimuat.
Kabar baiknya, HTML5 hadir dengan JS Worker API yang memungkinkan JavaScript untuk berjalan di thread terpisah. Dengan demikian, pengguna browser tetap dapat berinteraksi dengan halaman tersebut, seperti klik tombol dan mengetik dalam sebuah kolom.
Belajar HTML5 (Cheat Sheet)
Bagi yang belum pernah belajar HTML5, versi terbaru ini mungkin cukup membingungkan. Apalagi, ada banyak tag baru yang barangkali belum Anda kenali. Untuk itu, di bawah ini kami sediakan “contekan” yang berisi daftar tag beserta artinya. Selamat menyimak!
Document Outline
<!DOCTYPE> Versi HTML
<html> Dokumen HTML
<head> Penampung metadata halaman
<body> Konten halaman
Komentar
<!– –> Menuliskan komentar di dalam kode
Informasi Halaman
<base> Base URL
<meta> Metadata
<title> judul
<link> Menghubungkan halaman dengan sumber luar
<style> Tampilan sebuah elemen
<script> Menampung sebuah script
Struktur Dokumen
<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
Link
<a href =””> Link halaman
<a href =”mailto”> Link email
<a href =”name”> Anchor
<a href =”#name”> Link ke anchor
Markup Teks
<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)
List
<ol> Ordered list
<ul> Unordered list
<li> Item sebuah list
<dl> List istilah beserta definisinya
<dt> Istilah yang didefinisikan
<dd> Definisi istilah
Form
<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
Tabel
<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
Gambar
<img> Gambar
<map> Gambar dengan bagian yang dapat diklik
<area> Bagian gambar yang dapat diklik
Objek
<object> Objek multimedia yang disematkan pada halaman
<param> Parameter untuk mengontrol objek multimedia
Penutup
HTML5 adalah perbaikan dari versi sebelumnya. HTML5 menghadirkan berbagai fitur baru yang memenuhi berbagai kebutuhan website masa kini. Di antaranya adalah dukungan untuk konten video dan audio, kemampuan untuk menjalankan JavaScript di browser, dan kemudahan untuk membuat aplikasi web.
Sumber:
niagahoster.co.id
Posts
