Struktur dokumen HTML

Kenali kerangka yang dibutuhkan setiap halaman web.

Pahami konsepnya

HTML memberi makna pada isi halaman. Elemen html membungkus seluruh dokumen, head menyimpan informasi halaman, dan body berisi hal yang dilihat pengunjung. Gunakan satu h1 sebagai judul utama.

Bagian head tidak pernah tampil di halaman; isinya metafora "identitas" dokumen: judul tab browser (title), pengodean karakter, dan tautan ke berkas CSS. Semua yang ingin dilihat pengunjung — teks, gambar, tabel, formulir — ditulis di dalam body.

Baris pertama <!DOCTYPE html> memberi tahu browser bahwa dokumen ini memakai HTML versi modern. Tanpa doctype, browser bisa beralih ke mode tampilan lama yang tidak konsisten; dengan doctype, satu set aturan yang sama berlaku di semua browser.

Coba contoh kode

<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Halaman Pertamaku</title>
  </head>
  <body>
    <h1>Halo, dunia!</h1>
    <p>Ini halaman HTML pertamaku.</p>
  </body>
</html>

Simpan sebagai index.html lalu buka di browser. Judul pada title muncul di tab, sedangkan h1 dan p tampil di halaman. Nama index.html istimewa: server web menjadikannya halaman pembuka sebuah folder secara otomatis.

Latihan singkat

Ganti judul tab dan isi paragraf dengan perkenalan singkat tentang dirimu.