Beranda / Html

Struktur Dasar Halaman HTML5

Posting Komentar

Kalau anda sedang belajar membuat website, maka satu hal penting yang wajib anda kuasai adalah struktur dasar halaman HTML5. HTML bukan hanya sekadar kumpulan tag acak, tapi punya kerangka khusus yang harus diikuti agar halaman bisa dibaca dengan benar oleh browser.

Di artikel ini, saya akan menjelaskan secara singkat dan jelas mengenai struktur utama halaman HTML5, serta fungsi dari empat elemen penting: <!DOCTYPE html>, <html>, <head>, dan <body>.

Apa Itu HTML5?

HTML5 adalah versi terbaru dari bahasa markup HTML (HyperText Markup Language) yang digunakan untuk menyusun dan menampilkan konten di web. Dibandingkan versi sebelumnya, HTML5 lebih fleksibel, ringan, dan mendukung banyak fitur modern seperti video/audio tanpa plugin, canvas, dan tag semantik.

HTML5 adalah standar global untuk membuat halaman web saat ini. Semua browser modern sudah mendukung HTML5 secara penuh.

Struktur Dasar Halaman HTML5

Berikut ini contoh sederhana dari struktur dasar halaman HTML5:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah halaman HTML5 pertama saya.</p>
  </body>
</html>

Mari kita bahas satu per satu elemen utamanya.

1. <!DOCTYPE html> – Deklarasi HTML5

Baris pertama <!DOCTYPE html> adalah deklarasi doctype. Ini memberitahu browser bahwa dokumen yang anda buat adalah menggunakan HTML5.

Kenapa penting? Karena dengan adanya deklarasi ini, browser akan tahu cara merender (menampilkan) halaman anda dengan benar. Tanpa deklarasi ini, beberapa browser bisa masuk ke "quirks mode" dan hasil tampilannya bisa tidak sesuai harapan.

Singkatnya: <!DOCTYPE html> adalah pengenal bahwa halaman anda adalah HTML5.

2. <html> – Elemen Akar

Semua isi dari halaman HTML harus berada di dalam tag <html>. Ini adalah elemen akar dari dokumen HTML.

<html lang="id">
  ...
</html>

Atribut lang="id" menandakan bahwa bahasa utama halaman ini adalah Bahasa Indonesia. Ini penting untuk SEO dan aksesibilitas.

Catatan: Dalam HTML5, anda tidak perlu lagi menambahkan atribut xmlns seperti di versi sebelumnya.

3. <head> – Informasi Tentang Halaman

Bagian <head> berisi informasi meta tentang halaman yang tidak langsung ditampilkan di browser, seperti:

  • Judul halaman

  • Karakter set (charset)

  • Deskripsi dan keyword SEO

  • Link ke file CSS atau font

  • Script awal (biasanya JavaScript)

  • Ikon favicon

Contoh:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Contoh Halaman HTML5</title>
</head>

Penjelasan:

  • <meta charset="UTF-8"> memastikan semua karakter (termasuk huruf Latin dan simbol) tampil dengan benar.

  • <meta name="viewport"> membuat tampilan responsive di perangkat mobile.

  • <title> menentukan judul halaman yang tampil di tab browser.

4. <body> – Isi Halaman Web

Semua konten yang anda lihat di browser, seperti teks, gambar, video, link, tombol, dan formulir, diletakkan di dalam <body>.

<body>
  <h1>Selamat Datang!</h1>
  <p>Ini adalah konten utama dari halaman HTML5.</p>
</body>

Elemen <body> ini bisa dibilang adalah wadah utama konten.

Gambaran Struktur Lengkap HTML5

Agar lebih mudah dipahami, berikut skema kerangka HTML5:

<!DOCTYPE html>        ← Deklarasi HTML5
<html>                 ← Akar dokumen
  <head>               ← Informasi halaman (tidak terlihat di layar)
  </head>

  <body>               ← Konten halaman (terlihat di layar)
  </body>
</html>

Tips Tambahan untuk Pemula

  • Gunakan editor teks seperti VSCode, Sublime Text, atau Notepad++ agar lebih mudah menulis dan memformat HTML.

  • Simpan file HTML anda dengan ekstensi .html.

  • Anda bisa langsung membuka file HTML dengan double-click di browser tanpa harus upload ke internet.

Kesimpulan

Struktur dasar HTML5 sangatlah penting untuk dipahami, terutama jika anda baru mulai belajar membangun website. Dengan memahami cara kerja <!DOCTYPE html>, <html>, <head>, dan <body>, anda sudah memiliki pondasi kuat untuk lanjut ke topik-topik berikutnya seperti CSS dan JavaScript.

Ingat, website yang baik selalu dimulai dari struktur HTML yang rapi. Semakin baik struktur HTML anda, semakin mudah pula untuk mengelola konten dan memperbaiki desain di kemudian hari.


Posting Komentar untuk "Struktur Dasar Halaman HTML5"

Posting Komentar