Embedded Files
Panduan Lengkap Struktur Dasar HTML untuk Pemula
Panduan Lengkap Struktur Dasar HTML untuk Pemula
Apa Itu HTML?
Apa Itu HTML?
HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML tidak termasuk bahasa pemrograman karena tidak memiliki logika atau perintah seperti loop atau kondisi, tetapi hanya digunakan untuk menentukan struktur dan konten suatu halaman web.
Setiap halaman web yang kita lihat di internet terdiri dari elemen-elemen HTML yang membentuk kerangka utama. Untuk membuat halaman web, kita perlu memahami struktur dasar HTML terlebih dahulu.
Struktur Dasar HTML
Struktur Dasar HTML
Berikut adalah struktur dasar sebuah dokumen HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Header</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Bagian Utama</h2>
<p>Isi konten utama di sini.</p>
</section>
</main>
<footer>
<p>Hak Cipta © 2025</p>
</footer>
</body>
</html>
Penjelasan Struktur HTML Secara Detail
Penjelasan Struktur HTML Secara Detail
1. Deklarasi DOCTYPE
1. Deklarasi DOCTYPE
<!DOCTYPE html>
Bagian ini digunakan untuk memberi tahu browser bahwa dokumen yang digunakan adalah HTML5, versi terbaru dari HTML. Ini harus selalu ditulis di baris pertama dokumen HTML.
2. Elemen <html>
2. Elemen <html>
<html lang="id">
Tag <html> adalah elemen utama yang membungkus seluruh isi halaman web. Atribut lang="id" digunakan untuk menunjukkan bahwa halaman ini menggunakan bahasa Indonesia. Ini membantu mesin pencari dan teknologi pembaca layar mengenali bahasa yang digunakan.
Bagian <head> – Metadata Halaman Web
Bagian <head> – Metadata Halaman Web
Semua informasi yang tidak terlihat langsung di halaman web tapi penting untuk browser dan SEO dimasukkan dalam <head>.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
<link rel="stylesheet" href="styles.css">
</head>
3. Elemen <meta>
3. Elemen <meta>
<meta charset="UTF-8"> → Menentukan karakter yang digunakan dalam dokumen. UTF-8 mendukung berbagai karakter termasuk huruf dan simbol khusus.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> → Mengatur agar tampilan web responsif di berbagai perangkat (desktop, tablet, dan smartphone).
4. Elemen <title>
4. Elemen <title>
<title>Judul Halaman</title>
Judul halaman yang ditampilkan di tab browser dan digunakan oleh mesin pencari.
5. Elemen <link>
5. Elemen <link>
<link rel="stylesheet" href="styles.css">
Menghubungkan file CSS eksternal untuk mempercantik tampilan halaman.
Bagian <body> – Konten Halaman Web
Bagian <body> – Konten Halaman Web
Semua elemen yang terlihat di halaman web dimasukkan dalam <body>.
<body>
<header>
<h1>Header</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Bagian Utama</h2>
<p>Isi konten utama di sini.</p>
</section>
</main>
<footer>
<p>Hak Cipta © 2025</p>
</footer>
</body>
Bagian-bagian dalam <body> Secara Detail
Bagian-bagian dalam <body> Secara Detail
6. Elemen <header>
6. Elemen <header>
<header>
<h1>Header</h1>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>
<header> biasanya digunakan untuk menyimpan logo, judul website, dan navigasi utama.
Di dalamnya, ada <nav> yang berisi daftar menu navigasi dengan elemen <ul> (unordered list) dan <li> (list item).
7. Elemen <main>
7. Elemen <main>
<main>
<section>
<h2>Bagian Utama</h2>
<p>Isi konten utama di sini.</p>
</section>
</main>
<main> adalah bagian utama konten web, yang berisi informasi utama dari halaman tersebut.
8. Elemen <section>
8. Elemen <section>
<section>
<h2>Bagian Utama</h2>
<p>Isi konten utama di sini.</p>
</section>
Digunakan untuk mengelompokkan konten dalam suatu bagian tertentu. Bisa digunakan untuk berita, artikel, produk, dll.
9. Elemen <footer>
9. Elemen <footer>
<footer>
<p>Hak Cipta © 2025</p>
</footer>
<footer> adalah bagian bawah halaman yang biasanya berisi informasi hak cipta, kontak, atau tautan tambahan.
Kesimpulan
Kesimpulan
Struktur dasar HTML terdiri dari beberapa elemen penting yang harus dipahami:
<!DOCTYPE html> → Menandakan HTML5.
<html> → Elemen utama yang membungkus seluruh isi dokumen.
<head> → Berisi metadata, CSS, dan judul halaman.
<body> → Berisi semua konten yang terlihat di halaman web.
<header> → Berisi navigasi dan judul website.
<main> → Konten utama halaman.
<section> → Mengelompokkan konten dalam bagian tertentu.
<footer> → Bagian bawah halaman dengan informasi tambahan.
Dengan memahami struktur HTML ini, kamu sudah bisa mulai membuat website sederhana. Untuk tampilan lebih menarik, kamu bisa mengkombinasikan HTML dengan CSS dan JavaScript.
Mau belajar lebih lanjut tentang CSS dan JavaScript? Yuk lanjut! 🚀
Page updated
Google Sites
Report abuse