Memahami DOCTYPE, HTML, Head, dan Body

Struktur Dasar HTML: Memahami DOCTYPE, HTML, Head, dan Body

HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat halaman web. Setiap halaman HTML memiliki struktur dasar yang terorganisir untuk mendefinisikan konten dan cara konten tersebut ditampilkan oleh browser.

1. <!DOCTYPE html>: Deklarasi Dokumen

Apa itu? <!DOCTYPE html> bukanlah tag HTML, melainkan sebuah instruksi untuk browser web. Ini memberitahu browser versi HTML yang digunakan oleh dokumen tersebut.
Fungsi: Untuk HTML5, <!DOCTYPE html> adalah deklarasi yang paling umum dan direkomendasikan. Ini memastikan bahwa browser merender halaman dalam "mode standar" (standards mode), yang berarti browser akan mengikuti standar web saat ini dengan benar. Tanpa deklarasi ini, browser mungkin akan masuk ke "mode aneh" (quirks mode), yang bisa menyebabkan tampilan yang tidak konsisten antar browser.
Letak: Selalu menjadi baris pertama dalam dokumen HTML Anda.

2. <html lang="en">: Elemen Root

Apa itu? Tag <html> adalah elemen root dari setiap halaman HTML. Semua konten dan elemen HTML lainnya berada di dalam tag ini.
Fungsi: Ini menandai awal dan akhir dari dokumen HTML. Atribut lang="en" (atau lang="id" untuk bahasa Indonesia) sangat direkomendasikan. Atribut lang ini memberikan informasi kepada browser dan mesin pencari tentang bahasa utama konten halaman. Ini penting untuk aksesibilitas (misalnya, untuk pembaca layar) dan SEO.
Letak: Tepat setelah <!DOCTYPE html>.

3. <head>: Metadata Dokumen

Apa itu? Tag <head> berisi metadata tentang dokumen HTML. Metadata ini adalah informasi tentang halaman itu sendiri, bukan konten yang terlihat oleh pengguna di browser.
Fungsi: Informasi di dalam <head> digunakan oleh browser, mesin pencari, dan layanan web lainnya. Contoh elemen yang sering ditemukan di dalam <head> meliputi:
- <meta charset="UTF-8">: Mendefinisikan encoding karakter untuk dokumen (UTF-8 adalah yang paling umum dan direkomendasikan untuk mendukung berbagai karakter).
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Penting untuk desain responsif, memastikan halaman terlihat baik di berbagai perangkat.
- <title>Judul Halaman Web Saya</title>: Menentukan judul halaman yang muncul di tab browser atau di hasil pencarian.
- <link rel="stylesheet" href="style.css">: Menghubungkan file CSS eksternal untuk styling halaman.
- <script src="script.js"></script>: Menghubungkan file JavaScript eksternal (sering juga diletakkan di akhir <body> untuk performa).
- <meta name="description" content="Deskripsi singkat halaman web Anda">: Deskripsi untuk mesin pencari.
- <meta name="keywords" content="kata kunci, terkait, halaman">: Kata kunci untuk mesin pencari (kurang relevan sekarang untuk SEO).
Letak: Di dalam tag <html>, setelah tag pembuka <html> dan sebelum tag pembuka <body>.

4. <body>: Konten yang Terlihat

Apa itu? Tag <body> berisi semua konten yang sebenarnya akan terlihat oleh pengguna di jendela browser.
Fungsi: Ini adalah "badan" dari halaman web Anda. Semua teks, gambar, video, tautan, tabel, formulir, dan elemen interaktif lainnya yang ingin Anda tampilkan kepada pengunjung akan ditempatkan di dalam tag <body>.
Contoh konten:
- Heading: <h1>, <h2>, dst.
- Paragraf: <p>
- Gambar: <img>
- Tautan: <a>
- Daftar: <ul>, <ol>, <li>
- Tabel: <table>
- Formulir: <form>, <input>, <button>
- Divisi/Bagian: <div>, <section>, <article>
Letak: Di dalam tag <html>, setelah tag penutup </head>.

Contoh Struktur Dasar HTML Lengkap:

HTML

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Halaman Web Pertama Saya</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

        <h1>Selamat Datang di Website Saya</h1>

    </header>

    <main>

        <p>Ini adalah paragraf pertama dari konten halaman saya. Di sini Anda bisa menaruh informasi yang ingin Anda sampaikan kepada pengunjung.</p>

        <img src="gambar.jpg" alt="Contoh Gambar">

        <a href="https://www.google.com">Kunjungi Google</a>

    </main>

    <footer>

        <p>&copy; 2025 Nama Anda. Hak Cipta Dilindungi.</p>

    </footer>

    <script src="script.js"></script>

</body>

</html>