Struktur Dokumen HTML

Kursus: Membuat Website dari Nol

Struktur dasar dokumen HTML adalah kerangka utama yang digunakan untuk membangun sebuah halaman web.

Berikut adalah elemen-elemen utama dalam struktur HTML:

1. Deklarasi DOCTYPE

Setiap halaman HTML diawali dengan deklarasi DOCTYPE untuk memberi tahu browser versi HTML yang digunakan. Untuk HTML5, deklarasinya adalah:

<!DOCTYPE html>

2. Elemen `<html>`

Semua konten HTML berada di dalam elemen <html>, yang merupakan elemen utama dalam sebuah dokumen HTML.

<html>
</html>

3. Elemen `<head>`

Bagian <head> berisi informasi metadata tentang halaman web, seperti judul, encoding karakter, dan file CSS atau JavaScript yang digunakan.

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

4. Elemen `<body>`

Bagian <body> berisi semua konten yang akan ditampilkan di halaman web, seperti teks, gambar, tautan, dan elemen interaktif lainnya.

<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah contoh halaman HTML sederhana.</p>
</body>

5. Struktur Dasar HTML Lengkap

Berikut adalah contoh dokumen HTML yang lengkap dengan struktur yang benar:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Struktur HTML</title>
</head>
<body>
    <h1>Halo, Dunia!</h1>
    <p>Ini adalah struktur dasar sebuah halaman HTML.</p>
</body>
</html>

6. Penjelasan Tambahan

<meta charset="UTF-8"> → Menentukan encoding karakter agar mendukung berbagai karakter internasional.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> → Membantu tampilan responsif di perangkat mobile.
<title> → Menentukan judul halaman yang muncul di tab browser.
<h1> - <h6> → Elemen heading untuk judul dan subjudul.
<p> → Elemen paragraf untuk teks.

Bagian ini sangat penting dalam pembuatan website karena semua halaman web harus mengikuti struktur HTML yang benar agar dapat ditampilkan dengan baik di browser.