Dokumentasi HTML interaktif: Tag

Q: Apa perbedaan tag HTML dan elemen HTML?

Tag adalah markup yang kamu ketik, seperti atau . Elemen adalah keseluruhan yang dibuat browser darinya: tag pembuka, atributnya, kontennya dan tag penutupnya. Hi adalah dua tag yang membentuk satu elemen p.

Q: Apakah tag HTML peka huruf besar dan kecil?

Tidak. dan menghasilkan elemen yang sama, begitu juga campuran huruf besar dan kecil apa pun. Huruf kecil adalah gaya standar dan yang dihasilkan kebanyakan formatter.

Tag HTML: Tag Pembuka, Penutup, Void Tag dan Nesting

Tag HTML menandai konten supaya browser tahu apa setiap bagiannya: heading, paragraf, link, gambar. Pelajari cara kerja tag dan elemen, tag mana yang tidak punya tag penutup, cara kerja nesting, dan tag mana yang paling sering kamu pakai.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Apa itu tag HTML

Tag HTML adalah nama di dalam kurung sudut yang menandai sepotong konten. Kebanyakan tag datang berpasangan: tag pembuka seperti <p> dan tag penutup dengan garis miring seperti </p>. Semua yang ada di antaranya adalah konten, dan keseluruhannya disebut elemen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

Ganti <h1> menjadi <h2> (tag pembuka dan tag penutupnya) dan heading-nya menjadi lebih kecil. Nama tag-lah yang memberi tahu browser apa kontennya.

Anatomi: tag, atribut dan elemen

<a href="/docs/html/links" class="nav">Links</a>

Bagian	Di contoh ini
Tag pembuka	`<a href="/docs/html/links" class="nav">`
Nama tag	`a`
Atribut	`href="/docs/html/links"` dan `class="nav"`
Konten	`Links`
Tag penutup	`</a>`
Elemen	semua bagian di atas sekaligus

Atribut selalu ditulis di tag pembuka, tidak pernah di tag penutup. Atribut dibahas di halaman atribut.

Nama tag tidak peka huruf besar dan kecil: <P> dan <p> sama saja. Tulis dengan huruf kecil.

Void tag: tanpa tag penutup

Beberapa elemen tidak bisa berisi apa pun, jadi hanya punya tag pembuka. Elemen ini disebut void element (orang juga menyebutnya self closing tag):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

Daftar lengkapnya: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Kamu boleh menulisnya sebagai <br /> dengan garis miring. Garis miring itu tidak berbuat apa-apa di HTML; garis miring diperbolehkan supaya kode bergaya XHTML tetap berfungsi. Garis miring pada tag biasa, seperti <div />, juga diabaikan, artinya div itu masih terbuka.

Nesting tag

Elemen bisa diletakkan di dalam elemen lain. Aturannya: tutup tag dalam urutan kebalikan dari saat kamu membukanya. Yang terakhir dibuka adalah yang pertama ditutup.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

Browser tidak menolak nesting yang rusak. Browser memperbaikinya, dan hasil perbaikannya tidak selalu sesuai maksudmu. Contoh ini memberikan dua potongan kode dengan nesting yang salah ke parser browser lalu mencetak struktur yang benar-benar dibuatnya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

Ada dua perbaikan yang terjadi. <b> dan <i> yang tumpang tindih dipecah menjadi elemen tambahan. Dan <p> tidak boleh berisi <div>, jadi browser menutup paragraf sebelum div lalu mengubah </p> yang tersisa menjadi paragraf baru yang kosong. Kalau CSS atau JavaScript berperilaku aneh, nesting yang rusak adalah salah satu hal pertama yang perlu diperiksa.

Elemen block dan inline

Kebanyakan tag masuk ke salah satu dari dua kelompok tampilan. Elemen block (div, p, h1 sampai h6, ul, section) dimulai di baris baru dan memakan seluruh lebar. Elemen inline (span, a, strong, em, code) berada di dalam baris teks dan hanya selebar isinya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

Kotak biru merentang sepanjang halaman; kotak kuning hanya membungkus teksnya. CSS bisa mengubah ini dengan property display, tapi setiap tag dimulai dengan nilai default-nya. Lihat div dan span untuk dua container umum itu.

