Published · Minggu, 27 April 2025

Struktur Dasar Dokumen HTML

Apa Itu Struktur HTML?

Setiap halaman web yang kita buka memiliki struktur dasar yang memberikan kerangka dan urutan elemen-elemen di dalamnya. Struktur ini penting karena browser mengandalkan format ini untuk menampilkan halaman dengan cara yang benar. Tanpa struktur yang tepat, sebuah halaman web bisa tampak kacau atau bahkan tidak bisa ditampilkan sama sekali.

Struktur dasar dokumen HTML terdiri dari beberapa elemen utama yang harus ada di setiap halaman. Elemen-elemen ini memberi tahu browser bagaimana seharusnya halaman tersebut dibangun. Meskipun HTML sendiri memiliki banyak elemen yang bisa digunakan untuk menandai konten, hanya beberapa yang merupakan bagian wajib dalam setiap halaman.

Deklarasi Doctype: Menandakan Jenis Dokumen

Sebelum kita mulai menulis elemen-elemen HTML lainnya, hal pertama yang harus kita tulis adalah deklarasi DOCTYPE. Doctype memberi tahu browser bahwa dokumen yang sedang dibaca adalah sebuah halaman HTML. Dalam versi HTML5, deklarasi ini sangat sederhana:

<!DOCTYPE html>

Deklarasi ini penting karena memastikan bahwa browser akan merender halaman sesuai dengan standar HTML5 terbaru, bukan versi lama yang mungkin memiliki cara berbeda dalam menampilkan halaman.

Elemen `<html>`: Pembuka dan Penutup Halaman

Setelah deklarasi doctype, kita akan memasukkan elemen pembuka <html>. Elemen ini menandakan bahwa seluruh konten dalam halaman adalah bagian dari dokumen HTML. Elemen ini juga memiliki elemen penutup yang menandakan akhir dari dokumen HTML tersebut.

<html>
  <!-- Konten halaman web di sini -->
</html>

Semua elemen lain yang ada di dalam halaman web akan berada di dalam elemen <html>. Ini adalah kerangka utama yang membungkus keseluruhan halaman.

Elemen `<head>`: Informasi Halaman

Selanjutnya, kita punya elemen <head>, yang berfungsi untuk menyimpan informasi tentang halaman web itu sendiri. Biasanya, informasi yang ditempatkan di dalam <head> tidak langsung terlihat oleh pengunjung situs, tetapi tetap sangat penting. Beberapa elemen yang sering ditemui di dalam <head> adalah:

<title>: Menentukan judul halaman yang muncul di tab browser.
<meta>: Memberikan informasi tambahan tentang halaman seperti karakter encoding dan deskripsi untuk mesin pencari.
<link>: Digunakan untuk menghubungkan ke file eksternal seperti CSS.
<script>: Menyisipkan JavaScript.

Contoh struktur <head>:

<head>
  <title>Judul Halaman</title>
  <meta charset="UTF-8">
  <meta name="description" content="Deskripsi singkat halaman web">
  <link rel="stylesheet" href="style.css">
</head>

Elemen `<body>`: Isi Halaman

Setelah bagian <head>, kita akan menulis elemen <body>. Di sinilah semua konten yang terlihat oleh pengunjung web akan diletakkan. Mulai dari teks, gambar, tabel, hingga form input, semuanya ada di dalam elemen <body> ini.

<body>
  <h1>Selamat datang di website saya!</h1>
  <p>Ini adalah paragraf pertama di halaman.</p>
</body>

Tanpa elemen <body>, tidak ada konten yang bisa ditampilkan di halaman. Ini adalah bagian yang paling penting bagi pengguna karena segala sesuatu yang dilihat di halaman berasal dari sini.

Struktur Lengkap Dokumen HTML

Sekarang, mari kita gabungkan semuanya untuk melihat bagaimana struktur dasar dokumen HTML secara keseluruhan:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
    <meta charset="UTF-8">
    <meta name="description" content="Deskripsi halaman">
  </head>
  <body>
    <h1>Selamat datang di website saya!</h1>
    <p>Ini adalah paragraf pertama di halaman.</p>
  </body>
</html>

Ini adalah struktur paling dasar yang harus kamu ketahui saat membuat halaman web. Setiap elemen memiliki fungsinya masing-masing, dan meskipun HTML memungkinkan banyak variasi dalam penggunaannya, memahami struktur dasar ini adalah langkah pertama yang penting.

Melanjutkan ke Elemen HTML Lainnya

Dengan memahami struktur dasar HTML, kita bisa melangkah lebih jauh untuk mengatur konten dengan berbagai elemen yang lebih spesifik, seperti paragraf, heading, gambar, dan link. Di bagian selanjutnya, kita akan membahas bagaimana membuat elemen-elemen dasar ini, dimulai dengan paragraf, heading, dan line break, serta bagaimana cara penulisannya yang benar agar tampilan halaman web tetap terstruktur dan rapi.