HTML5 Adalah: Pengertian, Tag Baru, dan Statusnya Kini

Membuka sebuah video di halaman web hari ini terasa biasa saja. Anda mengklik tombol putar, video berjalan, selesai. Padahal satu dekade lalu hal sederhana itu membutuhkan perangkat lunak tambahan yang dipasang terpisah di dalam browser. Perangkat itu rutin meminta pembaruan di saat yang tidak tepat, dan menjadi salah satu sumber celah keamanan paling produktif di komputer pribadi.

Yang mengubah keadaan itu adalah pembaruan besar pada bahasa penyusun halaman web. HTML5 adalah generasi kelima dari HTML, bahasa markah yang menyusun struktur setiap website yang Anda buka. Pembaruan ini memberi browser kemampuan memutar video, menggambar grafis, menyimpan data, dan membaca lokasi tanpa bantuan pihak ketiga. Artikel ini membahas pengertian HTML5, apa yang benar-benar berubah dari versi sebelumnya, fiturnya, sampai kelemahan yang perlu Anda ketahui. Di bagian akhir kita juga meluruskan status istilah "HTML5" itu sendiri, yang ternyata sudah tidak seperti yang banyak orang kira.

Apa Itu HTML5?

HTML5 adalah versi kelima HTML yang resmi berstatus Rekomendasi W3C pada 28 Oktober 2014. Sebagai spesifikasi, ia menambahkan puluhan elemen baru, mendefinisikan ulang cara browser menangani kesalahan penulisan, dan menyertakan sejumlah API (antarmuka yang bisa dipanggil dari kode) untuk kemampuan yang sebelumnya mustahil dilakukan browser sendirian.

Dalam pemakaian sehari-hari, istilah ini punya arti yang lebih longgar. Ketika orang menyebut "aplikasi ini dibuat dengan HTML5", yang dimaksud biasanya bukan hanya markup. Maksudnya adalah satu paket teknologi web modern: HTML sebagai struktur, CSS sebagai tampilan, JavaScript sebagai perilaku, ditambah API browser yang menyertainya.

Pelebaran makna itu justru datang dari W3C sendiri. Pada 18 Januari 2011, W3C meluncurkan logo resmi HTML5 berupa perisai oranye berangka lima. Di halaman logo tersebut, HTML5 didefinisikan sebagai payung bagi delapan kelompok teknologi: semantik, penyimpanan luring, akses perangkat, konektivitas, multimedia, grafis 3D dan efek, performa, serta CSS3. Sejak itu satu nama dipakai untuk sesuatu yang jauh lebih luas daripada markup.

Penulisan "HTML 5" dengan spasi dan "HTML5" tanpa spasi merujuk pada hal yang sama. Dokumen resmi W3C memakai bentuk tanpa spasi.

Perbedaan mendasarnya dengan versi terdahulu terletak pada niat perancangannya. HTML 4.01 dirancang untuk menyusun dokumen — teks, gambar, tautan. HTML5 dirancang untuk menyusun aplikasi yang kebetulan berjalan di dalam browser. Pergeseran niat inilah yang menjelaskan hampir semua fitur barunya.

Kenapa HTML Sempat Berhenti Bergerak Selama 15 Tahun

HTML 4.01 menjadi Rekomendasi W3C pada 24 Desember 1999. Setelah itu, selama hampir satu setengah dekade, tidak ada versi HTML baru yang diselesaikan. Bukan karena web berhenti berkembang, melainkan karena badan standarnya sedang menempuh jalan yang berbeda.

W3C saat itu bertaruh pada XHTML — HTML yang ditulis ulang mengikuti aturan ketat XML. Rencananya berlanjut ke XHTML 2.0, sebuah rancangan yang sengaja tidak kompatibel mundur dengan halaman-halaman yang sudah ada. Artinya, jutaan halaman lama harus ditulis ulang agar tetap sah. Bagi pembuat browser, tuntutan itu tidak realistis.

Pada Juni 2004, sekelompok orang dari Apple, Mozilla Foundation, dan Opera Software membentuk WHATWG (Web Hypertext Application Technology Working Group). Mereka memilih arah sebaliknya: kompatibilitas mundur dipertahankan, dan spesifikasi harus menggambarkan apa yang benar-benar dilakukan browser, bukan apa yang idealnya dilakukan. Hasil kerja mereka, Web Applications 1.0, kemudian menjadi cikal bakal HTML5.

W3C akhirnya menghentikan kerja XHTML 2.0 dan kembali ke jalur WHATWG. Draf publik pertama HTML5 terbit 22 Januari 2008, dan status Rekomendasi diraih 28 Oktober 2014 — enam tahun kemudian, dan lima belas tahun setelah pendahulunya.

