Pada Bagian 1, kita sudah mengenal:
-
Apa itu coding
-
Peran HTML dalam website
-
Mengapa HTML wajib dipelajari pertama
Sekarang saatnya masuk ke inti praktik HTML, yaitu struktur dasar HTML.
Struktur ini adalah kerangka wajib yang harus dimiliki setiap halaman web.
📌 Setiap file HTML selalu punya pola yang sama, baik itu website sederhana maupun website besar.
Apa Itu Struktur Dasar HTML?
Struktur dasar HTML adalah susunan elemen utama yang dibaca browser agar halaman web dapat ditampilkan dengan benar.
Struktur ini membantu browser memahami:
-
Jenis dokumen
-
Bahasa yang digunakan
-
Bagian judul halaman
-
Bagian isi halaman
Kerangka Dasar HTML
Berikut adalah struktur HTML paling dasar:
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Judul Halaman</title> </head> <body> <h1>Halo Dunia</h1> <p>Ini adalah halaman HTML pertama saya.</p> </body> </html>
Jangan khawatir jika terlihat banyak—kita bahas satu per satu 👍
Penjelasan Struktur Dasar HTML
1️⃣ <!DOCTYPE html>
-
Memberi tahu browser bahwa ini adalah dokumen HTML5
-
Wajib ada di baris paling atas
-
Tanpa ini, browser bisa menampilkan halaman secara tidak konsisten
📌 Ditulis sekali saja, tanpa penutup
2️⃣ <html>
Tag <html> adalah pembungkus utama seluruh isi website.
<html lang="id">
-
lang="id"menandakan bahasa Indonesia -
Membantu:
-
SEO
-
Screen reader
-
Aksesibilitas
-
Semua isi website harus berada di dalam <html>.
3️⃣ <head>
Bagian <head> berisi informasi halaman, bukan konten yang terlihat langsung.
Contohnya:
-
Judul tab browser
-
Set charset
-
Meta data
-
Link ke CSS
<head> <meta charset="UTF-8"> <title>Judul Halaman</title> </head>
📌 Isi <head> tidak tampil di layar
4️⃣ <meta charset="UTF-8">
Tag ini sangat penting karena:
-
Menentukan jenis karakter
-
Agar teks Indonesia tidak rusak (é, ñ, dll)
Tanpa ini, bisa muncul:
❌ simbol aneh
❌ huruf tidak terbaca
5️⃣ <title>
Tag <title> menentukan:
-
Judul tab browser
-
Judul saat halaman dibookmark
-
Judul di hasil mesin pencari
<title>Belajar HTML</title>
📌 Ini bukan judul yang tampil di halaman, melainkan di tab browser.
6️⃣ <body>
Bagian <body> adalah isi utama website.
Semua yang terlihat pengguna ada di sini:
-
Teks
-
Judul
-
Gambar
-
Tombol
-
Link
<body> <h1>Judul</h1> <p>Isi paragraf</p> </body>
📌 95% aktivitas HTML terjadi di <body>
Hubungan Head dan Body
Bayangkan:
-
<head>→ identitas & pengaturan -
<body>→ isi & tampilan
Browser:
-
Membaca
<head> -
Memahami pengaturan
-
Menampilkan isi
<body>
Kesalahan Umum Pemula
Beberapa kesalahan yang sering terjadi:
❌ Lupa <!DOCTYPE html>
❌ Menulis konten di <head>
❌ Tidak menutup tag
❌ Struktur berantakan
📌 Ikuti kerangka dasar, aman untuk semua browser
Tips Praktik untuk Pemula
Untuk latihan:
-
Buat file baru:
index.html -
Copy struktur dasar HTML
-
Buka dengan:
-
Google Chrome
-
Edge
-
Firefox
-
Setiap perubahan → refresh browser (Ctrl + R)
Ringkasan
✔ HTML memiliki struktur wajib
✔ Struktur utama: doctype, html, head, body
✔ <head> untuk informasi
✔ <body> untuk isi
✔ Struktur rapi = website stabil
Penutup
Di Bagian 2 ini, kamu sudah memahami:
-
Kerangka dasar HTML
-
Fungsi setiap bagian
-
Cara browser membaca HTML
