Struktur Dasar HTML yang Perlu Diketahui

Untuk membuat dokumen HTML yang valid kita perlu menulis beberapa tag yang diperlukan untuk menyusun struktur dasar dokumen HTML.

Hampir semua halaman web yang ada di internet menggunakan tag tersebut.

Salah satu tag yang dimaksud juga menentukan apakah kita menggunakan HTML 5 atau versi lama.

Berikut adalah struktur dasar HTML:

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <h1>Belajar HTML</h1>
    <p>Saya sedang belajar HTML</p>
  </body>
</html>

Mari kita ulas satu per satu.

1. Bagian `<!DOCTYPE html>`

Semua dokumen HTML harus dimulai dengan deklarasi <!DOCTYPE html> agar dianggap sebagai halaman yang valid dan sesuai dengan aturan W3C.

Ini bukan tag HTML melainkan informasi untuk browser agar dapat menentukan jenis dokumen dan versi yang HTML yang digunakan sehingga browser dapat mengolah kode dokumen HTML dengan tepat.

HTML 4 :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 5 (selalu gunakan yang ini):

<!DOCTYPE html>

Setiap halaman HTML harus memiliki satu deklarasi <!DOCTYPE html> tidak boleh lebih, dan harus ditempatkan di bagian paling atas.

Deklasari <!DOCTYPE html> tidak peka buka huruf besar atau kecil. Meskipun ditulis dengan huruf besar atau kecil, deklarasi tersebut akan dianggap valid.

Tapi, umumnya menggunakan huruf besar, kecuali atribut html di dalam tag tersebut.

Gunakan:

<!DOCTYPE html>

Jangan:

<!DocType html>

<!DocType html>

<!doctype html>

2. Tag `<html>`

Tag <html> merupakan akar dari sebuah dokumen HTML, tag yang menjadi wadah atau pembungkus tag dan elemen HTML yang lainnya kecuali <!DOCTYPE html>.

Kita disarankan untuk selalu menyertakan atribut lang.

Ini untuk memberitahu browser dan mesin pencari bahasa yang digunakan pada halaman web, bagus untuk SEO, halaman kita akan lebih mudah dipahami oleh mesin pencari.

Bahasa Indonesia:

<html lang="id">

Bahasa Inggris:

<html lang="en">

Jangan gunakan <html lang="en"> di halaman berbahasa Indonesia atau sebaliknya.

3. Tag `<head>`

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <h1>Belajar HTML</h1>
    <p>Saya sedang belajar HTML</p>
  </body>
</html>

<head> adalah tag yang membungkus informasi atau metadata yang ditujukan untuk mesin termasuk mesin pencari, bukan untuk manusia.

Kecuali tag <title>, selain digunakan oleh mesin, tag ini juga ditampilkan sebagai judul di tab browser.

Di dalam tag <head> kita juga bisa menyisipkan CSS dan JavaScript.

4. Tag `<body>`

Tag <body> mendefinisikan tubuh dari dokumen HTML yang berisi judul, paragraf, gambar, hyperlink, tabel, daftar, video dan lain sebagainya.

Tag <body> tidak boleh lebih dari satu dalam satu dokumen HTML.

Kita akan menghabiskan banyak waktu menulis kode HTML di dalam tag ini.

Jika saya tidak menulis struktur HTML secara lengkap pada materi-materi berikutnya, tulis di dalam tag ini.

Mari kita gunakan contoh kode sebelumnya:

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Belajar HTML</title>
  </head>
  <body>
    <h1>Belajar HTML</h1>
    <p>Saya sedang belajar HTML</p>
  </body>
</html>

Hanya konten yang berada di dalam tag <body> yang ditampilkan di browser.

Ini hasilnya:

1. Bagian <!DOCTYPE html>

2. Tag <html>

3. Tag <head>

4. Tag <body>

1. Bagian `<!DOCTYPE html>`

2. Tag `<html>`

3. Tag `<head>`

4. Tag `<body>`