Sejarah versi HTML: 4.01 di 1999, WHATWG 2004, HTML5 jadi Rekomendasi 2014, Living Standard sejak 2021.

Yang Sebenarnya Berubah: 91 Tag Menjadi 108

Perbedaan HTML dan HTML5 sering dijelaskan dengan kata sifat: "lebih modern", "lebih sederhana". Angkanya jauh lebih informatif. Indeks elemen di ketiga spesifikasi resmi bisa dihitung langsung, dan hasilnya seperti ini:

HTML5 memperkenalkan 31 elemen baru dibanding HTML 4.01: article, aside, audio, bdi, canvas, data, datalist, embed, figcaption, figure, footer, header, keygen, main, mark, meter, nav, output, progress, rb, rp, rt, rtc, ruby, section, source, template, time, track, video, dan wbr.

Pada saat yang sama, 14 elemen dihapus karena tugasnya sudah diambil alih CSS atau karena pola pemakaiannya ditinggalkan: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, menu, noframes, strike, dan tt.

Perhatikan pola yang muncul dari dua daftar itu. Yang masuk adalah elemen yang menjelaskan makna konten atau membawa kemampuan baru. Yang keluar adalah elemen yang mengatur tampilan — ukuran huruf, jenis font, perataan tengah. Pemisahan tugas antara struktur dan tampilan inilah inti perubahannya.

Deklarasi dan Kerangka Dokumen HTML5

Setiap dokumen HTML dibuka dengan deklarasi doctype, yaitu baris yang memberi tahu browser dengan aturan versi mana halaman itu harus dibaca. Di HTML 4.01, deklarasinya panjang dan hampir mustahil dihafal:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Deklarasi yang benar untuk HTML5 jauh lebih pendek, dan inilah satu-satunya bentuk yang sah:

<!DOCTYPE html>

Alasan pemendekannya sederhana. Doctype lama menunjuk ke berkas DTD di server W3C untuk validasi XML, sesuatu yang tidak pernah benar-benar dipakai browser. HTML5 membuang bagian itu dan menyisakan fungsinya yang sebenarnya: menandakan bahwa halaman harus dibaca dengan aturan standar.

Menghilangkan doctype bukan pilihan yang aman. Tanpa baris tersebut, browser masuk ke quirks mode — mode kompatibilitas yang meniru perilaku browser era 1990-an, termasuk cara menghitung lebar dan tinggi elemen. Tata letak yang rapi di satu browser bisa berantakan di browser lain.

Kerangka dokumen HTML5 yang minimal namun lengkap terlihat seperti berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Judul Halaman</title>
</head>
<body>
  <h1>Judul Utama</h1>
  <p>Isi halaman.</p>
</body>
</html>

Tiga baris di dalam <head> sering diabaikan pemula, padahal ketiganya berdampak langsung. Atribut lang="id" memberi tahu pembaca layar dan mesin penerjemah bahwa isinya berbahasa Indonesia. charset="utf-8" mencegah huruf beraksen dan emoji tampil sebagai karakter acak. Tag viewport membuat halaman menyesuaikan lebar layar ponsel alih-alih ditampilkan mengecil seperti versi desktop.

Tag Semantik: Mengganti Tumpukan div dengan Nama yang Berarti

Sebelum HTML5, struktur halaman disusun dari elemen div yang hanya dibedakan lewat atribut class atau id. Nama kelasnya bebas, sehingga <div class="top">, <div class="head">, dan <div class="banner"> bisa berarti hal yang sama di tiga proyek berbeda. Bagi manusia yang membaca kodenya, itu masih bisa ditebak. Bagi program, tidak ada artinya sama sekali.

Tag semantik menyelesaikan masalah itu dengan memberi nama baku pada bagian-bagian halaman yang memang berulang di mana-mana. Yang paling sering dipakai ada tujuh: header, nav, main, article, section, aside, dan footer. Di luar itu ada figure dan figcaption untuk gambar beserta keterangannya, time untuk tanggal yang bisa dibaca mesin, serta mark untuk teks yang disorot.

Bandingkan dua penulisan berikut. Versi lama:

<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="post">...</div>
</div>
<div class="footer">...</div>

Versi HTML5:

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Jumlah barisnya mirip, tetapi versi kedua bisa dipahami program tanpa menebak. Pembaca layar dapat menawarkan perintah "lompat ke konten utama" karena tahu persis di mana <main> berada. Mesin pencari mendapat petunjuk bagian mana yang isi artikel dan bagian mana yang navigasi berulang, yang membantu penilaian relevansi halaman dalam praktik SEO. Fitur mode baca di browser juga bergantung pada penanda semacam ini.

