Elemen title

Setiap dokumen HTML wajib memuat tepat satu elemen title di dalam head. Teks di dalamnya tidak pernah tampil pada area halaman, tetapi teks tersebut menjadi identitas halaman di tab browser, bookmark, dan hasil pencarian. Chapter ini membahas aturan penulisannya serta praktik menyusun judul yang bekerja baik di ketiga tempat tersebut.

Aturan Penulisan #

Tiga aturan berlaku bagi elemen title:

• Tepat satu elemen title per dokumen, dan posisinya di dalam head.
• Isinya teks murni — tag yang ditulis di dalam title diperlakukan sebagai teks biasa, bukan sebagai elemen.
• Teksnya tidak boleh kosong; judul yang kosong memaksa browser menampilkan pengganti seperti nama file atau teks bawaan browser.

Perhatikan penempatannya pada dokumen berikut:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Menu Kopi — Kedai Siti</title>
</head>
<body>
  <h1>Menu Kopi</h1>
  <p>Kopi gula aren menjadi favorit pelanggan.</p>
</body>
</html>

Teks yang tampil pada tab browser:

Menu Kopi — Kedai Siti

Mari kita telaah perannya: baris 5 memuat title — satu-satunya judul resmi dokumen; baris 8 memuat h1 — judul yang tampil di dalam halaman. Keduanya berbeda tempat dan berbeda peran: title milik browser dan hasil pencarian, h1 milik pembaca halaman.

Tiga Tempat Judul Tampil #

Ketiga tempat tersebut memotong judul yang terlalu panjang — tab memotong dari kanan, hasil pencarian umumnya hanya menampilkan bagian awalnya. Karena itu, bagian terpenting judul harus berada di depan.

Elemen ini bekerja di tab browser, bookmark, dan hasil pencarian — bukan di area halaman — sehingga demo render di dalam artikel tidak mungkin menampilkan efeknya. Simpan contoh dokumen di atas sebagai berkas dan buka di browser untuk melihat judulnya tampil pada tab.

Judul yang Baik versus Judul yang Kurang Informatif #

Bandingkan dua judul untuk halaman yang sama:

<title>Menu Kopi — Kedai Siti</title>

<title>Home</title>

Mari kita bedah keduanya:

1. Judul pertama: memuat dua bagian — nama halaman (Menu Kopi) di depan dan nama situs (Kedai Siti) di belakang, dipisah tanda hubung. Bagian paling kiri tetap terbaca meski tab terpotong; pengguna yang membuka banyak tab tetap dapat membedakan halamannya.
2. Judul kedua: kata Home tidak menjelaskan isi apa pun. Sepuluh tab bertuliskan Home tidak dapat dibedakan; bookmark bernama Home tidak membantu; hasil pencarian yang menampilkan Home nyaris tidak pernah diklik karena tidak menjawab pertanyaan pencari.

Judul kosong berakibat serupa: browser menggantinya dengan nama file atau teks seperti Untitled, dan halaman kehilangan identitas di ketiga tempat sekaligus.

Praktik Menyusun Judul #

Empat kebiasaan menghasilkan judul yang bekerja baik:

• Tulis bagian paling spesifik lebih dulu — nama halaman, bukan nama situs.
• Tutup dengan nama situs: Menu Kopi — Kedai Siti.
• Beri setiap halaman judul yang berbeda — satu situs, banyak judul unik.
• Jaga panjang masuk akal — satu kalimat pendek, bukan paragraf.

Ringkasan #

• title wajib, tepat satu, berada di head, dan berisi teks murni.
• Judul tampil di tab, bookmark, dan hasil pencarian; bagian penting diletakkan di depan.
• Judul kosong atau terlalu umum seperti Home membuat halaman sulit dikenali.

Judul dokumen sudah tertangani. Chapter berikutnya membahas satu baris kecil di head yang menentukan benar atau salahnya tampilan karakter: deklarasi charset.