Tag HTML yang paling umum

Tag	Fungsinya
`<html>`, `<head>`, `<body>`	Kerangka dokumen
`<title>`, `<meta>`, `<link>`	Informasi halaman di head
`<h1>` sampai `<h6>`	Heading
`<p>`	Paragraf
`<a>`	Link
`<img>`	Gambar
`<ul>`, `<ol>`, `<li>`	List
`<strong>`, `<em>`	Teks penting dan teks yang ditekankan
`<br>`, `<hr>`	Pindah baris, pemisah tematik
`<div>`, `<span>`	Container block dan inline umum
`<table>`, `<tr>`, `<th>`, `<td>`	Tabel
`<form>`, `<input>`, `<label>`, `<button>`	Form
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	Struktur halaman yang bermakna

Untuk daftar satu halaman yang bisa kamu cetak, lihat cheat sheet HTML.

Tag yang tidak ada

Kalau kamu mengetik tag yang tidak dikenal browser, browser tidak gagal. Browser membuat elemen yang tidak dikenal, menampilkan kontennya, dan memperlakukannya sebagai inline:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

Tag yang tidak dikenal tidak punya makna bagi mesin pencari atau screen reader, jadi utamakan tag sungguhan. Kalau kamu membuat komponen sendiri dengan JavaScript, beri nama dengan tanda hubung (user-badge): nama dengan tanda hubung dicadangkan untuk custom element dan tidak akan pernah bentrok dengan tag HTML di masa depan.

Kesalahan umum

Lupa tag penutup. </a> atau </strong> yang hilang membuat sisa halaman menjadi link atau tebal. Browser menutup beberapa tag untukmu (</p>, </li>), tapi tidak yang ini.
Menutup void tag. </br> dan </img> tidak valid. Browser bahkan membaca </br> sebagai <br> pembuka, jadi <br></br> menghasilkan dua pindah baris.
Tag yang tumpang tindih. Tutup dalam urutan terbalik: <b><i>x</i></b>, jangan pernah <b><i>x</b></i>.
Meletakkan block di dalam paragraf. <div>, list atau heading di dalam <p> mengakhiri paragraf lebih awal. Pakai <div> sebagai container luarnya.
Memilih tag karena tampilannya. Pakai <h2> karena itu heading, bukan karena ukurannya besar. Ukuran dan ketebalan adalah urusan CSS.

Pertanyaan yang sering diajukan

Apa perbedaan tag HTML dan elemen HTML?

Tag adalah markup yang kamu ketik, seperti <p> atau </p>. Elemen adalah keseluruhan yang dibuat browser darinya: tag pembuka, atributnya, kontennya dan tag penutupnya. <p>Hi</p> adalah dua tag yang membentuk satu elemen p.

Tag HTML apa saja yang tidak butuh tag penutup?

Void element tidak bisa punya konten, jadi tidak punya tag penutup: <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> dan <embed>.

Sebaiknya aku menulis <br> atau <br />?

Keduanya HTML yang valid. Garis miring di akhir boleh ditulis pada void element dan diabaikan oleh browser. Pada tag yang bukan void seperti <div />, garis miringnya juga diabaikan, jadi div itu tetap terbuka sampai ada </div>.

Apakah tag HTML peka huruf besar dan kecil?

Tidak. <P> dan <p> menghasilkan elemen yang sama, begitu juga campuran huruf besar dan kecil apa pun. Huruf kecil adalah gaya standar dan yang dihasilkan kebanyakan formatter.

Ada berapa banyak tag HTML?

Standar HTML saat ini mendefinisikan lebih dari 100 elemen, tapi halaman sehari-hari memakai sekitar 20 sampai 30 di antaranya: heading, paragraf, link, gambar, list, div, span, form dan tag layout semantik.

Apa yang terjadi kalau aku memakai tag yang tidak ada?

Browser tetap membuat elemen untuknya, menampilkan kontennya, dan memperlakukannya sebagai elemen inline tanpa makna khusus. Custom element diperbolehkan kalau namanya mengandung tanda hubung, seperti <user-card>.

Konsep terkait