29 Nov 2023

Struktur HTML

Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari :

DOCTYPE, html, head, dan body.

Inilah yang merupakan struktur paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut. Tag Block-Level

Tiga tag block-level yang harus dimiliki oleh setiap dokumen HTML adalah html, head, dan body.

Tag html adalah elemen level tertinggi yang menyertakan setiap halaman HTML.
Tag head menyimpan informasi meta, seperti judul dan charset halaman.
Tag body melampirkan semua konten yang muncul pada suatu halaman.

<html>
  <head></head>
  <body></body>
</html>

Dokumen HTML

Kemudian bagaimana dengan DOCTYPE? 🤔

Semua dokumen HTML harus dimulai dengan <!DOCTYPE>.

Deklarasi ini bukan tag HTML. Ini adalah "informasi" ke browser tentang jenis dokumen apa yang diharapkan.

Dalam HTML 5, deklarasinya sederhana:

<!doctype html>

Dokumen HTML Lama

Untuk pembahasan ini kamu bisa lewati saja, dikarenakan sudah tidak digunakan. Saya hanya memberikan pengetahuan/contoh saja agar kamu tau bagaimana penggunaan DOCTYPE yang dulu.

Pada dokumen lama (HTML 4 atau XHTML), deklarasinya lebih rumit karena deklarasi harus mengacu pada DTD (Document Type Definition).

HTML 4.01

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

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Struktur Secara Lengkap

Dengan penjelasan sebelumnya seharusnya kamu sudah memahami gambaran struktur HTML. Secara lengkap struktur HTML 5 sebagai berikut:

<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
</html>

Jangan Lupakan Tag Title

Tag title ini merupakan sebuah judul dari file HTML kita. Nanti kamu akan paham setelah penjelasan berikutnya (praktik). Berikut contoh penggunaaan tag title

<title>blog.adydetra.my.id</title>

Oh iya, untuk penggunaan tag title diselipkan di dalam tag head. Jadi kurang lebih seperti ini

<head>
  <title>blog.adydetra.my.id</title>
</head>

Praktik

Oke sekarang kita praktik bagaimana cara membuat serta menggunakan HTML.

Sebelum itu kamu harus menyediakan tools/software 🛠 berikut:

Browser (Firefox, Chrome, dan sejenisnya)
Code Editor (Visual Studio Code, Vim, dan sejenisnya)

Untuk browser saya gunakan Firefox dan Visual Studio Code. Dan itu akan berlangsung hingga materi akhir dari HTML.
Mohon dimaklumi jika sekiranya ada tahapan atau hasil yang berbeda dengan browser maupun code editor yang kamu gunakan.

Lanjut..

Buat folder dengan nama Belajar HTML
Jalankan Visual Studio Code, lalu open folder dan arahkan ke Belajar HTML
Kemudian buatlah file dengan nama index.html
Isikanlah dengan kodingan berikut, dan save

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>blog.adydetra.my.id</title>
  </head>
  <body></body>
</html>

Sekarang buka kembali folder kamu dan jalankan file index.html nya di browser

Perhatikan tab browser, disitulah fungsi dari tag title.

Coba ubah isi dari tag title dengan nama lengkap kamu, kemudian save dan refresh tab browsernya ✨.

Penutup

Oke cukup sampai disini saja, semoga dengan pembahasan tadi kamu sudah bisa membuat, menggunakan, serta menjalankan HTML di browser.

Jika ada pembahasan yang kurang akurat dan segala kekurangannya mohon maaf 🙏.