Tag, elemen, dan atribut
Bongkar anatomi kode HTML menjadi tiga bagian intinya.
Pahami konsepnya
Tag adalah penanda yang dibaca browser: dibuka dengan kurung sudut seperti <p> dan ditutup dengan garis miring seperti </p>. Isi yang diapit keduanya — teks, gambar, atau tag lain — itulah elemen. Jadi <p>Halo</p> adalah elemen paragraf yang dibangun dari tag pembuka, isi, dan tag penutup.
Atribut adalah informasi tambahan yang menempel pada tag pembuka, ditulis berpasangan nama="nilai". Contohnya href pada tautan yang menentukan alamat tujuan, atau src pada gambar yang menunjukkan lokasi berkasnya. Satu tag boleh membawa beberapa atribut sekaligus.
Beberapa tag bekerja tanpa pasangan penutup karena tidak memiliki isi: <img>, <br>, dan <meta> disebut tag kosong. Menyusun HTML pada dasarnya membalik logika itu: pilih tag yang tepat untuk tiap isi, beri atribut bila butuh informasi tambahan, dan biarkan browser yang menggambarkannya.
Coba contoh kode
<a href="https://www.google.com" target="_blank">Cari di Google</a>
<!-- a = tag tautan
href = atribut alamat tujuan
target = atribut cara membuka
"Cari di Google" = isi elemen -->Satu baris ini memuat ketiganya: tag a, dua atribut (href menentukan alamat, target="_blank" meminta tab baru), dan isi berupa teks tautan. Klik hasilnya di browser dan Google terbuka di tab terpisah.
Tag yang sering dipakai
<p>paragraf</p>
<h1>judul utama</h1>
<strong>teks penting</strong>
<div>wadah serbaguna</div>
<ul><li>butir daftar</li></ul>
<table><tr><td>sel tabel</td></tr></table>
<img src="foto.jpg" alt="deskripsi foto">
<a href="halaman.html">tautan</a>Kumpulan ini mencakup mayoritas kebutuhan harian: kerangka teks (p, h1, strong), wadah (div), daftar (ul, li), tabel, gambar, dan tautan. Nama tag menuliskan fungsinya — membaca kode HTML pun jadi mirip membaca singkatan berbahasa Inggris.
Latihan singkat
Tulis satu elemen tautan lengkap dengan dua atribut, lalu identifikasi tag, atribut, dan isinya di kode milikmu sendiri.