Struktur halaman dengan tag semantik HTML5: header, nav, main di kolom lebar, aside di kolom sempit, footer.

Anda dapat memeriksa sendiri struktur halaman mana pun lewat inspect element di browser. Buka panel Elements, lalu lihat apakah halaman tersebut memakai <article> dan <nav>, atau masih berupa div bertumpuk.

Multimedia Tanpa Plugin dan Berakhirnya Era Flash

Sebelum HTML5, memutar video di halaman web membutuhkan plugin — perangkat lunak pihak ketiga yang dipasang di dalam browser. Adobe Flash Player mendominasi peran itu selama lebih dari satu dekade. HTML5 memindahkan kemampuannya ke dalam browser lewat tiga elemen.

Elemen <video> dan <audio> memutar berkas media langsung dengan kontrol bawaan:

<video controls width="640" height="360">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Browser Anda tidak mendukung pemutaran video.
</video>

Elemen <canvas> menyediakan area gambar kosong yang isinya dilukis lewat JavaScript, piksel demi piksel. Inilah fondasi hampir semua game browser modern — permainan yang dulu berjalan di Flash kini berjalan di atas Canvas tanpa memasang apa pun.

Pemutaran video di browser: kiri gagal karena plugin terpisah retak, kanan berjalan langsung berkat HTML5.

Perpindahannya berlangsung bertahap dan tanggalnya bisa ditelusuri. Pada April 2010, Steve Jobs menerbitkan surat terbuka yang menjelaskan alasan Apple menolak Flash di iPhone dan menunjuk HTML5 sebagai penggantinya. Pada 27 Januari 2015, YouTube menjadikan pemutar HTML5 sebagai bawaan untuk browser modern; menurut pengumuman resminya, video mulai berjalan 15 sampai 80 persen lebih cepat dan kebutuhan bandwidth rata-rata turun 35 persen. Adobe sendiri menghentikan dukungan Flash Player pada 31 Desember 2020, lalu mulai memblokir konten Flash agar tidak berjalan sama sekali pada 12 Januari 2021.

API yang Membuat Halaman Web Terasa Seperti Aplikasi

Di luar tag baru, HTML5 membawa sekumpulan API yang bisa dipanggil dari JavaScript. Enam di antaranya paling sering Anda temui:

1. Web Storage: menyimpan data di browser pengguna lewat localStorage (bertahan setelah tab ditutup) atau sessionStorage (hilang saat tab ditutup). Cocok untuk preferensi tampilan atau isi keranjang belanja sementara.
2. Geolocation: meminta koordinat perangkat, selalu dengan izin eksplisit dari pengguna. Dipakai peta, pencarian cabang terdekat, dan aplikasi pengantaran.
3. Web Workers: menjalankan kode berat di thread terpisah agar halaman tidak membeku. Berguna untuk pengolahan gambar atau perhitungan besar di sisi klien.
4. WebSocket: membuka jalur komunikasi dua arah yang tetap terbuka antara browser dan server. Fondasi aplikasi obrolan, notifikasi langsung, dan papan harga yang bergerak.
5. History API: mengubah alamat di bilah URL tanpa memuat ulang halaman. Inilah yang membuat aplikasi satu halaman tetap memiliki tombol kembali yang berfungsi.
6. Validasi form bawaan: atribut seperti required, pattern, min, dan tipe masukan seperti email, date, serta number membuat browser memeriksa isian tanpa satu baris JavaScript pun.

Contoh terakhir cukup ditulis sesingkat ini:

<input type="email" name="surel" required placeholder="nama@contoh.com">
<input type="date" name="tanggal" min="2026-01-01">

Browser akan menolak pengiriman form dan menampilkan pesan kesalahan sendiri ketika isinya tidak sesuai.

"HTML5" Hari Ini Bukan Lagi Nomor Versi

Setelah Rekomendasi 2014, W3C melanjutkan penomoran dengan HTML 5.1 (1 November 2016) dan HTML 5.2 (14 Desember 2017), lalu memulai draf HTML 5.3. Pada saat yang sama WHATWG terus memelihara versinya sendiri sebagai living standard — spesifikasi yang diperbarui terus-menerus tanpa menunggu rilis bernomor.

