Struktur Dasar Dokumen HTML dan Contoh Penerapannya

Hiro Entertaiment December 10, 2024

HTML, atau HyperText Markup Language, adalah bahasa yang biasa dipakai untuk membuat dan mendesain halaman web. Untuk setiap pengembang web, memahami cara dasar dokumen HTML disusun itu sangat penting. Dalam tulisan ini, kita akan melihat cara dasar dokumen HTML dan memberikan beberapa contoh penerapannya.

Cara Dasar Dokumen HTML

Dokumen HTML terdiri dari berbagai elemen dan tag yang memiliki fungsi masing-masing. Umumnya, struktur dasar dokumen HTML mencakup tag-tag berikut:

  • <!DOCTYPE html>: Ini adalah penanda yang menunjukkan bahwa dokumen ini adalah HTML5
  • <html>: Tag pembuka dan penutup yang membungkus seluruh konten halaman web.
  • <head>: Bagian ini memuat informasi tentang dokumen, seperti judul halaman dan tautan ke file CSS.
  • <title>: Ini adalah judul halaman yang akan muncul di tab browser.
  • <meta charset="UTF-8">: Ini menetapkan cara pengkodean karakter yang digunakan.
  • <link rel="stylesheet" href="styles.css">: Bagian ini menghubungkan dokumen HTML dengan file CSS yang ada di luar.
  • <body>: Ini adalah bagian utama yang berisi konten yang akan ditampilkan di halaman web, seperti teks, gambar, dan elemen lainnya.

Contoh Penerapan Struktur Dasar Dokumen HTML

Berikut adalah contoh dokumen HTML sederhana yang mengimplementasikan struktur dasar:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Web Sederhana</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Halaman Web Saya</h1>
        <nav>
            <ul>
                <li><a href="#home">Beranda</a></li>
                <li><a href="#about">Tentang</a></li>
                <li><a href="#contact">Kontak</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Beranda</h2>
            <p>Ini adalah halaman beranda.</p>
        </section>
        <section id="about">
            <h2>Tentang Saya</h2>
            <p>Halo, saya seorang pengembang web yang berdedikasi.</p>
        </section>
        <section id="contact">
            <h2>Kontak</h2>
<p>Hubungi saya melalui email: <a href="mailto:contoh@example.com">contoh@example.com</a></p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Halaman Web Saya. Semua hak dilindungi.</p>
    </footer>
</body>
</html>

Penjelasan Elemen
  • DOCTYPE: Baris pertama <!DOCTYPE html> memberitahu browser bahwa dokumen ini menggunakan HTML5.
  • Tag <html>: Tag ini membungkus seluruh konten HTML. Atribut lang="id" menunjukkan bahwa bahasa dokumen adalah Bahasa Indonesia.
Bagian <head>:
  • <meta charset="UTF-8"> memastikan bahwa dokumen menggunakan karakter encoding UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> memastikan tampilan responsif pada perangkat mobile.
  • <title> menetapkan judul halaman web.
  • <link rel="stylesheet" href="styles.css"> menghubungkan dokumen dengan file CSS eksternal untuk pengaturan gaya.
Bagian <body>:
  • Header: Mengandung elemen <header> dengan judul halaman dan navigasi.
  • Main: Bagian utama situs web menggunakan <main>. Bagian ini dibagi menjadi beberapa <section> untuk konten yang berbeda:
  • <section id="home"> untuk beranda.
  • <section id="about"> untuk informasi tentang pemilik situs.
  • <section id="contact"> untuk informasi kontak.
Footer: Mengandung elemen <footer> untuk informasi hak cipta.

Kesimpulan

Struktur dasar dokumen HTML adalah fondasi dari setiap halaman web. Dengan memahami dan menerapkan struktur ini, Anda dapat membuat halaman web yang terorganisir dengan baik dan mudah dipahami oleh browser. Contoh di atas menunjukkan bagaimana elemen-elemen HTML digunakan bersama untuk menciptakan halaman web sederhana namun fungsional. Selamat mencoba.

Sumber : Github.com

0 Comments