Membongkar Struktur Dasar Halaman HTML: Kayak Resep Wajib!

Nah, setelah kenalan sama HTML di pelajaran sebelumnya, sekarang kita masuk ke bagian yang lebih teknis tapi tetep seru: struktur dasar sebuah dokumen HTML. Anggap aja ini kayak resep masakan andalan. Ada bahan-bahan utama dan langkah-langkah yang wajib ada biar masakanmu (baca: halaman web-mu) jadi dan bisa dinikmati (baca: tampil bener di browser).

Setiap halaman HTML, mau sesimpel atau sekompleks apapun, pasti punya "cetakan" atau kerangka dasar yang sama. Kalau struktur ini gak bener, browser bisa bingung dan halaman web-mu tampilannya jadi acak-acakan, atau malah gak muncul sama sekali! Ngeri kan? Makanya, yuk kita pelajari bareng satu per satu komponen penting ini.

Ini dia penampakan struktur dasar minimalis sebuah halaman HTML:

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halamanku</title>
</head>
<body>
    <!-- Konten halaman webmu nanti ditaruh di sini -->
    <h1>Ini Bagian Body!</h1>
    <p>Semua yang keliatan di browser ada di sini.</p>
</body>
</html>

Sekarang, mari kita bedah satu per satu bagian penting dari resep di atas:

1. `<!DOCTYPE html>`: Si Pemberi Info ke Browser

Baris paling pertama dan paling atas ini, <!DOCTYPE html>, disebut deklarasi DOCTYPE.

Fungsinya apa? Ini bukan tag HTML, tapi semacam instruksi khusus buat browser. Dia ngasih tau browser, "Hei, dokumen yang mau kamu baca ini ditulis pake standar HTML versi terbaru (yaitu HTML5) ya!"
Kenapa penting? Dulu, ada banyak versi HTML. Tanpa deklarasi ini, browser bisa aja masuk ke "quirks mode" (mode aneh) dan nampilin halaman web-mu dengan cara yang gak terduga, kayak pake aturan main HTML jadul. Repot kan?
Aturannya? Selalu tulis <!DOCTYPE html> di baris paling pertama, sebelum tag <html>. Gak pake ribet, cukup satu baris itu aja buat HTML5.

2. `<html>`: Bungkus Utamanya!

Setelah DOCTYPE, kita ketemu sama tag <html>. Ini adalah elemen root atau elemen paling dasar dari setiap halaman HTML.

Fungsinya apa? Tag <html> ini ngebungkus semua konten lain di halaman web-mu (kecuali si <!DOCTYPE html> tadi). Ibaratnya, ini adalah kontainer paling besar.
Ada apa di dalamnya? Biasanya, di dalam tag <html> ini ada dua "anak" utama: <head> dan <body>.
Atribut lang (opsional tapi bagus): Seringkali kamu bakal liat <html> ditulis jadi <html lang="id"> (atau en buat bahasa Inggris, dll). Atribut lang ini ngasih tau browser dan mesin pencari apa bahasa utama konten di halamanmu. Ini bagus buat aksesibilitas dan SEO.

html

<html lang="id">
    <!-- Semua konten lain ada di sini -->
</html>

3. `<head>`: Informasi Tersembunyi (Tapi Penting!)

Bagian <head> ini unik. Apa pun yang kamu tulis di dalam <head> (kecuali <title>) gak bakal keliatan langsung di halaman web yang dilihat pengunjung. Terus buat apa dong?

Fungsinya apa? <head> itu isinya metadata – alias informasi tentang dokumen HTML-mu. Ini kayak "otak" halaman web yang ngasih instruksi dan info tambahan ke browser atau layanan lain (kayak mesin pencari).
Isinya apa aja?
- <title>: Nah, ini satu-satunya yang efeknya keliatan langsung sama pengguna. Teks di dalam <title> bakal jadi judul yang muncul di tab browser atau di bookmark. Wajib ada!
  html
```
<head>
    <title>Belajar HTML Dasar - Struktur Halaman</title>
</head>
```
- <meta>: Tag serbaguna buat ngasih berbagai macam metadata. Beberapa yang penting banget:
  - charset: Nentuin set karakter yang dipakai. Biar semua huruf dan simbol tampil bener, biasanya kita pakai UTF-8.
    html
```
<meta charset="UTF-8">
```
  - viewport: Ini krusial buat bikin website-mu tampil bagus di berbagai ukuran layar, terutama di HP (desain responsif).
    html
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
  - description: Deskripsi singkat halamanmu. Ini sering dipakai mesin pencari (kayak Google) buat nampilin cuplikan di hasil pencarian.
    html
