By A Mimar Hidayat in HTML ā€”

Penjelasan Structur HTML

HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat dan menyusun halaman web. Dengan HTML, kita dapat menentukan struktur, konten, serta elemen-elemen yang muncul di dalam browser.

šŸ“˜ 1. Pengertian HTML

HTML merupakan bahasa markup yang menggunakan tag (penanda) untuk memberitahu browser bagaimana sebuah konten harus ditampilkan.
Setiap tag biasanya memiliki pasangan tag pembuka dan penutup, misalnya:

<p>Ini adalah sebuah paragraf.</p>

Tag <p> adalah tag pembuka, sedangkan </p> adalah tag penutup.

šŸ—ļø 2. Struktur Dasar Dokumen HTML

Struktur dasar HTML dapat dibagi menjadi beberapa bagian utama seperti berikut:

<html>
<head>
<title>Judul Halaman</title>
</head>


<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah contoh struktur dasar HTML.</p>
</body>
</html>

Mari kita bahas bagian-bagiannya satu per satu šŸ‘‡

šŸ§© 3. Bagian-Bagian Penting HTML

a. <!DOCTYPE html>

Menandakan bahwa dokumen menggunakan HTML5.
Tag ini wajib ada di bagian paling atas agar browser tahu cara menampilkan halaman dengan benar.

b. <html>...</html>

Merupakan elemen utama yang membungkus seluruh konten halaman web.

c. <head>...</head>

Bagian ini berisi informasi metadata tentang halaman web, seperti:

  • Judul halaman (<title>)
  • Pengaturan karakter (<meta charset>)
  • Link ke file CSS atau JavaScript eksternal
  • Deskripsi SEO (<meta name="description">)

Contoh:

<head>
<meta charset="UTF-8">
<title>Belajar Struktur HTML</title>
<link rel="stylesheet" href="style.css">
</head>

d. <body>...</body>

Di sinilah konten utama halaman berada ā€” seperti teks, gambar, tautan, tabel, dan elemen-elemen visual lainnya.

Contoh:

<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah paragraf pertama saya.</p>
<img src="gambar.jpg" alt="Gambar contoh">
</body>

šŸ§± 4. Hierarki Elemen HTML

HTML memiliki struktur hierarki seperti pohon (tree structure).
Artinya, ada elemen induk (parent) dan anak (child).

Contoh:

<div>
<h2>Judul</h2>
<p>Isi paragraf di dalam div.</p>
</div>

  • <div> adalah elemen induk
  • <h2> dan <p> adalah elemen anak

šŸ§  5. Kesimpulan

Struktur dasar HTML terdiri dari:

  1. <!DOCTYPE html> ā†’ deklarasi dokumen
  2. <html> ā†’ elemen akar
  3. <head> ā†’ informasi tentang halaman
  4. <body> ā†’ konten utama yang ditampilkan

Dengan memahami struktur ini, kita dapat membangun halaman web yang terorganisir, mudah dipahami, dan sesuai standar web modern.

šŸ“Ž Referensi