HTML dalam Web Development

Budi dan Siti bekerja pada tim yang sama, tetapi fokus mereka berbeda: Budi menggarap tampilan halaman, sedangkan Siti mengelola logika dan data di server. Meskipun berbeda keahlian, keduanya berjumpa dengan HTML hampir setiap hari. Pada Chapter ini kita melihat posisi HTML dalam kerja sehari-hari berbagai peran, alasan setiap peran perlu memahaminya, dan contoh alur kerja nyata ketika satu bagian halaman ditambahkan. Pemahaman ini membantu kita memilih arah spesialisasi nanti.

Peran Front-end, Back-end, dan Full-stack #

Tim web development umumnya terbagi menjadi tiga peran besar. Pembagian tersebut memengaruhi cara HTML menyentuh pekerjaan masing-masing:

Front-end bekerja paling dekat dengan HTML karena markup adalah bahan kerja utamanya. Back-end menulis template, yaitu cetakan berisi markup dengan tempat kosong untuk data; hasil olahannya adalah dokumen HTML yang dikirim ke browser. Full-stack menyeberangi kedua sisi tersebut, sehingga membaca dan menulis HTML menjadi keterampilan yang tak terpisahkan dari pekerjaannya.

Mengapa Semua Peran Memerlukan Pemahaman HTML #

Bukan hanya front-end yang memerlukan pemahaman HTML. Alasannya dapat kita petakan per peran:

• Front-end: markup yang tertata memudahkan penerapan CSS dan pemasangan script JavaScript; markup yang tidak tertata memperbanyak pekerjaan perbaikan.
• Back-end: satu tag yang keliru pada template membuat data tidak tersusun rapi di browser, dan pelacakan masalahnya tetap berakhir pada lapisan HTML.
• Full-stack: menjadi penghubung antara struktur yang diminta dan data yang tersedia, dan keduanya berjumpa pada markup.
• Peran pendukung seperti QA dan penulis konten juga membaca markup untuk memeriksa heading, link, dan metadata.

Dengan kata lain, HTML adalah bahasa bersama yang dipahami seluruh anggota tim; markup yang jelas mengurangi kesalahpahaman antarperan.

HTML sebagai Kontrak Struktur #

Sebelum CSS dan JavaScript ditulis, tim biasanya menyepakati struktur halaman terlebih dahulu. Kesepakatan itu sering disebut kontrak struktur: halaman profil, misalnya, disepakati memuat heading nama, paragraf perkenalan, dan daftar kontak. Dengan kontrak yang jelas, front-end dapat menyiapkan tampilan sementara back-end menyiapkan data, karena keduanya mengacu pada struktur yang sama. Sebaliknya, perubahan struktur tanpa koordinasi membuat tampilan dan script yang telah menempel ikut bermasalah. Di sinilah HTML menjadi dokumen pertama yang ditulis dan yang paling sering dikonsultasikan.

Alur Kerja Nyata Menambah Satu Section #

Misalkan manajer meminta Budi menambahkan bagian promo mingguan pada halaman utama warung kopi. Alur kerja yang dijalankan Budi tampak sederhana, tetapi mewakili siklus kerja nyata:

1. Buka file halaman di editor teks.
2. Tentukan posisi bagian baru, misalnya setelah paragraf pengantar.
3. Tulis elemen judul bagian h2 beserta elemen paragraf isinya.
4. Simpan file, muat ulang halaman di browser, lalu periksa hasilnya.
5. Bagikan perubahan kepada rekan untuk styling atau penghubungan data dinamis.

Contoh berikut memperlihatkan hasil akhir langkah tersebut. Baris yang diawali <!-- dan diakhiri --> disebut comment, yaitu catatan untuk manusia yang diabaikan browser; comment membantu rekan menemukan titik perubahan. Simpan kode ini sebagai file tambah-section.html:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Warung Kopi Melati</title>
</head>
<body>
  <h1>Warung Kopi Melati</h1>
  <p>Kopi hangat dan roti bakar tersaji setiap hari.</p>
  <!-- Section baru yang diminta: promo mingguan -->
  <h2>Promo Minggu Ini</h2>
  <p>Beli dua kopi susu, dapat satu roti bakar gratis pada hari Selasa.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul besar "Warung Kopi Melati" di bagian atas
  - Paragraf pengantar di bawahnya
  - Judul bagian "Promo Minggu Ini" yang lebih kecil dari judul utama
  - Paragraf berisi teks promo

Mari kita telaah peran setiap baris penting pada perubahan ini:

1. Baris 8-9 (<h1> dan <p>): struktur lama sebelum penambahan.
2. Baris 10 (comment): penanda titik perubahan; browser mengabaikan isi comment sepenuhnya.
3. Baris 11 (<h2>): judul bagian baru pada level di bawah judul utama, sesuai hierarki heading.
4. Baris 12 (<p>): isi promo yang menyertai judul bagian.
5. Baris 13-14: penutup </body> dan </html> tidak berubah.

Perubahan sekecil apa pun tetap melewati siklus ini: ubah markup, muat ulang, periksa, lalu serahkan kepada peran berikutnya. Kebiasaan tersebut berlaku pada tim sekecil apa pun, termasuk saat kita bekerja sendirian.

Posisi HTML dalam tim membuat status spesifikasinya penting, karena semua peran mengacu pada dokumen yang sama. Chapter berikutnya, HTML Living Standard, menjelaskan siapa yang menjaga dokumen tersebut dan bagaimana HTML berkembang tanpa nomor versi.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Basic HTML syntax
• MDN Web Docs — Debugging HTML
• web.dev — Learn HTML

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Warung Kopi Melati</title>
</head>
<body>
  <h1>Warung Kopi Melati</h1>
  <p>Kopi hangat dan roti bakar tersaji setiap hari.</p>
  <!-- Section baru yang diminta: promo mingguan -->
  <h2>Promo Minggu Ini</h2>
  <p>Beli dua kopi susu, dapat satu roti bakar gratis pada hari Selasa.</p>
</body>
</html>