Beranda / tutorial

Struktur Dasar Dokumen HTML

Posting Komentar

🧠 Tujuan Pembelajaran

Pada bagian ini, kamu akan belajar:

  • Mengenal susunan dasar dokumen HTML

  • Memahami fungsi setiap elemen penting

  • Menulis halaman HTML yang lebih rapi dan terstruktur

🧱 Struktur Umum Dokumen HTML

Setiap halaman web yang kamu lihat di internet memiliki pola dasar yang hampir sama.
Struktur itu bisa digambarkan seperti ini:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Selamat datang di halaman HTML-ku.</p>
  </body>
</html>

Mari kita bahas satu per satu 👇

🪧 1. <!DOCTYPE html>

Bagian ini wajib ada di baris pertama setiap dokumen HTML.
Tujuannya memberi tahu browser bahwa dokumen ini menggunakan HTML versi 5 (HTML5).
Kalau tidak ditulis, browser bisa saja menampilkan halaman dengan cara yang tidak konsisten.

🌐 2. <html> ... </html>

Tag <html> adalah pembungkus utama seluruh isi halaman web.
Semua elemen lain, termasuk <head> dan <body>, harus berada di dalamnya.

🧩 3. <head> ... </head>

Bagian kepala dokumen, berisi informasi yang tidak langsung tampil di layar pengguna, tetapi penting bagi browser atau mesin pencari.

Biasanya berisi:

  • <title> → judul halaman (muncul di tab browser)

  • <meta> → deskripsi dan pengaturan karakter

  • <link> → menghubungkan file CSS eksternal

  • <script> → menautkan JavaScript

Contoh:

<head>
  <title>Profil Sekolah SMA Nusantara</title>
  <meta charset="UTF-8">
  <meta name="description" content="Website resmi SMA Nusantara">
  <link rel="stylesheet" href="style.css">
</head>

🧍 4. <body> ... </body>

Bagian tubuh halaman — inilah yang terlihat oleh pengunjung website.

Di dalam <body>, kamu bisa menulis berbagai elemen:

<body>
  <h1>Selamat Datang di Website Sekolah</h1>
  <p>Ini adalah halaman pertama yang dibuat menggunakan HTML.</p>
  <img src="logo.png" alt="Logo Sekolah">
  <a href="https://www.instagram.com/sma_nusantara">Kunjungi Instagram Kami</a>
</body>

📊 Ilustrasi Struktur Halaman HTML

HTML Document
│
├── <html>
│   ├── <head>
│   │   ├── <title>
│   │   ├── <meta>
│   │   └── <link>
│   │
│   └── <body>
│       ├── <h1>
│       ├── <p>
│       ├── <img>
│       └── <a>

🧠 Istilah Penting

IstilahPenjelasan
TagTanda khusus HTML yang ditulis di dalam < >
ElemenBagian yang terdiri dari tag pembuka, isi, dan tag penutup
AtributInformasi tambahan di dalam tag, misalnya src, href, alt
KomentarCatatan yang tidak ditampilkan di browser, ditulis dengan <!-- ... -->

Contoh komentar:

<!-- Ini adalah komentar dan tidak muncul di browser -->

💪 Latihan Mini

Buat file baru bernama struktur.html
Tulis kode berikut dan lihat hasilnya di browser:

<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Struktur HTML</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>Latihan Struktur HTML</h1>
    <p>Hari ini saya belajar bagian-bagian penting dalam HTML.</p>
    <p>HTML itu mudah dan menyenangkan!</p>
  </body>
</html>

🔍 Kesimpulan

  • Setiap halaman HTML memiliki struktur dasar tetap: <!DOCTYPE>, <html>, <head>, dan <body>.

  • <head> menyimpan informasi untuk browser, sedangkan <body> menampilkan isi halaman ke pengguna.

  • Dengan memahami struktur ini, kamu siap membuat halaman web yang rapi dan mudah dikembangkan.

Posting Komentar untuk "Struktur Dasar Dokumen HTML"