Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Memahami kegunaan setiap bagian struktur HTML (
<!DOCTYPE>,<html>,<head>,<body>) - Menambahkan metadata dasar seperti charset dan viewport
- Menulis struktur HTML yang valid dari awal
Materi Singkat
Di pelajaran sebelumnya kamu sudah melihat sekilas struktur HTML. Sekarang kita bedah lebih dalam — karena memahami struktur ini adalah fondasi dari segalanya.
Analogi: Surat Resmi
Bayangkan sebuah surat resmi. Ada kop surat di atas yang berisi nama pengirim, tanggal, dan nomor surat (informasi administrasi). Lalu ada isi surat yang benar-benar dibaca penerima. HTML punya struktur yang mirip:
<head>= kop surat (informasi untuk browser, tidak tampil di layar)<body>= isi surat (konten yang dilihat pengguna)
DOCTYPE
<!DOCTYPE html>Baris ini bukan tag HTML biasa — ini adalah deklarasi yang memberitahu browser "file ini menggunakan HTML versi 5 (terbaru)". Selalu tulis ini di baris pertama file HTML-mu. Tanpanya, browser mungkin menampilkan halamanmu dengan cara yang aneh.
Tag <html> dan Atribut lang
<html lang="id">Tag <html> membungkus seluruh konten halaman. Atribut lang="id" memberitahu browser (dan mesin pencari) bahwa bahasa halaman ini adalah Indonesia. Ini penting untuk aksesibilitas dan SEO.
Di dalam <head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Judul Halaman</title>
</head><meta charset="UTF-8">— memastikan karakter seperti huruf ä, é, dan karakter Indonesia tampil dengan benar<meta name="viewport" ...>— memastikan halaman tampil dengan baik di layar HP (penting!)<title>— teks yang muncul di tab browser dan hasil pencarian Google
Di dalam <body>
Semua yang ingin kamu tampilkan kepada pengguna — teks, gambar, tombol — semuanya ditulis di dalam <body>.
Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Profil Saya</title>
</head>
<body>
<h1>Nama Saya: Budi</h1>
<p>Saya sedang belajar HTML.</p>
<p>Ini menyenangkan!</p>
</body>
</html>Tugas Kecil
- Buka file
latihan.htmldari pelajaran sebelumnya (atau buat file baru) - Perbarui strukturnya agar memiliki
lang="id",charset, danviewportyang benar - Ubah
<title>menjadi "Profil [Namamu]" - Di dalam
<body>, tambahkan:- Satu
<h1>dengan namamu - Satu
<p>yang menjelaskan asal kotamu - Satu
<p>lagi yang menjelaskan hobbymu
- Satu
- Buka di browser dan pastikan tab browser menampilkan "Profil [Namamu]"