HTML (HyperText Markup Language) adalah bahasa untuk memberi struktur pada konten web. HTML bukan bahasa pemrograman: tidak ada perhitungan, perulangan, atau logika. Tugasnya hanya menandai "ini judul", "ini paragraf", "ini gambar", "ini tautan".

Analogi gampangnya, bayangkan membangun rumah:

Kelas ini fokus ke dua yang pertama. JavaScript cuma muncul sedikit di bab multimedia.

Dari HTML pertama sampai HTML5

HTML pertama kali diperkenalkan Tim Berners-Lee sekitar 1991. Versi HTML 4.01 (1999) dipakai lebih dari satu dekade. Lalu WHATWG mempublikasikan draft awal HTML5 pada 2008, dan W3C meresmikannya sebagai rekomendasi pada Oktober 2014.

Apa yang baru di HTML5? Tiga hal besar:

1. Elemen semantik seperti <header>, <nav>, <main>, <article>, <footer>, jadi struktur halaman punya makna.
2. Multimedia native: <audio> dan <video> bisa diputar tanpa plugin seperti Flash.
3. Web API: localStorage, Geolocation, drag and drop, canvas, dan lain-lain.

Sekarang HTML tidak lagi diberi nomor versi. Standarnya bernama HTML Living Standard, dikelola WHATWG dan terus diperbarui. Jadi saat orang bilang "HTML5", maksudnya biasanya "HTML modern".

Saat kamu membuka sebuah halaman, browser kira-kira melakukan ini:

1. Mengunduh file HTML dari server (atau membuka file lokal).
2. Mem-parse teks HTML dari atas ke bawah, mengubah setiap tag menjadi objek.
3. Menyusun objek-objek itu menjadi pohon bernama DOM (Document Object Model). <html> adalah akar, <head> dan <body> cabangnya, dan seterusnya.
4. Menggabungkan DOM dengan aturan CSS, menghitung posisi dan ukuran, lalu menggambar hasilnya di layar.

Satu hal penting: browser itu pemaaf. Kalau kamu lupa menutup tag, browser akan menebak maksudmu dan tetap menampilkan sesuatu. Kedengarannya enak, tapi justru berbahaya, karena tebakan browser bisa beda dengan maksudmu dan bug-nya jadi susah dicari. Jadi biasakan menulis HTML yang rapi sejak awal.

Ini kerangka minimal yang selalu kamu pakai:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Sasa</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Halo, aku Sasa</h1>
    <p>Lagi belajar HTML5 dan CSS3.</p>
  </body>
</html>

Kita bedah satu per satu:

• <!DOCTYPE html> wajib di baris pertama. Ini memberi tahu browser bahwa dokumen ini HTML modern. Tanpa doctype, browser masuk ke quirks mode, mode kompatibilitas lama yang membuat CSS berperilaku aneh.
• <html lang="id"> adalah elemen akar. Atribut lang memberi tahu bahasa halaman. Screen reader memakainya untuk memilih pelafalan, dan mesin pencari memakainya untuk memahami bahasa konten.
• <head> berisi metadata: informasi tentang halaman yang tidak tampil di area konten.
• <meta charset="UTF-8"> memastikan huruf seperti é, emoji, atau aksara non-Latin tampil benar, bukan jadi simbol aneh.
• <meta name="viewport" ...> adalah kunci agar halaman responsif di HP. Tanpa ini, browser mobile berpura-pura layarnya selebar sekitar 980px, lalu mengecilkan semuanya sehingga tulisan jadi mungil.
• <title> muncul di tab browser, di bookmark, dan sebagai judul di hasil pencarian.
• <body> berisi semua yang terlihat pengguna.

Heading dan paragraf

Ada enam tingkat heading, <h1> sampai <h6>. <h1> adalah judul utama halaman, <h2> sub-bagian, dan seterusnya. Pilih heading berdasarkan tingkat kepentingan, bukan ukuran huruf. Ukuran urusan CSS.

<h1>Resep Nasi Goreng</h1>
<h2>Bahan</h2>
<p>Siapkan nasi putih yang sudah dingin.</p>

Hasilnya: judul besar tebal, sub-judul sedikit lebih kecil, lalu satu paragraf teks biasa dengan jarak di atas dan bawahnya.

Link dan gambar

<a href="https://developer.mozilla.org" target="_blank">Baca dokumentasi MDN</a>
<img src="kucing.jpg" alt="Kucing oranye tidur di atas laptop" width="320">

<a> membuat tautan. Atribut href berisi tujuannya, dan target="_blank" membukanya di tab baru. Teks di antara tag pembuka dan penutup adalah teks yang bisa diklik.

<img> adalah elemen kosong: tidak punya isi dan tidak punya tag penutup. Atribut src berisi alamat gambar, dan alt berisi deskripsi teks. alt itu wajib, bukan hiasan:

• Screen reader membacakan alt untuk pengguna tunanetra.
• Kalau gambar gagal dimuat, alt tampil sebagai gantinya.
• Mesin pencari memakainya untuk memahami isi gambar.

Kalau gambarnya murni dekorasi, tulis alt="" (kosong) supaya screen reader melewatinya.

List

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
<ol>
  <li>Buka editor</li>
  <li>Tulis kode</li>
</ol>

<ul> (unordered list) menampilkan butir dengan titik bulat, cocok untuk daftar yang urutannya tidak penting. <ol> (ordered list) memberi nomor 1, 2, 3, cocok untuk langkah-langkah. Setiap butir harus dibungkus <li>.

Atribut adalah informasi tambahan yang ditulis di tag pembuka dengan pola nama="nilai". Beberapa yang umum:

Ada juga atribut boolean yang cukup ditulis namanya saja, misalnya <input required> atau <video controls>. Keberadaannya sudah berarti "aktif".

Nesting artinya meletakkan elemen di dalam elemen lain. Aturannya seperti kotak bekal: kotak yang dibuka terakhir harus ditutup duluan.

<!-- Benar -->
<p>Belajar <strong>HTML</strong> itu seru.</p>

<!-- Salah: strong ditutup setelah p -->
<p>Belajar <strong>HTML</p></strong>

Selain urutan tutup, perhatikan juga elemen mana boleh berisi apa. <li> harus berada langsung di dalam <ul> atau <ol>. <p> tidak boleh berisi <div> atau heading. Kalau kamu menaruh <div> di dalam <p>, browser diam-diam menutup <p> lebih awal dan DOM-mu jadi berbeda dari yang kamu tulis.

Indentasi (spasi di awal baris) tidak memengaruhi tampilan, tapi sangat membantu mata melihat siapa anak siapa. Biasakan menjorokkan elemen anak dua spasi.

• Lupa doctype, sehingga halaman masuk quirks mode dan CSS seperti width dan box-sizing berperilaku tidak terduga.
• Gambar tanpa alt, atau alt diisi "gambar" saja. Tulis apa yang benar-benar terlihat.
• Memilih heading karena ukurannya, misalnya langsung lompat dari <h1> ke <h4> karena "lebih kecil". Ukuran diatur CSS.
• Butir list tanpa <ul>/<ol>, atau teks langsung di dalam <ul> tanpa <li>.
• Tag ditutup dengan urutan silang, seperti <p><em>teks</p></em>.
• id yang sama dipakai dua kali. Pakai class kalau ingin memberi label ke banyak elemen.