```
<meta name="description" content="Pelajari struktur dasar dokumen HTML yang wajib diketahui setiap calon web developer.">
```
- <link>: Buat ngehubungin halaman HTML-mu dengan file eksternal, misalnya file CSS (buat ngatur tampilan) atau favicon (ikon kecil di tab browser).
  html
```
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
```
- <style>: Kamu bisa juga nulis kode CSS langsung di sini (tapi biasanya lebih rapi kalau dipisah ke file .css).
- <script>: Buat ngehubungin ke file JavaScript atau nulis kode JavaScript langsung (tapi lebih sering ditaruh di akhir <body> biar gak ngeblok loading halaman).

Intinya, <head> itu kayak ruang kontrol di belakang panggung. Gak keliatan penonton, tapi penting banget buat kelancaran pertunjukan.

4. `<body>`: Panggung Utamanya!

Nah, ini dia bagian yang paling seru! Semua konten yang keliatan langsung sama pengunjung website-mu – teks, gambar, video, tombol, link, tabel, formulir, semuanya – ditaruh di dalam tag <body>.

Fungsinya apa? <body> adalah tempat kamu "membangun" tampilan visual halaman web-mu. Apa yang ada di sini, itu yang dilihat pengguna.
Isinya apa aja? Ya semua elemen HTML yang ngebentuk konten:
- Judul-judul (<h1> sampai <h6>)
- Paragraf (<p>)
- Gambar (<img>)
- Link (<a>)
- Daftar/List (<ul>, <ol>, <li>)
- Dan masih banyak lagi yang bakal kita pelajari nanti!

html

<body>
    <h1>Selamat Datang di Website Kerenku!</h1>
    <p>Ini adalah paragraf pertama. Di sini kamu bisa nulis apa aja.</p>
    <img src="gambar-kucing-lucu.jpg" alt="Seekor kucing oranye lagi tidur">
    <a href="halaman-lain.html">Klik di sini untuk ke halaman lain</a>
</body>

Jadi, kalau <head> itu "otak" atau "ruang kontrol", <body> itu adalah "tubuh" atau "panggung" utama dari halaman web-mu.

Komentar di HTML: Catatan Pribadi Buat Dirimu (dan Tim)

Kadang, pas lagi ngoding, kita pengen ninggalin catatan buat diri sendiri atau buat anggota tim lain. Misalnya, ngingetin fungsi bagian kode tertentu, atau nandain sesuatu yang perlu diperbaiki nanti. Nah, kita bisa pakai komentar HTML.

Cara nulisnya? Komentar diapit sama .
Sifatnya? Apa pun yang kamu tulis di dalam komentar gak bakal diproses atau ditampilin sama browser. Jadi, aman buat naruh catatan apa aja.

html

<body>
    <!-- Ini adalah bagian header website -->
    <header>
        <h1>Judul Websitenya</h1>
    </header>
 
    <!-- TODO: Nanti di sini mau ditambahin galeri foto -->
 
    <p>Konten utama website...</p>
 
    <!-- Bagian ini udah fix, jangan diubah-ubah lagi ya!
         Udah dites di semua browser soalnya.
         - Developer Kece, 2023
    -->
</body>

Komentar ini berguna banget biar kodemu lebih gampang dimengerti, apalagi kalau proyeknya gede atau dikerjain bareng-bareng.

Nah, itu dia struktur dasar yang wajib ada di setiap file HTML. Gampang kan ngapalinnya? Ingat aja: <!DOCTYPE html>, terus <html> yang punya "kepala" (<head>) dan "badan" (<body>). Dengan pondasi ini, kamu udah siap buat mulai nambahin berbagai macam konten ke halaman web-mu!

Di pelajaran berikutnya, kita bakal kenalan lebih jauh sama "blok bangunan" utama HTML, yaitu elemen dan tag. Makin seru nih!

Kuis Struktur Dasar HTML

Pertanyaan 1 dari 5

Apa deklarasi pertama yang WAJIB ada di baris paling atas setiap dokumen HTML5?

Struktur

Membongkar Struktur Dasar Halaman HTML: Kayak Resep Wajib!

1. <!DOCTYPE html>: Si Pemberi Info ke Browser

2. <html>: Bungkus Utamanya!

3. <head>: Informasi Tersembunyi (Tapi Penting!)

4. <body>: Panggung Utamanya!

Komentar di HTML: Catatan Pribadi Buat Dirimu (dan Tim)

Kuis Struktur Dasar HTML

1. `<!DOCTYPE html>`: Si Pemberi Info ke Browser

2. `<html>`: Bungkus Utamanya!

3. `<head>`: Informasi Tersembunyi (Tapi Penting!)

4. `<body>`: Panggung Utamanya!