Apa itu HTML?

Ketika Anda membuka sebuah website, browser menampilkan judul besar, paragraf, tombol, dan gambar yang tersusun rapi. Susunan tersebut tidak muncul begitu saja: seluruhnya berasal dari sebuah dokumen teks berformat HTML yang dikirim oleh server dan dibaca ulang oleh browser. Pada Chapter ini kita mengenal definisi HTML, melihat wujud dokumen HTML yang paling sederhana, dan memahami mengapa HTML menjadi fondasi yang wajib dikuasai sebelum teknologi web lainnya.

Definisi Singkat #

HTML adalah singkatan dari HyperText Markup Language, yaitu bahasa markup yang mendeskripsikan struktur sebuah halaman web. Kata markup berarti Anda memberi label pada teks: label inilah yang menyatakan bagian mana judul, bagian mana paragraf, dan bagian mana daftar. Browser membaca label tersebut, lalu merender setiap bagian sesuai perannya.

HTML dibuat oleh Tim Berners-Lee pada akhir tahun 1991, dan versi paling awalnya hanya memuat beberapa belas elemen. Kini HTML dikembangkan sebagai standar terbuka oleh WHATWG (Web Hypertext Application Technology Working Group) dan menjadi bahasa markup yang dipakai oleh seluruh website di dunia. Elemen yang ada saat ini jauh lebih kaya, mulai dari elemen teks sederhana hingga elemen interaktif seperti details dan dialog.

Dokumen HTML Pertama #

Kode berikut adalah dokumen HTML paling sederhana yang valid. Simpan kode ini sebagai file contoh.html, lalu buka file tersebut dengan browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Halo, HTML!</title>
</head>
<body>
  <h1>Halo, dunia!</h1>
  <p>Ini adalah halaman web pertama saya.</p>
  <p>HTML menyusun teks ini menjadi struktur yang dapat dibaca browser.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Halo, dunia!" di bagian atas halaman
  - Dua paragraf teks di bawahnya
  - Teks "Halo, HTML!" pada tab browser

Mari kita telaah peran setiap baris kode di atas:

1. Baris 1 (<!doctype html>): deklarasi yang memberi tahu browser bahwa dokumen ini ditulis dengan HTML modern. Tanpa deklarasi ini, browser memasuki mode kompatibilitas lama yang perilakunya berbeda.
2. Baris 2 (<html lang="id">): elemen akar yang membungkus seluruh dokumen. Atribut lang="id" memberi tahu browser bahwa konten ditulis dalam Bahasa Indonesia.
3. Baris 3-6 (<head> … </head>): bagian meta berisi informasi tentang dokumen. Elemen <meta charset="utf-8"> menetapkan pengodean karakter, sedangkan <title> menentukan teks pada tab browser.
4. Baris 7-11 (<body> … </body>): bagian yang menampung seluruh konten yang terlihat oleh pengunjung, dalam contoh ini satu heading dan dua paragraf.
5. Baris 8 (<h1>): heading level tertinggi, dirender browser sebagai teks besar dan tebal.
6. Baris 9-10 (<p>): dua paragraf teks. Browser menambahkan jarak vertikal otomatis di antara kedua paragraf tersebut.

Mengapa Disebut Markup Language #

Nama markup language berasal dari cara kerja HTML: Anda menandai (mark up) teks biasa dengan pasangan label yang disebut tag. Tanda <p> disebut opening tag (tag pembuka), sedangkan </p> disebut closing tag (tag penutup), dan teks di antaranya disebut konten. Kesatuan tag pembuka, konten, dan tag penutup inilah yang disebut elemen.

<p>Ini adalah satu elemen paragraf.</p>

Dokumen HTML pada akhirnya hanyalah teks biasa: Anda dapat membuatnya dengan editor teks apa pun tanpa alat khusus. Kesederhanaan ini menjadi alasan utama mengapa HTML menjadi titik awal yang tepat untuk belajar web development.

Posisi HTML di Web Development #

Halaman web modern dibangun oleh tiga teknologi yang saling melengkapi. Setiap teknologi punya peran yang tidak saling menggantikan:

Ketiga teknologi tersebut bekerja berlapis pada dokumen yang sama. Browser mengurai HTML terlebih dahulu untuk membentuk struktur, kemudian menerapkan CSS untuk mengatur tampilan, lalu menjalankan JavaScript untuk menambahkan interaksi. Karena itu, HTML selalu menjadi lapisan pertama: CSS dan JavaScript bekerja dengan cara menempel pada struktur yang dibangun oleh HTML.

Selanjutnya, Chapter Cara Kerja HTML akan membahas apa yang terjadi secara teknis di dalam browser mulai dari momen dokumen dikirim hingga halaman tampil di layar Anda.

Referensi resmi untuk pendalaman:

• MDN Web Docs — HTML basics
• WHATWG — HTML Living Standard

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Halo, HTML!</title>
</head>
<body>
  <h1>Halo, dunia!</h1>
  <p>Ini adalah halaman web pertama saya.</p>
  <p>HTML menyusun teks ini menjadi struktur yang dapat dibaca browser.</p>
</body>
</html>