Pendahuluan
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.
Elemen Utama dalam Struktur HTML
- Deklarasi tipe dokumen yang memberi tahu browser bahwa halaman ini menggunakan HTML5.
- Elemen akar yang membungkus seluruh isi halaman. Biasanya memiliki atribut
languntuk mendefinisikan bahasa. - Menyimpan metainformasi seperti judul, charset, viewport, dan tautan ke stylesheet atau skrip.
</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 Selamat Datang di Situs Saya
Apa itu HTML?
HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. ...
Contoh di atas menampilkan semua elemen dasar yang wajib ada. Anda bisa menambahkan lebih banyak elemen sesuai kebutuhan, seperti
,, atauuntuk meningkatkan struktur semantik.
Penutup
Memahami struktur dasar dokumen HTML adalah langkah pertama yang esensial dalam pengembangan web. Dengan mengikuti urutan yang tepat DOCTYPE, ,
, dan Anda memastikan bahwa halaman dapat dibaca oleh semua browser dan perangkat. Selanjutnya, fokuslah pada penggunaan elemen semantik untuk meningkatkan aksesibilitas dan SEO.