Struktur dasar dokumen HTML

From OnnoWiki
Jump to navigation Jump to search

HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat dan merancang halaman web. Setiap dokumen HTML memiliki struktur dasar yang terdiri dari beberapa elemen penting. Berikut penjelasan mengenai struktur dasar tersebut beserta contohnya:

1. Deklarasi Tipe Dokumen (DOCTYPE)

Baris pertama dalam dokumen HTML adalah deklarasi tipe dokumen yang memberi tahu browser versi HTML yang digunakan. Untuk HTML5, deklarasinya adalah:

<!DOCTYPE html>


2. Elemen `<html>`

Semua konten HTML berada di dalam elemen `<html>`, yang menandai awal dan akhir dokumen HTML.

<html>
  ...
</html>


3. Elemen `<head>`

Bagian `<head>` berisi informasi meta tentang dokumen, seperti judul halaman, link ke stylesheet, dan metadata lainnya.

<head>
  <title>Judul Halaman</title>
</head>


4. Elemen `<title>`

Di dalam `<head>`, elemen `<title>` menentukan judul halaman yang akan ditampilkan di tab browser.

<title>Judul Halaman</title>


5. Elemen `<body>`

Bagian `<body>` berisi semua konten yang akan ditampilkan kepada pengguna, seperti teks, gambar, tautan, dan elemen lainnya.

<body>
</body>


Contoh Lengkap Struktur Dasar HTML:

Berikut adalah contoh lengkap dari struktur dasar dokumen HTML:

 <!DOCTYPE html>
 <html>
 <head>
   <title>Contoh Struktur Dasar HTML</title>
 </head>
 <body>
   <h1>Selamat Datang di Halaman Web Saya</h1>
   <p>Ini adalah paragraf pertama di halaman web saya.</p>
 </body>
 </html>

Penjelasan Contoh:

 <!DOCTYPE html> : Mendeklarasikan bahwa dokumen ini menggunakan HTML5.
 <html>  : Elemen root yang membungkus seluruh konten HTML.
 <head>  : Berisi informasi meta tentang dokumen.
 <title> : Menentukan judul halaman yang muncul di tab browser.
 <body>  : Berisi konten utama yang ditampilkan di halaman web.
 <h1>    : Elemen heading tingkat 1, biasanya digunakan untuk judul utama.
 <p>     : Elemen paragraf untuk teks.

Memahami struktur dasar HTML adalah langkah awal yang penting dalam pengembangan web. Dengan memahami elemen-elemen dasar ini, Anda dapat mulai membangun halaman web yang terstruktur dengan baik dan mudah dipahami.

Pranala Menarik