HTML, dijelaskan: kerangka digital setiap halaman web

Dalam satu kalimat

HTML (HyperText Markup Language) adalah bahasa standar untuk membuat struktur dan konten dokumen yang ditampilkan di World Wide Web.

Masalah yang diselesaikannya

Bayangin internet sebelum era web yang kita kenal sekarang. Isinya cuma dokumen-dokumen yang terpisah-pisah, kayak wild west-nya para nerd. Para akademisi di CERN mungkin punya makalah penelitian di sistem lokal mereka dalam satu format, sementara universitas di negara lain punya karya terkait dalam format yang sama sekali berbeda dan tidak kompatibel. Berbagi dan, yang lebih penting, menghubungkan informasi ini adalah mimpi buruk digital.

Lalu datanglah Tim Berners-Lee. Di akhir tahun 80-an dan awal 90-an, dia bukannya mau bikin platform buat video kucing; dia lagi berusaha mecahin masalah nyata bagi para ilmuwan: gimana caranya kita berbagi dan menautkan dokumen kita di berbagai komputer dan jaringan dengan cara yang simpel dan universal?

Solusinya adalah tiga serangkai: HTTP (protokol untuk meminta dan mengirim dokumen), URL (alamat untuk setiap dokumen), dan HTML (bahasa untuk menulis dokumen itu).

Kejeniusan HTML terletak pada kesederhanaannya. HTML menyediakan satu set "tag" yang bisa dipelajari siapa saja, memungkinkan mereka untuk menandai dokumen teks biasa. Tag ini bakal bilang ke browser, "Bagian ini judul," "Ini paragraf," dan yang paling krusial, "Teks ini adalah hyperlink ke dokumen lain di sana." Kemampuan hyperlink itulah "HT" dalam HTML, dan itulah yang mengubah kumpulan file yang terisolasi menjadi "jaring" (web) informasi yang saling terhubung. HTML menjadi lingua franca bagi browser, cetak biru universal untuk sebuah halaman web.

Cara kerjanya di balik layar

Sekilas, HTML terlihat seperti teks biasa dengan kurung siku yang aneh. Tapi di balik layar, browser melakukan proses parsing yang canggih untuk mengubah teks itu menjadi halaman web yang hidup dan interaktif.

Tag, Elemen, dan Atribut: Tiga Serangkai

Sintaks HTML dibangun di atas tiga konsep inti. Kalau kamu paham ketiganya, kamu udah nguasain 80% HTML.

• Tag: Instruksi yang dibungkus kurung siku, seperti <p> atau <img>. Sebagian besar tag datang berpasangan: tag pembuka (<p>) dan tag penutup (</p>). Tag penutup punya garis miring.
• Elemen: Paket lengkap—tag pembuka, konten di dalamnya, dan tag penutup. Ini keseluruhan paketnya.
• Atribut: Informasi atau pengaturan tambahan untuk sebuah elemen, ditempatkan di dalam tag pembuka. Atribut datang dalam pasangan nama="nilai".

Mari kita bedah contoh sederhana ini:

<a href="https://flowing.dev" class="main-link">Visit FlowingDev</a>

• Tag-nya adalah <a> dan </a>. a adalah singkatan dari "anchor" (jangkar), dan digunakan untuk hyperlink.
• Elemen-nya adalah seluruh baris, dari <a... sampai ...</a>.
• Konten-nya adalah teks "Visit FlowingDev".
• Elemen ini punya dua atribut:
  • href="https://flowing.dev": Atribut "hypertext reference", yang memberi tahu browser ke mana harus pergi saat link diklik. Ini adalah atribut paling penting untuk tag <a>.
  • class="main-link": Atribut "class", yang berfungsi sebagai pengait bagi CSS untuk menata gaya elemen atau bagi JavaScript untuk menemukannya.

Document Object Model (DOM)

Ketika browser menerima file HTML-mu, ia tidak hanya membacanya baris per baris seperti buku. Browser akan mem-parsing teks dan membangun struktur pohon logis di memori yang disebut Document Object Model (DOM).

Anggap saja kode sumber HTML-mu sebagai cetak biru arsitektur sebuah rumah. DOM adalah kerangka rumah yang sudah jadi—struktur nyata yang bisa kamu periksa dan modifikasi.

Perhatikan halaman HTML dasar ini:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>A Heading</h1>
    <p>Some text.</p>
  </body>
</html>

Browser melihat nesting (susunan) tag dan membangun pohon DOM ini:

• html
  • head
    • title
      • (teks) "My Page"
  • body
    • h1
      • (teks) "A Heading"
    • p
      • (teks) "Some text."

Struktur pohon ini adalah segalanya. CSS menerapkan gaya pada node (simpul) di pohon ini. JavaScript dapat memanipulasi pohon ini—menambah node baru (elemen), menghapus yang lama, atau mengubah atributnya—inilah cara halaman web modern menjadi dinamis dan interaktif tanpa perlu reload. DOM adalah jembatan antara HTML statis dan aplikasi yang dinamis.

Elemen Block vs. Inline

