Setiap halaman web HTML memiliki struktur dasar agar dapat dikenali dan ditampilkan dengan benar oleh browser. Berikut ini adalah panduan langkah demi langkah untuk membuatnya.
📁 Langkah 1: Deklarasi DOCTYPE
Baris pertama di dokumen HTML adalah deklarasi <!DOCTYPE html>. Ini memberitahu browser bahwa kita menggunakan versi HTML5.
<!DOCTYPE html>
🧱 Langkah 2: Buat Tag <html>
Tag ini menjadi pembungkus seluruh isi halaman HTML.
<html>
...
</html>
🧠 Langkah 3: Tambahkan Bagian <head>
Bagian <head> berisi informasi tentang dokumen: judul, charset, dan metadata lainnya.
<head>
<title>Judul Halaman</title>
</head>
👁️ Langkah 4: Buat Bagian <body>
Di sinilah semua konten yang akan dilihat pengguna dituliskan, seperti teks, gambar, dan link.
<body>
<h1>Halo Dunia</h1>
<p>Ini paragraf pertama saya.</p>
</body>
✅ Struktur Lengkap HTML
Gabungkan semua langkah di atas menjadi satu dokumen lengkap seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Struktur HTML Dasar</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Saya sedang belajar struktur HTML dasar.</p>
</body>
</html>
🔄 Coba Jalankan:
🎯 Kesimpulan
- Struktur dasar HTML harus dimulai dengan
<!DOCTYPE html> <html>membungkus seluruh halaman<head>berisi informasi tentang dokumen<body>berisi semua konten yang akan tampil di layar
🧪 Latihan Interaktif
Edit kode berikut dengan nama dan hobi kamu, lalu jalankan:
📝 Tugas Praktik Mandiri
- Buat file HTML baru bernama
struktur-dasar.html - Tulis struktur lengkap HTML sesuai contoh
- Ubah isi
<title>,<h1>, dan<p>sesuai keinginan kamu - Simpan dan buka file di browser
- Tambahkan elemen lain seperti
<a>atau<img>
Bonus: Tambahkan tag heading <h2> dan beberapa paragraf lain sebagai latihan tambahan!
📄 Daftar Struktur HTML dan Fungsinya
| Tag HTML | Fungsi | Contoh Penggunaan |
|---|---|---|
<!DOCTYPE html> |
Menentukan jenis dokumen HTML (HTML5). | <!DOCTYPE html> |
<html> |
Elemen root yang membungkus seluruh halaman HTML. | <html lang="id"> ... </html> |
<head> |
Menyimpan metadata, judul halaman, dan link CSS/JS. | <head><title>Judul</title></head> |
<title> |
Menentukan judul halaman di tab browser. | <title>Belajar HTML</title> |
<meta> |
Informasi tambahan (charset, viewport, SEO). | <meta charset="UTF-8"> |
<body> |
Menyimpan semua konten yang ditampilkan di halaman. | <body>...</body> |
<h1> - <h6> |
Menandai judul dari besar ke kecil. | <h1>Judul Utama</h1> |
<p> |
Menampilkan teks dalam paragraf. | <p>Ini paragraf</p> |
<a> |
Membuat hyperlink. | <a href="https://example.com">Klik</a> |
<img> |
Menampilkan gambar. | <img src="foto.jpg" alt="Deskripsi"> |
<ul><li> |
Membuat daftar tidak berurutan (bullet list). | <ul><li>Item</li></ul> |
<ol><li> |
Membuat daftar berurutan (angka). | <ol><li>Langkah 1</li></ol> |
<table> |
Menyusun data dalam tabel. | <table><tr><td>Data</td></tr></table> |
<form> |
Membuat formulir input pengguna. | <form action="proses.php">...</form> |
<input> |
Membuat kolom input (teks, tombol, dll). | <input type="text" name="nama"> |
<div> |
Membuat blok kontainer. | <div>Konten</div> |
<span> |
Mengelompokkan teks dalam satu baris. | <span>Highlight</span> |
<header> |
Bagian kepala halaman (logo/judul). | <header>Judul Website</header> |
<nav> |
Bagian navigasi/menu link. | <nav><a href="#">Home</a></nav> |
<main> |
Konten utama halaman. | <main>Konten Utama</main> |
<section> |
Membagi konten menjadi bagian tertentu. | <section>Artikel Terbaru</section> |
<article> |
Mendefinisikan artikel/konten mandiri. | <article>Berita</article> |
<aside> |
Konten samping (sidebar/info tambahan). | <aside>Widget</aside> |
<footer> |
Bagian kaki halaman (hak cipta/kontak). | <footer>© 2025 Zero Computer</footer> |