Dua spesifikasi paralel untuk satu bahasa jelas membingungkan. Pada 28 Mei 2019, W3C dan WHATWG menandatangani nota kesepahaman: HTML dan DOM dikerjakan bersama di repositori WHATWG, dan Living Standard menjadi satu-satunya rujukan. Tindak lanjutnya datang pada 28 Januari 2021, ketika W3C resmi memensiunkan HTML 5.1, 5.2, dan 5.3 sekaligus. Halaman spesifikasinya kini memuat catatan bahwa dokumen tersebut sudah digantikan dan tidak boleh dipakai untuk pekerjaan teknis lebih lanjut.

Akibatnya, HTML tidak lagi memiliki nomor versi. MDN, rujukan dokumentasi web milik Mozilla, menyebut istilah HTML5 secara harfiah sebagai buzzword yang mengacu pada sekumpulan teknologi web modern. Jumlah elemennya pun terus bergerak. Per 10 Agustus 2026, indeks resmi memuat 113 elemen, bertambah dari 108 pada 2014. Anggota barunya antara lain details, dialog, picture, search, slot, dan summary, sementara keygen, param, rb, dan rtc dikeluarkan.

Tiga konsekuensi praktisnya bagi Anda:

1. Tidak akan ada HTML6. Menunggu versi berikutnya adalah menunggu sesuatu yang tidak dirancang untuk terjadi.
2. <!DOCTYPE html> tetap benar selamanya. Deklarasi itu tidak terikat nomor versi, jadi tidak ada yang perlu diperbarui di halaman lama Anda.
3. Rujuk spesifikasi WHATWG, bukan dokumen HTML5 W3C. Yang terakhir sudah berstatus pensiun, sehingga isinya bisa berbeda dari perilaku browser hari ini.

Istilah "HTML5" sendiri tetap wajar dipakai dalam percakapan sehari-hari dan lowongan pekerjaan. Yang perlu diluruskan hanyalah anggapan bahwa ia sebuah versi yang masih berjalan.

Hal yang Perlu Anda Pertimbangkan

HTML5 juga membawa sejumlah keterbatasan. Lima hal berikut biasanya baru terasa saat Anda mulai membangun sesuatu, bukan saat membaca daftar fiturnya.

1. Dukungan format video tidak seragam. Elemen <video> menstandarkan cara memasang video, bukan format berkasnya. Kombinasi codec yang didukung tiap browser berbeda-beda, dan pesan seperti video not found atau unsupported video format umumnya berakar di situ. Menyediakan satu berkas MP4 saja tidak selalu cukup.
2. localStorage bukan tempat menyimpan data sensitif. Kapasitasnya berkisar 5 MB per domain dan operasinya bersifat sinkron, sehingga penulisan data besar dapat menahan tampilan sesaat. Isinya juga terbaca oleh JavaScript mana pun yang berjalan di halaman itu, jadi token otentikasi sebaiknya tidak diletakkan di sana.
3. Isi <canvas> tidak terbaca siapa pun kecuali mata. Bagi pembaca layar dan mesin pencari, canvas hanyalah kotak kosong. Grafik penting perlu disertai keterangan teks atau tabel data di sekitarnya.
4. Validasi form bawaan hanya lapisan pertama. Tampilan pesan kesalahannya berbeda antar browser dan sulit diseragamkan, sementara aturannya dapat dilewati dengan mudah lewat alat pengembang. Pemeriksaan di sisi server tetap wajib.
5. Tag semantik tidak otomatis membuat halaman aksesibel. Memakai <nav> dan <main> adalah titik awal yang baik, bukan garis akhir. Urutan heading yang kacau, kontras warna yang rendah, dan gambar tanpa teks alternatif tetap menjadi masalah.

Cara Memastikan Halaman Anda Sudah Benar

Lima langkah berikut bisa Anda jalankan pada halaman yang sudah ada, berurutan dari yang paling murah:

Langkah #1: Periksa empat baris pertama. Pastikan <!DOCTYPE html> ada di baris paling atas, <html> memiliki atribut lang, dan <head> memuat <meta charset="utf-8"> beserta tag viewport. Empat hal ini menyelesaikan sebagian besar masalah tampilan di ponsel dan karakter yang berantakan.

Langkah #2: Jalankan validator resmi. Masukkan alamat halaman Anda ke W3C Markup Validation Service di validator.w3.org. Perbaiki lebih dulu semua yang berlabel Error; item berlabel Warning boleh ditimbang belakangan.

Langkah #3: Sediakan minimal dua sumber video. Untuk setiap <video>, siapkan satu berkas MP4 (codec H.264) dan satu WebM, lalu tulis keduanya sebagai <source> seperti contoh sebelumnya. Dua berkas ini mencakup hampir seluruh browser yang masih dipakai.