Tidak semua elemen diciptakan sama. Dalam hal tata letak, mereka terbagi menjadi dua keluarga utama.

• Elemen Block-level: Ini adalah elemen kelas berat. Mereka bersifat struktural. Mereka biasanya dimulai di baris baru dan memakan seluruh lebar yang tersedia, seperti paragraf dalam sebuah buku.

  • Contoh: <div>, <p>, <h1>-<h6>, <ul>, <li>, <form>, <article>.

• Elemen Inline: Ini lebih halus. Mereka tidak memulai baris baru dan hanya memakan lebar sebanyak yang dibutuhkan kontennya. Mereka mengalir bersama teks di sekitarnya.

  • Contoh: <a>, <span>, <strong>, <em>, <img>, <input>.

Memahami perbedaan ini sangat penting untuk tata letak CSS. Mencoba mengatur lebar pada elemen inline sering kali tidak akan berhasil seperti yang kamu harapkan, dan bertanya-tanya mengapa dua elemen berdampingan padahal kamu ingin mereka bertumpuk adalah teka-teki klasik block-vs-inline.

<div style="background-color: #eee;">
  Div ini adalah elemen block-level. Ia memakan lebar penuh.
</div>
<div style="background-color: #ddd;">
  Ini adalah div kedua. Ia dimulai di baris baru.
</div>
<p>
  Ini adalah paragraf yang berisi 
  <a href="#">link inline</a> dan beberapa 
  <strong>teks tebal inline</strong>. Perhatikan bagaimana mereka semua
  tetap berada dalam alur teks.
</p>

Kisah dari dunia nyata

Tombol "Beli Sekarang" yang Posisinya Aneh

Seorang developer junior ditugaskan untuk menambahkan deskripsi produk dan tombol "Beli Sekarang". Dia menulis kode yang tampak logis: <p>Produk Keren! Hanya $9.99! <button>Beli Sekarang</button></p>. Di monitor desktopnya yang besar, semuanya terlihat sempurna. Tombolnya pas di akhir kalimat. Kodenya pun di-push.

Beberapa hari kemudian, analitik menunjukkan penurunan konversi di perangkat mobile. Seorang developer senior menyelidiki dan membuka halaman itu di ponsel. Teks "Produk Keren! Hanya $9.99!" terpotong menjadi dua baris, dan tombol "Beli Sekarang" ikut turun, berakhir di posisi yang aneh di bawah awal kalimat. Kelihatannya rusak. Si developer junior telah menempatkan elemen yang bersifat seperti block (button sering berperilaku seperti itu) di dalam paragraf, menciptakan perilaku wrapping yang tidak terduga.

Perbaikannya sederhana: pisahkan struktur dari konten. Teksnya dimasukkan ke dalam tag <p> tersendiri, dan tombolnya ke dalam <div> tersendiri. Sekarang, paragrafnya bisa terpotong sesukanya, dan tombolnya, sebagai blok yang berbeda, akan selalu muncul dengan rapi di bawahnya, tidak peduli ukuran layarnya.

Pelajaran yang bisa diambil: Memahami model kotak HTML dan perbedaan block/inline adalah hal yang mutlak untuk membuat tata letak yang dapat diprediksi dan tidak rusak di berbagai perangkat.

Blog yang Tidak Bisa Di-crawl

Sebuah startup meluncurkan blog baru yang keren dengan framework JavaScript canggih. Blog itu cepat, penuh animasi, dan terasa seperti aplikasi native. Seluruh kode sumber HTML situs itu pada dasarnya hanya <div id="app"></div> dan tag <script> raksasa yang membangun halaman di browser pengguna. Mereka bangga dengan teknologi mereka.

Enam bulan kemudian, mereka punya masalah: nol trafik organik dari Google. Mereka tidak terlihat. Ketika crawler mesin pencari mengunjungi situs mereka, ia tidak melihat artikel dan judul yang indah; ia melihat <div> yang kosong. Meskipun crawler Google sudah lebih baik dalam mengeksekusi JavaScript, itu adalah langkah ekstra yang mahal, dan tidak selalu berhasil. Blog tersebut tidak mengkomunikasikan struktur atau kontennya dalam bahasa asli si crawler: HTML semantik yang polos.

Tim harus merekayasa ulang arsitektur situs mereka untuk menggunakan Server-Side Rendering (SSR), di mana server menghasilkan HTML lengkap untuk setiap halaman sebelum mengirimkannya ke browser. Begitu mereka menerapkan perubahan itu, halaman mereka mulai terindeks dengan benar.

Pelajaran yang bisa diambil: HTML semantik (<article>, <h1>, <p>) bukan hanya saran; itu adalah caramu mengkomunikasikan makna dan hierarki kontenmu ke mesin pencari dan alat otomatis lainnya.

Mimpi Buruk Aksesibilitas

Sebuah perusahaan meluncurkan dasbor internal baru. Untuk mendapatkan tampilan pixel-perfect yang diinginkan desainer, para developer menggunakan elemen <div> untuk segalanya. <div> dengan border-radius dan event onClick JavaScript menjadi tombol. <div> lain dengan event onClick menjadi link.

