Inside the Head

Setelah lesson ini, kamu dapat melengkapi judul tab, charset UTF-8, dan viewport di head sebuah dokumen.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Kamu membuka lima tab. Semuanya berjudul “Untitled”. Bagaimana menemukan halaman yang benar? Metadata kecil punya pengaruh besar pada pengalaman membaca.

Melengkapi judul tab, charset UTF-8, dan viewport di head sebuah dokumen.

PAHAMI KONSEPNYA

Title bukan h1

Title adalah nama dokumen yang biasanya muncul pada tab, riwayat, dan bookmark browser. H1 adalah judul utama di isi halaman. Keduanya boleh mirip, tetapi perannya berbeda. “Koleksi Buku — Perpustakaan Mini” lebih mudah dikenali daripada “Halaman 1”.

Karakter dan ukuran layar

Meta charset="utf-8" membantu browser membaca karakter seperti é, simbol, dan huruf berbagai bahasa. Letakkan dekat awal head. Meta viewport dengan content="width=device-width, initial-scale=1" mengatur viewport awal sesuai lebar perangkat. Ini membantu tampilan mobile, tetapi tidak otomatis membuat semua tata letak responsif.

Metadata tidak menjadi paragraf

Informasi head tidak tampil sebagai isi biasa pada halaman. Preview menampilkan bagian body; judul tab dokumen juga ditunjukkan di atas panel preview Lucia agar kamu dapat melihat perubahan title.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Koleksi Buku — Perpustakaan Mini</title>
</head>
<body>
  <h1>Koleksi Buku</h1>
  <p>Bacaan untuk sore yang tenang.</p>
</body>
</html>

HASIL DI BROWSER

Title mengidentifikasi halaman; charset menjelaskan encoding; viewport membantu browser menampilkan halaman pada perangkat kecil.

KESALAHAN YANG SERING TERJADI

<body>
  <title>Koleksi Buku</title>
</body>

Pindahkan title ke head. Jangan mengganti h1 dengan title: halaman tetap memerlukan judul yang bisa dibaca di body.

COBA BERSAMA

Praktik memperjelas pemahaman.

01 Elemen mana yang menentukan nama dokumen pada tab browser?

<h1>Koleksi Buku</h1><title>Koleksi Buku</title><meta charset="utf-8">

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Selamatkan tab tanpa nama

Lengkapi head dengan title “Jurnal Kebun”, charset UTF-8, dan viewport yang mengikuti lebar perangkat dengan skala awal 1. Pertahankan isi body.

<!DOCTYPE html>
<html lang="id">
<head>
  <!-- Lengkapi metadata di sini -->
</head>
<body>
  <h1>Jurnal Kebun</h1>
  <p>Daun baru muncul hari ini.</p>
</body>
</html>

index.htmlHTMLLn 1, Col 110 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Title menamai dokumen; h1 menamai isi utamanya.
UTF-8 mendukung karakter dari berbagai bahasa.
Viewport membantu tampilan awal pada perangkat kecil; bukan pengganti CSS responsif.

MetadataStruktur dokumen

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

Head °Title °Meta °Character encoding °Viewport °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →