Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar yang perlu diikuti. Berikut adalah contoh struktur dasar dari dokumen HTML.

<!doctype html>
<html lang="en">
  <head>
    <title>Lesson 1</title>
  </head>
  <body>
    Selamat Datang di Kelas HTML
  </body>
</html>

Keterangan:

  • <!doctype html>: Menentukan bahwa dokumen menggunakan standar HTML5.
  • <html lang="en">: Menunjukkan bahasa halaman adalah Bahasa Inggris.
  • <head>: Bagian yang berisi informasi meta tentang dokumen.
  • <title>: Menentukan judul halaman yang muncul pada tab browser, seperti Lesson 1.
  • <body>: Berisi konten yang akan ditampilkan di browser.

Di Visual Studio Code untuk membuat kerangka dasar HTML secara otomatis, anda bisa menekan : !+Enter

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dokumen HTML</title>
  </head>
  <body>
    ...
  </body>
</html>

Keterangan:

  • <!doctype html>: Menentukan bahwa dokumen menggunakan standar HTML5.
  • <html lang="en">: Menunjukkan bahasa halaman adalah Bahasa Inggris.
  • <head>: Bagian yang berisi informasi meta tentang dokumen.
  • <meta charset="UTF-8">: Mengatur encoding karakter menjadi UTF-8 agar huruf dan simbol dapat ditampilkan dengan benar.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Membuat tampilan halaman responsif di perangkat seluler.
  • <title>: Menentukan judul halaman yang muncul pada tab browser, seperti Dokumen HTML.
  • <body>: Berisi konten yang akan ditampilkan di browser.