Apa Itu HTML? Panduan Pemula untuk Fondasi Web

Coba buka situs apa saja — situs berita, toko online, atau halaman yang sedang kamu baca ini. Di balik semuanya selalu ada satu hal yang sama: HTML. Inilah lapisan yang menyatukan sebuah halaman web. Jadi kalau kamu baru mulai belajar pengembangan web, di sinilah titik yang pas untuk berangkat. Kabar baiknya, ini juga awal yang menyenangkan, karena HTML termasuk salah satu materi paling gampang di seluruh bidang ini.

Begitu kamu sampai di akhir tulisan, kamu bakal paham HTML itu sebenarnya apa, gimana cara kerjanya di balik layar, dan kamu sudah menulis sebuah halaman web betulan dengan tanganmu sendiri. Nggak perlu bekal apa-apa. Yuk, langsung saja.

HTML itu sebenarnya apa

HTML itu singkatan dari HyperText Markup Language. Namanya memang panjang, tapi tiap kata sebenarnya punya makna yang berguna, jadi yuk kita pecah satu per satu.

HyperText itu teks yang bisa menautkan ke teks lain. Tautan yang bisa diklik lalu melempar kamu dari satu halaman ke halaman lain — nah, di situlah letak “hyper”-nya. Markup artinya kamu mengambil teks biasa lalu menandainya: tiap bagian kamu bungkus dengan label kecil yang menjelaskan itu apa — “ini judul,” “ini paragraf,” “ini gambar.” Sedangkan Language maksudnya HTML punya aturan penulisannya sendiri, persis seperti bahasa lainnya.

Kalau ada satu kalimat yang paling layak kamu ingat dari seluruh artikel ini, ini dia: HTML menjelaskan konten kamu itu apa, bukan seperti apa tampilannya. Tugas HTML adalah bilang “ini judulnya, ini paragrafnya, ini daftarnya, ini tombolnya.” Soal seperti apa hal-hal itu akhirnya kelihatan — warnanya, jenis hurufnya, jaraknya — itu urusan lain yang dipegang CSS, yang nanti kita bahas lagi.

Biar gampang, bayangkan saja sebuah rumah:

• HTML itu rangka dan dindingnya — strukturnya. Dialah yang menentukan letak ruangan dan letak pintu.
• CSS itu catnya, perabotnya, pokoknya seluruh tampilan rumah.
• JavaScript itu kabel dan pipanya — bagian yang bekerja begitu kamu menekan saklarnya.

Rumah yang baru berupa rangka tanpa cat pun tetap bisa berdiri. Polos memang, tapi tetap berfungsi. Begitu juga HTML kalau berdiri sendirian: tampilannya seadanya, tapi sepenuhnya jalan.

Tag dan elemen: bagaimana semuanya bekerja

HTML mengerjakan tugasnya dengan cara membungkus kontenmu di dalam tag. Tag itu sebenarnya cuma sebuah kata kunci yang diapit tanda kurung sudut, misalnya <p> atau <h1>.

Sebagian besar tag muncul berpasangan: satu untuk membuka, satu untuk menutup. Tag penutupnya pakai kata yang sama, hanya saja ada garis miring di depannya. Coba lihat contoh paragraf berikut:

<p>Ini adalah sebuah paragraf teks.</p>

Ada tiga hal yang sedang terjadi di situ:

• <p> adalah tag pembuka — “di sini sebuah paragraf dimulai.”
• </p> adalah tag penutup — garis miringnya menandakan “dan di sini paragrafnya selesai.”
• Teks di tengah-tengahnya adalah konten.

Gabungkan ketiganya — tag pembuka, konten, tag penutup — dan jadilah satu elemen. Jadi waktu ada orang menyebut “tag,” maksudnya bagian kurung tadi; sementara “elemen” itu paket utuhnya. Dalam obrolan santai orang memang sering menyamakan kedua kata ini, tapi di situlah letak bedanya.

Ada beberapa elemen yang nantinya bakal sering kamu pakai:

<h1>Ini judul besar</h1>
<h2>Ini judul yang lebih kecil</h2>
<p>Ini sebuah paragraf.</p>
<strong>Teks ini tebal dan penting.</strong>
<em>Teks ini ditekankan.</em>

Judul tersedia dari <h1> sampai <h6>, mulai dari yang paling besar dan penting sampai yang paling kecil — bayangkan saja seperti susunan kerangka sebuah dokumen, dengan <h1> sebagai judul utamanya.

Atribut: memberi elemen informasi tambahan

Kadang sebuah tag butuh lebih dari sekadar namanya supaya tugasnya beres. Di sinilah atribut masuk. Atribut ditaruh di dalam tag pembuka dan memberikan sedikit informasi tambahan ke elemen, dengan format nama="nilai".

Contoh paling klasiknya adalah tautan. Elemen tautan itu <a> (singkatan dari “anchor”, alias jangkar), dan sebuah tautan jadi percuma kalau dia tidak tahu mau mengarahkanmu ke mana. Tujuan itu kamu kasih lewat atribut href:

