Struktur Dasar Dokumen HTML dan Link Download File Referensi
https://eu2.contabostorage.com/00f3241116844f24b628f46d81abb929:st1/folder3/3299/jmuser_file_1642629809_bedb8bcb7f425b60d0abc348beaab932.pptx
2026-05-29 15:35:07 - Admin
<style> body{ font-family: Arial, Helvetica, sans-serif; line-height:1.6; margin:0; padding:20px; background-color:#f9f9f9; color:#333; } header{ text-align:center; margin-bottom:30px; } h1{ font-size:2.2em; color:#2c3e50; } nav{ margin-bottom:20px; } nav a{ margin:0 10px; text-decoration:none; color:#2980b9; } article{ max-width:800px; margin:auto; background:#fff; padding:25px; box-shadow:0 2px 5px rgba(0,0,0,0.1); } pre{ background:#eee; padding:10px; overflow-x:auto; } code{ font-family: Consolas, monospace; } </style><header> <h1>Struktur Dasar Dokumen HTML</h1></header><nav> <a href="#pendahuluan">Pendahuluan</a> <a href="#elemen-utama">Elemen Utama</a> <a href="#contoh">Contoh Lengkap</a> <a href="#penutup">Penutup</a></nav><article> <section id="pendahuluan"> <h2>Pendahuluan</h2> <p>HTML (HyperText Markup Language) adalah bahasa standar untuk membuat halaman web. Setiap dokumen HTML memiliki struktur dasar yang harus dipatuhi agar browser dapat menampilkan konten dengan benar. Memahami struktur ini penting bagi siapa saja yang ingin belajar atau mengembangkan situs web.</p> </section> <section id="elemen-utama"> <h2>Elemen Utama dalam Struktur HTML</h2> <ol> <li><strong><!DOCTYPE html></strong> Deklarasi tipe dokumen yang memberi tahu browser bahwa halaman ini menggunakan HTML5.</li> <li><strong><html></strong> Elemen akar yang membungkus seluruh isi halaman. Biasanya memiliki atribut <code>lang</code> untuk mendefinisikan bahasa.</li> <li><strong><head></strong> Menyimpan metainformasi seperti judul, charset, viewport, dan tautan ke stylesheet atau skrip.</li> <li><strong><title></strong> Judul halaman yang ditampilkan pada tab browser dan hasil pencarian.</li> <li><strong><meta></strong> Digunakan untuk mengatur karakter set (<code>charset="UTF-8"</code>), deskripsi, kata kunci, dan pengaturan responsif (<code>name="viewport"</code>).</li> <li><strong><link></strong> Menghubungkan halaman dengan file eksternal seperti CSS.</li> <li><strong><script></strong> Menyisipkan atau merujuk file JavaScript.</li> <li><strong><body></strong> Berisi semua konten yang tampil di layar: teks, gambar, video, formulir, dll.</li> </ol> <h3>Penjelasan singkat masingmasing elemen</h3> <p><strong>1. DOCTYPE</strong><br> Pada HTML5, deklarasi cukup singkat: <code><!DOCTYPE html></code>. Ini memastikan mode standar pada semua browser modern.</p> <p><strong>2. Elemen <html></strong><br> Contoh: <code><html lang="id"></code>. Atribut <code>lang</code> membantu mesin pencari dan pembaca layar mengidentifikasi bahasa halaman.</p> <p><strong>3. Bagian <head></strong><br> Di sini kita meletakkan semua yang tidak langsung terlihat oleh pengguna, tetapi penting untuk SEO, aksesibilitas, dan performa.</p> <p><strong>4. <title></strong><br> Judul harus singkat, jelas, dan mengandung kata kunci utama.</p> <p><strong>5. <meta charset></strong><br> Penetapan <code>UTF-8</code> memastikan semua karakter, termasuk aksara Indonesia, dapat ditampilkan dengan benar.</p> <p><strong>6. <meta viewport></strong><br> <code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code> membuat halaman responsif pada perangkat seluler.</p> <p><strong>7. <link> untuk CSS</strong><br> Menghubungkan file stylesheet eksternal: <code><link rel="stylesheet" href="style.css"></code>.</p> <p><strong>8. <script></strong><br> Skrip JavaScript dapat diletakkan di bagian <code><head></code> (untuk kode yang harus dimuat dulu) atau tepat sebelum penutup <code></body></code> (untuk meningkatkan kecepatan render).</p> <p><strong>9. <body></strong><br> Semua elemen visual heading, paragraf, gambar, tabel, dll dimasukkan di sini.</p> </section> <section id="contoh"> <h2>Contoh Dokumen HTML Sederhana</h2> <pre><code><!DOCTYPE html><html lang="id"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Belajar Struktur HTML</title> <link rel="stylesheet" href="styles.css"></head><body> <header> <h1>Selamat Datang di Situs Saya</h1> </header> <nav> <ul> <li><a href="#">Beranda</a></li> <li><a href="#">Tentang</a></li> <li><a href="#">Kontak</a></li> </ul> </nav> <main> <section> <h2>Apa itu HTML?</h2> <p>HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. ...</p> </section> </main> <footer> <p>&copy; 2026 Nama Anda. Semua hak dilindungi.</p> </footer> <script src="script.js"></script></body></html></code></pre> <p>Contoh di atas menampilkan semua elemen dasar yang wajib ada. Anda bisa menambahkan lebih banyak elemen sesuai kebutuhan, seperti <code><section></code>, <code><article></code>, atau <code><aside></code> untuk meningkatkan struktur semantik.</p> </section> <section id="penutup"> <h2>Penutup</h2> <p>Memahami struktur dasar dokumen HTML adalah langkah pertama yang esensial dalam pengembangan web. Dengan mengikuti urutan yang tepat DOCTYPE, <html>, <head>, dan <body> Anda memastikan bahwa halaman dapat dibaca oleh semua browser dan perangkat. Selanjutnya, fokuslah pada penggunaan elemen semantik untuk meningkatkan aksesibilitas dan SEO.</p> <p>Semoga artikel ini membantu Anda memulai atau memperdalam pengetahuan tentang HTML. Selamat berkoding!</p> </section></article>