HTML Pertama: Struktur Dokumen

Saatnya Menulis Kode

Buka text editor, ketik kode di bawah ini, simpan sebagai index.html, lalu buka di browser. Itu halaman web pertamamu.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Halo, Dunia!</title>
</head>
<body>
  <p>Halo, ini halaman web pertamaku.</p>
</body>
</html>

Selamat. Kamu resmi jadi web developer.

Bedah Kerangka Wajib

Setiap dokumen HTML yang sehat punya struktur yang sama. Mari bedah satu per satu:

<!DOCTYPE html>

Baris ini bukan tag, melainkan deklarasi: "browser, tolong baca file ini sebagai HTML versi terbaru". Tanpa ini, browser masuk ke mode kompatibilitas lama dan bisa merender halaman secara aneh.

<html lang="id">

Tag pembuka seluruh dokumen. Atribut lang="id" memberi tahu browser dan mesin pencari bahwa isi halaman berbahasa Indonesia. Ini membantu screen reader mengucapkan teks dengan benar.

<head>

Wadah informasi tentang halaman, bukan isi halaman. Judul tab browser, karakter encoding, dan link ke CSS tinggal di sini. Pengunjung tidak melihat isi head secara langsung.

<body>

Inilah isi halaman yang sebenarnya: teks, gambar, tombol, semua yang tampil di layar. Hampir semua yang kamu pelajari di seri ini tinggal di dalam body.

Aturan Main Tag

Tag HTML punya pola yang konsisten:

• Tag pembuka: <p>
• Tag penutup: </p> (ada garis miringnya)
• Isi di antara keduanya disebut konten elemen

<p>Ini konten elemen paragraf.</p>

Beberapa tag tidak punya konten dan tidak butuh penutup, misalnya <meta> dan <img>. Tag seperti ini disebut void element.

Atribut: Informasi Tambahan

Atribut memberi info ekstra ke sebuah tag. Polanya selalu nama="nilai" dan ditulis di dalam tag pembuka:

<html lang="id">

Di sini lang adalah nama atribut dan "id" adalah nilainya. Nilai atribut selalu dibungkus tanda kutip.

Catatan teknis: HTML tidak peduli huruf besar atau kecil pada nama tag, tapi konvensinya selalu huruf kecil. Tulis <p>, bukan <P>. Konsistensi bikin kode gampang dibaca orang lain.

Coba Sendiri

Ubah teks di dalam <p> menjadi namamu, simpan, lalu refresh browser. Ubah juga <title> dan perhatikan judul tab browser ikut berubah. Eksperimen kecil seperti ini cara tercepat untuk paham.