Tag adalah penanda yang digunakan untuk memberi tahu browser bagaimana menyusun dan menampilkan konten di halaman web. Tag ditulis menggunakan kurung sudut (<...>) dan berisi nama tag yang menentukan fungsinya.
Contoh tag yang sering digunakan: <p>, <a>, <h1>, <body>, dan <img>.
Tag Pembuka dan Tag Penutup
Sebagian besar tag HTML ditulis secara berpasangan — ada tag pembuka dan tag penutup. Tag penutup ditandai dengan garis miring (/) sebelum nama tag.
<p>Ini adalah sebuah paragraf.</p>Pada contoh di atas, <p> adalah tag pembuka dan </p> adalah tag penutup. Konten yang berada di antara keduanya akan ditampilkan sebagai paragraf di browser.
Namun, ada juga beberapa tag yang tidak memiliki pasangan penutup. Tag jenis ini disebut self-closing tag atau void element, seperti <br>, <hr>, dan <img>.
Daftar Tag Dasar yang Wajib Diketahui
HTML5 memiliki sekitar 250 tag, tetapi kamu tidak perlu menghafalkan semuanya. Cukup pahami tag-tag dasar berikut ini sebagai fondasi:
| Tag | Fungsi |
|---|---|
<html> |
Membungkus seluruh dokumen HTML |
<head> |
Menampung metadata dan informasi halaman |
<body> |
Menampung konten yang terlihat di browser |
<h1> s.d. <h6> |
Membuat heading (judul) bertingkat |
<p> |
Membuat paragraf teks |
<a> |
Membuat tautan (hyperlink) |
<img> |
Menampilkan gambar |
<!-- --> |
Membuat komentar (tidak ditampilkan di browser) |
Cara Menulis Tag HTML yang Benar
Agar kode HTML-mu valid dan mudah dibaca, perhatikan tiga aturan penting berikut.
1. Selalu Sertakan Tag Wajib
Setiap dokumen HTML harus memiliki lima tag wajib agar lolos validasi W3C. Kelima tag tersebut adalah:
<!DOCTYPE html>— deklarasi tipe dokumen.<html>— elemen root yang membungkus seluruh halaman.<head>— bagian kepala untuk metadata.<title>— judul halaman yang tampil di tab browser.<body>— bagian tubuh untuk konten utama.
<!DOCTYPE html>
<html lang="id">
<head>
<title>Judul Halaman</title>
</head>
<body>
<p>Konten halaman di sini.</p>
</body>
</html>2. Gunakan Huruf Kecil untuk Nama Tag
Meskipun HTML tidak bersifat case-sensitive, standar penulisan yang baik menggunakan huruf kecil untuk semua nama tag. Kode akan terlihat lebih bersih dan konsisten.
Benar:
<body>
<p>Belajar tentang tag di HTML</p>
</body>Kurang tepat:
<BODY>
<P>Belajar tentang tag di HTML</P>
</BODY>Catatan: Khusus <!DOCTYPE html>, penulisan "DOCTYPE" dengan huruf besar merupakan konvensi umum, meskipun huruf kecil juga valid di HTML5.
3. Tutup Tag dengan Urutan yang Benar
Saat menulis tag bersarang (nested), pastikan tag yang dibuka pertama ditutup terakhir. Prinsipnya seperti tumpukan kotak: kotak paling dalam harus ditutup lebih dulu.
Benar:
<i><b><u>teks berformat</u></b></i>Salah:
<i><b><u>teks berformat</i></b></u>Kesalahan penutupan tag bersarang adalah salah satu penyebab paling umum kode HTML tidak valid. Gunakan indentasi (spasi di awal baris) untuk membantu memvisualisasikan struktur bersarang dengan lebih jelas.
Apa Itu Elemen dalam HTML?
Elemen adalah komponen utama yang menyusun dokumen HTML. Jika tag adalah penandanya, maka elemen adalah keseluruhan unit yang terdiri dari tag pembuka, konten di dalamnya, dan tag penutup.
<p align="center">Hello World!</p>Pada contoh di atas, keseluruhan baris tersebut adalah satu elemen <p>. Elemen ini terdiri dari tag pembuka <p align="center">, konten teks "Hello World!", dan tag penutup </p>.
Perbedaan Tag dan Elemen
Banyak pemula yang mencampuradukkan istilah tag dan elemen. Perbedaannya cukup sederhana:
- Tag — hanya penandanya saja, misalnya
<p>atau</p>. - Elemen — keseluruhan unit mulai dari tag pembuka, konten, hingga tag penutup.
Dengan kata lain, tag adalah bagian dari elemen. Sebuah elemen setidaknya memiliki satu tag (untuk void element) atau sepasang tag (pembuka dan penutup).
Elemen Bersarang (Nested Element)
Elemen HTML tidak selalu berisi teks saja. Sebuah elemen dapat menampung elemen lain di dalamnya. Konsep ini disebut nested element atau elemen bersarang.
<div>
<h1>Judul Artikel</h1>
<p>Ini adalah paragraf di dalam elemen div.</p>
</div>Pada contoh di atas, elemen <h1> dan <p> berada di dalam elemen <div>. Hubungan ini membentuk struktur pohon (HTML tree) yang menjadi dasar bagaimana browser memahami dan merender halaman web.
Apa Itu Atribut dalam HTML?
Atribut adalah informasi tambahan yang ditulis di dalam tag pembuka untuk mengatur perilaku atau karakteristik suatu elemen. Atribut ditulis dalam format nama="nilai" dan ditempatkan setelah nama tag.
<a href="https://contoh.com">Kunjungi Website</a>Pada contoh di atas, href adalah nama atribut dan "https://contoh.com" adalah nilainya. Atribut href memberitahu browser ke mana tautan tersebut mengarah.
[Keterangan Gambar: Ilustrasi anatomi atribut HTML yang menunjukkan nama atribut dan nilainya (Alt Text: anatomi atribut html nama dan nilai)] [AI Image Prompt: An educational diagram showing the anatomy of an HTML attribute inside a tag, with labeled arrows pointing to attribute name and attribute value, using code editor dark theme with syntax highlighting, clean flat design style]
Satu Elemen Bisa Memiliki Banyak Atribut
Sebuah elemen tidak dibatasi hanya satu atribut. Kamu bisa menambahkan beberapa atribut sekaligus, dipisahkan dengan spasi.
<img src="foto.jpg" alt="Foto profil" width="200" height="200">Pada contoh tersebut, elemen <img> memiliki empat atribut: src untuk sumber gambar, alt untuk teks alternatif, serta width dan height untuk ukuran.
Jenis-Jenis Atribut HTML
Tidak semua atribut bisa digunakan di semua elemen. Berdasarkan cakupan penggunaannya, atribut HTML dibagi menjadi tiga jenis utama.
1. Atribut Global
Atribut global dapat digunakan pada semua elemen HTML tanpa terkecuali. Berikut beberapa atribut global yang paling sering dipakai:
| Atribut | Fungsi |
|---|---|
id |
Memberikan identitas unik pada elemen |
class |
Menentukan kelas CSS yang digunakan |
style |
Menerapkan CSS secara inline langsung pada elemen |
title |
Menampilkan tooltip saat kursor diarahkan ke elemen |
lang |
Menentukan bahasa konten elemen |
hidden |
Menyembunyikan elemen dari tampilan |
data-* |
Menyimpan data kustom pada elemen |
draggable |
Mengatur apakah elemen bisa di-drag |
contenteditable |
Mengizinkan isi elemen diedit langsung oleh pengguna |
Daftar lengkap atribut global bisa dilihat di dokumentasi MDN Web Docs.
2. Atribut Event
Atribut event digunakan untuk menjalankan kode JavaScript saat terjadi peristiwa tertentu pada elemen, seperti diklik, di-hover, atau saat halaman selesai dimuat.
| Atribut | Kapan Dijalankan |
|---|---|
onclick |
Saat elemen diklik |
onload |
Setelah halaman selesai dimuat |
onmouseover |
Saat kursor berada di atas elemen |
onsubmit |
Saat formulir dikirim |
onchange |
Saat nilai input berubah |
onresize |
Saat ukuran jendela browser berubah |
Atribut event akan banyak digunakan saat kamu mulai belajar JavaScript. Untuk saat ini, cukup ketahui keberadaannya.
3. Atribut Khusus (Spesifik Elemen)
Atribut khusus hanya dapat digunakan pada elemen tertentu dan tidak berlaku di elemen lain. Berikut beberapa contohnya:
| Atribut | Berlaku untuk Elemen |
|---|---|
href |
<a>, <link> |
src |
<img>, <audio>, <video>, <script> |
alt |
<img> |
action |
<form> |
autoplay |
<audio>, <video> |
placeholder |
<input>, <textarea> |
Cara Menulis Atribut HTML yang Benar
Penulisan atribut terlihat sederhana, tetapi ada beberapa aturan penting yang perlu diikuti agar kode tetap valid dan mudah dibaca.
1. Gunakan Huruf Kecil untuk Nama Atribut
Sama seperti tag, nama atribut sebaiknya ditulis dalam huruf kecil agar konsisten dan lebih mudah terbaca.
Benar:
<p align="center">Teks rata tengah</p>Kurang tepat:
<p ALIGN="CENTER">Teks rata tengah</p>2. Selalu Gunakan Tanda Petik pada Nilai Atribut
Nilai atribut yang berupa teks wajib diapit tanda petik, baik petik ganda (") maupun petik tunggal ('). Tanpa tanda petik, browser bisa salah mengartikan nilai yang mengandung spasi sebagai atribut baru.
Benar:
<h1 title="tutorial HTML untuk pemula">Belajar HTML</h1>Salah:
<h1 title=tutorial HTML untuk pemula>Belajar HTML</h1>Pada contoh yang salah, browser akan menganggap HTML, untuk, dan pemula sebagai atribut terpisah — bukan bagian dari nilai title.
Untuk atribut boolean seperti required atau disabled, nilai tidak perlu dituliskan secara eksplisit:
<input type="text" required>
<input type="text" required="true">Kedua penulisan di atas sama-sama valid.
3. Pisahkan Atribut dengan Spasi
Jika sebuah elemen memiliki lebih dari satu atribut, gunakan spasi sebagai pemisah antar atribut. Untuk kode yang panjang, kamu bisa memecahnya ke beberapa baris agar lebih mudah dibaca.
<img
class="lazyload"
data-src="gambar.jpg"
src="placeholder.jpg"
alt="Deskripsi gambar">Catatan: Jika nama atribut terdiri dari dua kata, gunakan tanda hubung (-) sebagai penghubung, bukan spasi. Contoh: data-src, bukan data src.
Ringkasan: Perbedaan Tag, Elemen, dan Atribut
Setelah membahas ketiganya secara mendalam, berikut ringkasan perbedaan tag, elemen, dan atribut dalam HTML:
| Konsep | Definisi | Contoh |
|---|---|---|
| Tag | Penanda pembuka dan penutup sebuah elemen | <p> dan </p> |
| Elemen | Keseluruhan komponen dari tag pembuka hingga tag penutup beserta isinya | <p>Hello</p> |
| Atribut | Informasi tambahan di dalam tag pembuka yang mengatur perilaku elemen | class="judul" |
Langkah Selanjutnya
Kamu sekarang sudah memahami tiga konsep inti dalam HTML: tag sebagai penanda, elemen sebagai komponen penyusun, dan atribut sebagai pengatur perilaku. Ketiganya akan terus kamu gunakan di setiap baris kode HTML yang kamu tulis.
Pada tutorial berikutnya, kita akan mulai mempraktikkan pembuatan elemen-elemen dasar HTML, dimulai dari paragraf dan heading — dua elemen yang paling sering digunakan di setiap halaman web.