Anatomi Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar yang konsisten dan mengikuti standar tertentu. Memahami struktur ini adalah fondasi penting untuk membangun halaman web yang valid dan kompatibel di semua browser.

🏗️ Struktur Dasar 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>Selamat Datang</h1>
    <p>Ini adalah halaman web pertama saya.</p>
</body>
</html>

<!DOCTYPE html>
<!-- Deklarasi tipe dokumen HTML5 -->

<html lang="id">
<!-- Elemen root dengan atribut bahasa Indonesia -->

<head>
    <!-- Bagian metadata dokumen -->
    <meta charset="UTF-8">
    <!-- Penentuan encoding karakter -->
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Pengaturan viewport untuk responsive design -->
    
    <title>Judul Halaman</title>
    <!-- Judul yang muncul di tab browser -->
</head>

<body>
    <!-- Bagian konten yang ditampilkan di browser -->
    <h1>Selamat Datang</h1>
    <!-- Heading utama -->
    
    <p>Ini adalah halaman web pertama saya.</p>
    <!-- Paragraf konten -->
</body>
</html>

Breakdown Struktur Dokumen

1

<!DOCTYPE html>

Deklarasi

Fungsi: Mendeklarasikan tipe dokumen sebagai HTML5
Posisi: Harus berada di baris pertama
Case Sensitivity: Tidak case sensitive
Importance: Wajib untuk kompatibilitas browser

<!DOCTYPE html>

2

<html>

Root Element

Fungsi: Elemen root yang membungkus seluruh konten
Atribut: lang untuk menentukan bahasa
Contoh: lang="id" untuk bahasa Indonesia
Scope: Semua elemen HTML berada di dalamnya

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

3

<head>

Metadata

Fungsi: Berisi informasi tentang dokumen
Visibility: Tidak ditampilkan ke pengguna
Konten: Title, meta tags, styles, scripts
Importance: Penting untuk SEO dan performance

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Belajar struktur dasar HTML">
    <meta name="keywords" content="HTML, belajar, dasar, web development">
    <meta name="author" content="Nama Anda">
    <title>Belajar HTML Dasar</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        body { font-family: Arial, sans-serif; }
    </style>
    <script src="script.js" defer></script>
</head>

4

<body>

Konten Utama

Fungsi: Berisi semua konten yang ditampilkan
Visibility: Ditampilkan langsung ke pengguna
Konten: Teks, gambar, video, form, dll.
Elements: Heading, paragraph, div, span, dll.

Elemen-elemen umum dalam Body:

<h1>-<h6> Heading

<p> Paragraf

<img> Gambar

<a> Link

<div> Container

<span> Inline

Atribut Dasar HTML

Atribut memberikan informasi tambahan tentang elemen HTML dan memodifikasi perilaku atau tampilannya.

Atribut	Deskripsi	Contoh Penggunaan	Tipe
`id`	Identifier unik untuk satu elemen	`<div id="header">`	Unique
`class`	Nama class untuk styling atau JavaScript	`<p class="important text-large">`	Multiple
`style`	CSS inline untuk styling elemen	`<h1 style="color: blue;">`	Inline
`title`	Informasi tooltip saat hover	`<a title="Klik di sini">`	Info
`data-*`	Atribut kustom untuk menyimpan data	`<div data-user-id="123">`	Custom
`src`	Source untuk gambar, script, dll.	`<img src="image.jpg">`	Source
`href`	Hyperlink reference untuk link	`<a href="page.html">`	Link

Komentar dalam HTML

Komentar digunakan untuk memberikan catatan dalam kode dan tidak akan ditampilkan di browser. Sangat berguna untuk dokumentasi dan debugging.

Contoh Penggunaan Komentar:

Kode dengan Komentar

<!DOCTYPE html>
<html>
<head>
    <title>Website Saya</title>
</head>
<body>
    <!-- Header Section -->
    <header>
        <h1>Judul Website</h1>
    </header>
    
    <!-- 
        Navigation Menu
        Akan ditambahkan kemudian 
    -->
    
    <!-- Main Content -->
    <main>
        <p>Konten utama website.</p>
    </main>
    
    <!-- Footer Section -->
    <footer>
        <p>Hak Cipta 2024</p>
    </footer>
</body>
</html>

Yang Ditampilkan Browser

website-saya.html

Judul Website

Konten utama website.

Best Practices

Selalu Gunakan DOCTYPE

Deklarasi DOCTYPE memastikan browser merender halaman dalam mode standar.

Tentukan Bahasa Dokumen

Atribut lang membantu aksesibilitas dan SEO.

Gunakan Meta Viewport

Viewport yang tepat membuat website responsive di perangkat mobile.

Hindari Inline Style

Gunakan external CSS daripada style inline untuk maintainability.

Latihan Praktik

Buat Struktur HTML Pertamamu

Pemula

1

Buat File Baru

Buat file baru dengan nama struktur-dasar.html di text editor favoritmu.

2

Tulis Struktur Dasar

Salin struktur dasar HTML5 yang telah dipelajari, termasuk DOCTYPE, html, head, dan body.

3

Tambahkan Metadata

Isi bagian head dengan title, charset UTF-8, dan viewport untuk responsive design.

4

Buat Konten

Tambahkan heading, paragraf, dan beberapa komentar di bagian body.

5

Test di Browser

Simpan file dan buka di browser web untuk melihat hasilnya.

Tip: Gunakan shortcut ! + Tab di VS Code untuk generate struktur HTML dasar secara otomatis.