📕 Struktur Dasar HTML

HTML adalah fondasi dari setiap halaman web. Ia bertugas menyusun dan menggambarkan struktur halaman agar bisa ditampilkan oleh browser. Tanpa HTML, kamu tidak akan melihat elemen-elemen seperti teks, gambar, tautan, atau form di halaman web. Bisa dibilang, HTML adalah titik awal dari semua yang kamu lihat di internet. Struktur dasar HTML sendiri terdiri dari beberapa tag utama, seperti <html>, <head>, dan <body>.
Tag-tag ini wajib ada di setiap file HTML agar browser bisa membaca dan menampilkan kontennya dengan benar. Anggap saja struktur ini seperti kerangka rumah—tanpanya, desain dan isi tidak akan punya tempat untuk ditampilkan. Jadi, memahami struktur dasar HTML adalah langkah penting sebelum lanjut ke bagian tampilan atau fungsionalitas web.

🌐 Struktur Umum HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    ...
  </body>
</html>

Penjelasan dan fungsi dari masing-masing tag di atas sebagai berikut:

<!DOCTYPE html>, Harus ditulis di baris paling atas. Fungsinya untuk memberi tahu browser bahwa dokumen ini menggunakan format HTML5. Tanpa ini, browser bisa menampilkan halaman dalam mode kompatibilitas yang bisa menyebabkan tampilan tidak sesuai.
<html> ... </html>, Menandai awal dan akhir dari dokumen HTML. Semua elemen lain, termasuk, <head> dan <body>, harus berada di dalam tag ini.
<head> ... </head>, Berisi informasi tentang dokumen HTML yang tidak langsung terlihat di halaman, seperti judul, metadata, link ke CSS eksternal, dan favicon. Bagian ini bisa dianggap sebagai “pengaturan” untuk halaman web.
<title> ... </title>, Menentukan judul halaman yang muncul di tab browser. Tag ini penting untuk SEO dan juga membantu pengguna mengenali halaman yang sedang dibuka.
<body> ... </body>, Bagian utama yang menampilkan semua konten halaman web, seperti teks, gambar, video, tombol, dan link. Ini adalah bagian yang dilihat langsung oleh pengunjung.

💻 Contoh Kode:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Halo Dunia</title>
  </head>
  <body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah paragraf pertama saya dalam HTML.</p>
  </body>
</html>

⚙️ Demo Interaktif:

💡 Tips: Jangan lupa tutup semua tag HTML dengan benar agar halaman tampil sempurna.