Langkah #4: Tulis width dan height pada gambar dan video. Tanpa kedua atribut itu, browser tidak tahu berapa ruang yang harus disiapkan sebelum berkasnya selesai diunduh, sehingga isi halaman melompat saat media muncul. Efek inilah yang diukur sebagai CLS, salah satu metrik pengalaman halaman yang dinilai Google.

Langkah #5: Telusuri struktur lewat panel Elements. Buka alat pengembang browser, lalu periksa apakah halaman Anda benar-benar memiliki satu <main>, satu <h1>, dan bagian navigasi yang dibungkus <nav>.

Pertanyaan yang Sering Muncul

Apa yang dimaksud dengan HTML5?

HTML5 adalah versi kelima HTML yang berstatus Rekomendasi W3C sejak 28 Oktober 2014, membawa 31 elemen baru, dukungan video dan audio tanpa plugin, serta sejumlah API browser. Dalam percakapan sehari-hari istilah ini juga dipakai untuk menyebut keseluruhan teknologi web modern.

Apa perbedaan HTML dan HTML5?

HTML5 adalah HTML itu sendiri pada tahap perkembangan yang lebih baru. Dibanding HTML 4.01, HTML5 menambah 31 elemen, membuang 14 elemen yang mengatur tampilan, memendekkan deklarasi doctype, dan menambahkan kemampuan multimedia serta penyimpanan data yang sebelumnya membutuhkan plugin.

Bagaimana penulisan deklarasi doctype yang benar untuk HTML5?

Cukup satu baris di posisi paling atas berkas, sebelum tag <html>: <!DOCTYPE html>. Penulisannya tidak peka huruf besar-kecil, tidak memerlukan tautan ke berkas DTD seperti pada HTML 4.01, dan tidak perlu diubah meskipun HTML terus diperbarui.

Apa saja fitur baru yang terdapat pada HTML5?

Empat kelompok besar. Pertama, tag semantik seperti header, nav, main, article, aside, dan footer. Kedua, multimedia tanpa plugin lewat video, audio, dan canvas. Ketiga, form yang lebih pintar dengan tipe masukan email, date, number, serta atribut required dan pattern. Keempat, API browser seperti Web Storage, Geolocation, Web Workers, dan WebSocket.

Berapa jumlah tag HTML5 saat ini?

Spesifikasi HTML5 versi 2014 memuat 108 elemen. Karena HTML kini dipelihara sebagai living standard, angkanya bergerak: indeks resmi WHATWG memuat 113 elemen per 10 Agustus 2026. Sebagai pembanding, HTML 4.01 memiliki 91 elemen.

Apakah HTML5 termasuk bahasa pemrograman?

Bukan. HTML5 adalah bahasa markah yang menyusun struktur dan makna konten. Ia tidak mengenal variabel, percabangan, maupun perulangan. Logika program di sisi browser dikerjakan JavaScript.

Apakah HTML5 masih versi terbaru?

Secara teknis, penomoran versi HTML sudah dihentikan. W3C memensiunkan HTML 5.1, 5.2, dan 5.3 pada 28 Januari 2021, dan sejak itu hanya ada satu rujukan: HTML Living Standard yang dipelihara WHATWG tanpa nomor versi.

Perlukah belajar HTML 4 lebih dulu sebelum HTML5?

Tidak perlu. Elemen inti seperti heading, paragraf, tautan, dan tabel tetap sama, sementara elemen khas HTML 4 yang sudah dihapus memang tidak layak dipelajari lagi. Mulailah langsung dari materi yang memakai <!DOCTYPE html>.

Kesimpulan

HTML5 adalah pembaruan yang mengubah web dari kumpulan dokumen menjadi tempat menjalankan aplikasi. Tiga hal yang dibawanya paling terasa sampai hari ini. Tag semantik membuat struktur halaman bisa dipahami program. Dukungan multimedia mengakhiri ketergantungan pada plugin. Dan sekumpulan API browser memungkinkan penyimpanan data, pembacaan lokasi, serta komunikasi dua arah dengan server.

Satu hal yang perlu Anda bawa pulang: "HTML5" kini lebih tepat dibaca sebagai nama sebuah era, bukan nomor versi yang sedang berjalan. Penomoran itu sudah dipensiunkan pada 28 Januari 2021, dan yang berlaku sekarang adalah HTML Living Standard. Untuk pekerjaan sehari-hari, hal ini justru menyederhanakan: pakai <!DOCTYPE html>, tulis tag semantik, sediakan lebih dari satu format video, dan jangan menyerahkan validasi form sepenuhnya kepada browser.

Semoga artikel ini membantu.