<a href="https://acy-partner.com">Kunjungi situs kami</a>

Kalau kita baca dari kiri ke kanan:

• <a> — ini sebuah tautan.
• href="https://acy-partner.com" — atribut yang menentukan tautan ini menuju ke mana.
• Kunjungi situs kami — kalimat yang dilihat dan diklik pengunjung.

Gambar kurang lebih caranya sama. Bedanya, gambar tidak punya teks sendiri untuk dibungkus, jadi kamu cukup mengarahkannya ke sebuah berkas lewat atribut src (“source”, alias sumber), lalu menjelaskannya pakai alt (“alternative text”, alias teks alternatif):

<img src="kucing.jpg" alt="Seekor kucing oranye yang mengantuk" />

Mungkin kamu sadar <img> tadi tidak punya tag penutup. Memang ada segelintir elemen yang bersifat self-closing alias menutup sendiri — elemen seperti ini tidak bisa memuat konten apa pun, jadi tidak ada yang perlu dibungkus, tidak ada juga yang perlu ditutup. Yang paling sering kamu temui adalah <img>, <br> (ganti baris), dan <hr> (garis pembatas horizontal).

Menulis halaman pertamamu

Sekarang waktunya merangkai semua potongan tadi jadi satu halaman betulan yang benar-benar jalan. Setiap dokumen HTML yang rapi selalu dibangun di atas kerangka dasar yang sama. Tidak usah repot-repot menghafalnya dulu — baca saja, lalu rasakan polanya.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Halaman Pertamaku</title>
  </head>
  <body>
    <h1>Halo, web!</h1>
    <p>Ini halaman web pertamaku. Aku membuatnya dengan HTML.</p>
    <a href="https://acy-partner.com">Dan ini sebuah tautan.</a>
  </body>
</html>

Percaya atau tidak, itu sudah halaman web yang utuh. Simpan ke dalam berkas berakhiran .html, klik dua kali, dan browser akan membukanya sama seperti situs lain pada umumnya. Yuk kita kupas satu per satu:

• <!DOCTYPE html> selalu berada di baris paling atas tiap halaman HTML. Tugasnya memberi tahu browser, “perlakukan ini sebagai HTML modern.” Ini sebetulnya bukan tag — anggap saja stempel yang dibubuhkan di berkasnya. Jangan pernah lupa menaruhnya.
• <html lang="id"> adalah elemen akar yang membungkus seluruh isi. Atribut lang mengabari browser dan mesin pencari bahwa halaman ini berbahasa Indonesia. Untuk halaman berbahasa Inggris, kamu tinggal menulis lang="en".
• <head> menampung informasi tentang halaman yang tidak dibaca langsung oleh pengunjung — pengaturan, metadata, dan judul.
• <meta charset="UTF-8"> memberi tahu browser kumpulan karakter mana yang dipakai. UTF-8 menampung hampir semua huruf, simbol, dan emoji, jadi pastikan kamu menyertakannya, kalau tidak teksmu bisa berubah jadi karakter aneh.
• <meta name="viewport" ...> membuat halaman menyesuaikan ukurannya dengan pas di ponsel. Tanpa baris ini, situsmu bakal tampil mungil dan seakan di-zoom-out di layar HP.
• <title> adalah teks yang muncul di tab browser, sekaligus judul yang dipajang Google di hasil pencarian. Teks ini tidak ikut tampil di dalam halamannya.
• <body> adalah semua yang benar-benar dilihat pengunjung — judul, paragraf, gambar, tautan, tombol. Di sinilah nanti kamu paling banyak menghabiskan waktu.

Menaruh elemen di dalam elemen lain

Elemen bisa memuat elemen lain di dalamnya. Ini namanya nesting alias penyarangan, dan inilah cara kamu menyusun struktur yang sesungguhnya, bukan cuma tumpukan teks yang datar. Contohnya sebuah daftar: ia berupa elemen <ul> (unordered list, daftar tak berurut) yang di dalamnya berisi beberapa elemen <li> (list item, butir daftar):

<ul>
  <li>Belajar HTML</li>
  <li>Belajar CSS</li>
  <li>Belajar JavaScript</li>
</ul>

Ada satu aturan yang sebaiknya kamu biasakan sejak dini: tutup tag dengan urutan kebalikan dari saat kamu membukanya. Kalau kamu buka A lalu B, maka tutup B dulu, baru A. Anggap saja seperti kotak-kotak yang disusun satu di dalam yang lain. Yang ini sudah benar:

<p>Ini teks yang <strong>sangat penting</strong>.</p>

Sedangkan yang ini salah, karena tag-nya malah saling menyilang, bukan tersarang dengan rapi:

<p>Ini teks yang <strong>sangat penting</p></strong>

Browser memang cukup pemaaf dan biasanya bisa menebak maksudmu, tapi nesting yang berantakan gampang memunculkan bug yang menyebalkan untuk dilacak belakangan. Rapikan dari sekarang, dan kamu menghemat banyak pusing di kemudian hari.

