Ini adalah salah satu bagian yang sering diabaikan pemula, padahal sangat penting untuk memastikan halaman web berjalan dengan benar di semua browser.
DOCTYPE adalah deklarasi tipe dokumen — bukan tag HTML, bukan elemen, melainkan instruksi khusus untuk browser. Letaknya wajib di baris pertama file HTML, sebelum apapun.
<!DOCTYPE html>
Fungsinya sederhana namun krusial: memberi tahu browser bahwa dokumen ini menggunakan standar HTML5. Tanpa deklarasi ini, browser akan masuk ke mode quirks mode — yaitu mode kompatibilitas lama yang bisa membuat tampilan halaman menjadi kacau dan tidak konsisten antar browser.
Perlu diperhatikan bahwa
<!DOCTYPE html>tidak case-sensitive, jadi<!doctype html>juga valid. Namun konvensi umum menggunakan huruf kapital.
Metadata adalah data tentang data — informasi mengenai halaman HTML itu sendiri yang tidak tampil langsung di layar browser, tetapi dibaca oleh browser, mesin pencari (Google, dll), dan platform media sosial.
Semua metadata ditulis di dalam tag <head>:
<head>
<!-- semua metadata di sini -->
</head>
1. Charset — Encoding Karakter
<meta charset="UTF-8">
Menentukan cara browser membaca karakter teks. UTF-8 adalah standar universal yang mendukung hampir semua bahasa di dunia, termasuk huruf Indonesia, Arab, Jepang, emoji, dan lainnya. Tanpa ini, karakter seperti é, ñ, atau bahkan tanda baca tertentu bisa tampil sebagai karakter aneh.
2. Viewport — Tampilan di Perangkat Mobile
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Mengatur bagaimana halaman ditampilkan di layar perangkat yang berbeda. Tanpa ini, halaman web akan tampil seperti versi desktop yang diperkecil di ponsel.
width=device-width — lebar halaman mengikuti lebar layar perangkatinitial-scale=1.0 — tidak ada zoom awal3. Description — Deskripsi untuk Mesin Pencari
<meta name="description" content="Belajar HTML dasar dari nol untuk pemula.">
Teks ini muncul sebagai deskripsi singkat di hasil pencarian Google (biasanya di bawah judul link). Idealnya 150–160 karakter.
4. Title — Judul Halaman
<title>Belajar HTML Dasar | Tutorial Pemula</title>
<title> secara teknis bukan <meta>, tapi tetap bagian dari metadata. Ini yang muncul di tab browser dan sebagai judul utama di hasil pencarian Google.
5. Open Graph — Tampilan di Media Sosial
<meta property="og:title" content="Belajar HTML Dasar">
<meta property="og:description" content="Tutorial HTML lengkap untuk pemula.">
<meta property="og:image" content="thumbnail.jpg">
Digunakan oleh platform seperti WhatsApp, Facebook, Twitter/X saat seseorang berbagi link halaman tersebut — menentukan judul, deskripsi, dan gambar preview yang muncul.
<head> yang Lengkap<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Tutorial HTML dasar untuk pemula.">
<meta property="og:title" content="Belajar HTML">
<meta property="og:image" content="cover.jpg">
<title>Belajar HTML Dasar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- konten halaman -->
</body>
</html>
| Tag/Atribut | Fungsi |
|---|---|
<!DOCTYPE html> |
Deklarasi HTML5, wajib di baris pertama |
<meta charset="UTF-8"> |
Encoding karakter universal |
<meta name="viewport"> |
Responsif di perangkat mobile |
<meta name="description"> |
Deskripsi untuk mesin pencari |
<title> |
Judul tab & hasil pencarian |
<meta property="og:..."> |
Preview saat dibagikan di sosmed |
💡 Tips: Jadikan template
<head>ini sebagai boilerplate pribadi yang selalu dipakai setiap memulai proyek HTML baru. Ini kebiasaan yang membedakan pemula dan developer yang sudah terbiasa.
Kursus
HTML Dasar
Kategori
Dasar HTML
Durasi Pelajaran
20 menit