Dasbor itu tidak dapat digunakan oleh seorang karyawan yang mengandalkan screen reader. Screen reader membacakan "group" untuk setiap elemen interaktif, tidak memberikan petunjuk apakah itu tombol, link, atau yang lainnya. Lebih jauh lagi, karena <div> tidak dapat difokus secara default, navigasi dengan tombol Tab menjadi mustahil.

Seorang konsultan aksesibilitas dipanggil dan merasa ngeri. Perbaikannya melibatkan refactor yang membosankan tetapi penting: mengganti <div onClick="..."> dengan <button>, <a>, dan elemen semantik lain yang sesuai. Tag-tag native ini datang dengan banyak sekali fungsionalitas aksesibilitas bawaan secara gratis—fokus keyboard, pengumuman peran yang tepat, dan banyak lagi.

Pelajaran yang bisa diambil: Gunakan tag HTML yang tepat untuk tugasnya. Kamu tidak hanya memberi tahu browser cara menggambar sesuatu; kamu memberi tahu teknologi pendukung (seperti screen reader) apa benda itu.

Kesalahan umum dan jebakan

• "Div-itis" (Penyakit Div). Penggunaan <div> dan <span> yang berlebihan padahal tag yang lebih spesifik dan semantik seperti <nav>, <main>, <article>, <aside>, atau <button> akan lebih baik mendeskripsikan tujuan konten.
• Melupakan dasar-dasar aksesibilitas. Lupa menambahkan atribut alt pada tag <img> adalah kesalahan klasik. Ini membuat pengguna dengan gangguan penglihatan tidak mendapatkan informasi apa pun tentang gambar tersebut. Demikian pula, menggunakan <b> untuk menebalkan teks alih-alih <strong> (yang menunjukkan pentingnya teks) bisa menjadi peluang semantik yang terlewatkan.
• Nesting tag yang tidak benar. Kamu tidak bisa begitu saja menempatkan tag apa pun di dalam tag lain. Kesalahan umum adalah membungkus elemen block-level (seperti <div>) di dalam elemen inline (seperti <a>). Meskipun browser akan mencoba sebaik mungkin untuk menampilkannya, DOM yang dihasilkan bisa berantakan dan menyebabkan perilaku aneh.
• Mengabaikan <head>. Bagian <head> sangat penting. Lupa mengatur pengkodean karakter (<meta charset="UTF-8">) dapat menyebabkan teks menjadi kacau. Lupa tag meta viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0">) adalah alasan nomor satu mengapa situs seluler terlihat diperkecil dan kecil.
• Menganggap kosakatanya terbatas. HTML adalah bahasa yang hidup. Tag dan atribut baru ditambahkan seiring waktu (misalnya, <main>, <picture>). Mengandalkan pola dari tahun 2010 berarti kamu kehilangan cara yang lebih kuat dan semantik untuk menyusun dokumenmu.

Kenapa ini penting buat kamu

Kalau kamu berkecimpung di dunia web secara profesional, HTML itu bukan pilihan.

• Bagi developer front-end, ini adalah fondasinya. Framework seperti React, Vue, dan Svelte memang hebat, tapi pada akhirnya mereka semua menghasilkan HTML. Memahami output target membuatmu menjadi developer yang jauh lebih efektif.
• Bagi developer back-end, kamu sering kali menghasilkan potongan HTML, membangun API yang akan dikonsumsi oleh front-end HTML, atau bekerja dengan templating engine yang menghasilkan HTML. Mengetahui aturannya akan mencegahmu merilis markup yang rusak atau tidak semantik.
• Bagi desainer UI/UX, memahami blok bangunan dasar HTML (div, span, p, h1) membantumu membuat desain yang praktis untuk dibangun dan dipetakan dengan rapi ke komponen asli web.
• Bagi spesialis SEO dan manajer konten, pemahaman yang kuat tentang HTML (terutama heading, tag judul, dan deskripsi meta) adalah dasar dari profesimu.

HTML adalah bahasa digital yang paling tahan lama, backward-compatible, dan universal. Halaman web yang ditulis pada tahun 1995 akan tetap bisa ditampilkan hari ini. Ini adalah satu-satunya keahlian yang tetap esensial melalui setiap siklus hype dan perang framework, dan ia tidak akan ke mana-mana.

Pelajari lebih lanjut

• MDN Web Docs: HTML — Referensi utama sehari-hari. Komprehensif, dengan contoh-contoh yang bagus.
• WHATWG HTML Living Standard — Spesifikasi resmi HTML yang terus diperbarui. Inilah sumber kebenarannya.
• The History of HTML on Wikipedia — Untuk konteks tentang bagaimana dan mengapa HTML ada.
• Google SEO Starter Guide — Menunjukkan dampak praktis dari HTML yang baik terhadap visibilitas di mesin pencari.
• The A11Y Project — Sebuah upaya berbasis komunitas untuk mempermudah aksesibilitas web, dengan banyak sekali tips yang berakar pada penulisan HTML yang benar.