Bagaimana HTML, CSS, dan JavaScript membagi tugas

Ketiga nama ini bakal terus kamu dengar disebut bersamaan, jadi yuk kita tegaskan siapa mengerjakan apa. Bayangkan sebuah tombol:

<button>Beli sekarang</button>

• HTML yang membuat tombolnya dan memberinya tulisan “Beli sekarang.” Kalau cuma sendirian, tampilannya polos dan abu-abu, tapi sudah benar-benar tombol yang bisa diklik.
• CSS yang mempercantiknya — latar hijau, sudut membulat, jenis huruf yang lebih enak dilihat, plus sedikit efek saat kursor menyorotnya.
• JavaScript yang membuatnya berbuat sesuatu — begitu diklik, ia memasukkan barang ke keranjang, membuka popup, atau mengirim pesanan ke server.

Tiap lapisan punya jatah pekerjaannya masing-masing yang jelas. Enaknya, kamu bisa mempelajarinya satu per satu, persis menurut urutan itu — dan semuanya berawal dari HTML, sebab tidak ada yang bisa dipercantik maupun dibuat interaktif sebelum strukturnya berdiri lebih dulu.

Elemen yang paling sering kamu pakai

Elemen HTML itu ada ratusan, tapi kamu sama sekali tidak perlu menghafal semuanya. Dalam pekerjaan sehari-hari, kamu cuma bolak-balik memakai segelintir yang itu-itu saja. Nah, inilah yang layak kamu kenali lebih awal:

Kuasai yang segelintir ini saja, dan kamu sudah bisa membangun cukup banyak hal. Sisanya tinggal kamu cari begitu butuh — dan percayalah, kamu memang akan sering mencarinya. Orang yang sudah bertahun-tahun menggeluti bidang ini pun tetap rutin mencari elemen atau atribut yang persis. Tidak ada satu pun yang menyimpan seluruhnya di kepala.

Kesalahan yang sering dilakukan pemula

Dengan tahu jebakan-jebakan yang umum sejak awal, kamu terhindar dari acara menatap layar sambil bingung di mana letak salahnya:

• Lupa menutup tag. Buka sebuah <div>, tapi </div>-nya kelupaan, lalu seluruh tata letakmu bisa melenceng dengan cara yang aneh-aneh. Tag penutup ternyata lebih krusial daripada yang terlihat.
• Menaruh konten yang seharusnya tampil di dalam <head>. Seperti sudah dibahas tadi: yang tampil itu rumahnya di <body>. Kalau ada yang tidak muncul, periksa ini paling awal.
• Melewatkan teks alt pada gambar. Jelek untuk aksesibilitas, jelek juga untuk pencarian. Selalu deskripsikan gambarmu.
• Salah memilih elemen untuk pekerjaannya. Sesuatu yang diklik orang semestinya berupa <button> atau <a>, bukan <div> yang kamu akal-akali biar bisa diklik. Pilih elemen yang tepat, dan kamu otomatis dapat dukungan keyboard serta pembaca layar secara gratis. Inilah inti dari yang orang sebut HTML semantik — topik yang cukup besar dan pantas dibahas tuntas di artikelnya sendiri nanti.
• Berharap HTML polos langsung terlihat rapi. Tidak akan, dan itu memang wajar. Mempercantik tampilan adalah pekerjaan CSS, bukan pertanda kamu berbuat salah.

Penutup

Yuk kita rangkum apa saja yang sudah kamu pegang sekarang:

• HTML (HyperText Markup Language) adalah bahasa yang menentukan struktur dan makna setiap halaman web.
• Konten dibungkus di dalam tag seperti <p> dan <h1>; tag pembuka, kontennya, dan tag penutup bila digabung membentuk sebuah elemen.
• Atribut seperti href dan src memberi elemen informasi ekstra.
• Setiap halaman bertumpu pada kerangka yang sama: <!DOCTYPE html>, lalu <html> yang menampung <head> (informasi di balik layar) dan <body> (konten yang tampil).
• HTML cuma satu dari tiga lapisan yang bekerja bahu-membahu: HTML untuk struktur, CSS untuk tampilan, JavaScript untuk perilaku.

Itu fondasi yang sungguhan, dan sekarang kamu benar-benar mengerti isinya — bukan sebatas hafal istilah kerennya. Langkah terbaik selanjutnya adalah menulis HTML sendiri. Salin contoh halaman pertama tadi ke berkas bernama index.html, buka di browser, lalu mulai utak-atik. Ganti judulnya, tambah satu paragraf, rusak sesuatu dengan sengaja lalu perbaiki lagi. Otak-atik langsung semacam inilah yang bikin pemahamannya benar-benar nempel.

Di artikel berikutnya kita akan pelan-pelan membedah struktur dasar dokumen HTML secara lebih rinci — apa sih sebenarnya tugas tiap bagian dari kerangka tadi, dan bagaimana menyiapkan sebuah halaman dengan benar dari nol.