Beranda HTML WEBSITE

Struktur Dasar Dokumen HTML untuk Pemula — Panduan Lengkap dengan Contoh

Updated: • 0 • min read
Table of Contents

Kalau kamu pernah kepikiran bikin website sendiri, mungkin awalnya terasa ribet. Tapi sebenarnya, dasar HTML itu gampang banget dipahami. Ibarat bangun rumah, kamu nggak bisa langsung pasang sofa dan cat tembok kalau pondasinya belum ada. Nah, struktur dasar dokumen HTML inilah pondasi yang bakal menopang semua isi websitemu.

HTML sendiri punya “kerangka wajib” yang hampir selalu sama di setiap halaman web. Ada empat bagian utama:
  •  <!DOCTYPE html>
  • <html>
  • <head>
  • <body> 
Begitu paham empat hal ini, kamu udah punya bekal untuk melangkah lebih jauh.

<!DOCTYPE html> - Salam Pembuka ke Browser

Baris ini selalu ditulis di paling atas. Tugasnya simpel yaitu ngasih tahu browser bahwa halaman yang kamu buat pakai HTML5. Kalau diibaratkan, ini kayak kamu bilang, “Hei browser, saya mau pakai bahasa HTML versi terbaru, ya!”

Kalau ini nggak ada, browser bisa salah paham dan bikin tampilan web jadi aneh. Jadi meski cuma satu baris, perannya penting banget.

<html> - Bungkus Besar Semua Konten

Setelah salam pembuka, kamu mulai dengan tag <html>. Semua isi halaman harus ada di dalamnya. Tag ini ibarat amplop besar yang menampung suratmu.

Kadang kamu juga bakal lihat tambahan seperti lang="id". Itu artinya halaman ini pakai bahasa Indonesia. Sepele, tapi berguna buat mesin pencari dan pembaca layar.

<head> - Otak yang Kerja di Belakang Layar

Nah, bagian <head> ini nggak kelihatan langsung sama pengunjung. Tapi tanpa dia, websitemu bisa kehilangan identitas.

Di sinilah kamu biasanya nulis:
  • <title> untuk judul halaman (yang muncul di tab browser).
  • <meta> untuk deskripsi, keyword, dan pengaturan karakter.
  • <link> untuk menghubungkan CSS biar tampilan lebih enak dilihat.
  • <script> kalau mau nambahin JavaScript.
Kalau diibaratkan, <head> itu kayak kartu identitas websitemu, nggak semua orang lihat langsung, tapi penting untuk dikenali.

<body> - Tempat Semua Konten Tampil

Inilah bagian yang bakal dilihat orang. Semua teks, gambar, link, tombol, sampai video ada di dalam <body>.

Contohnya:
  • <h1> buat judul besar.
  • <p> buat paragraf.
  • <img> buat gambar.
  • <a> buat link.
Kalau <head> tadi otak, maka <body> ini wajah websitemu. Bagian yang bikin orang betah atau kabur, tergantung gimana kamu menatanya.

Contoh Sederhana:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Website Pertamaku</title>
</head>
<body>
  <h1>Halo Sobat KodeCeria!</h1>
  <p>Ini paragraf pertama yang aku tulis di halaman ini.</p>
</body>
</html>

Kenapa Harus Ngerti Dasarnya?

Karena semua website dari yang sederhana sampai yang super kompleks selalu berawal dari kerangka ini. Kalau kamu sudah terbiasa, nantinya belajar CSS dan JavaScript akan jauh lebih gampang.

Bayangin aja, kalau pondasi rumahmu udah kuat, mau ditambahin cat, perabot, atau bahkan renovasi gede-gedean, semuanya jadi lebih mudah.

Penutup

Belajar HTML itu kayak belajar huruf waktu kecil. Mungkin awalnya terlihat sederhana, tapi justru dari sinilah semua cerita web dimulai. Jadi jangan anggap remeh empat bagian dasar tadi.

Mulai dari sini, kamu bisa bereksperimen dengan tampilan lewat CSS atau bikin websitemu lebih interaktif dengan JavaScript. Pelan-pelan aja, yang penting konsisten. Ingat, setiap developer besar dulu juga berawal dari mengetik <html> pertama mereka.

Posting Komentar