Tag span HTML: Mengatur Gaya Sebagian Teks, dan div vs span

Fungsi tag span

<span> membungkus sepotong teks di dalam satu baris supaya kamu bisa mengatur gayanya atau menemukannya dengan JavaScript. Tag ini adalah kembaran inline dari <div>: tidak punya makna, tidak punya tampilan default, dan tidak memulai baris baru.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

Kalimatnya tetap di satu baris. Hanya kata yang dibungkus yang berubah.

div vs span

Keduanya punya tujuan yang sama (container tanpa makna) dan berbeda dalam cara menempatkan diri di halaman:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

Div memecah kalimat menjadi tiga baris dan merentang sepanjang halaman; span tetap berada di dalam kalimat dan memeluk teksnya.

Satu perbedaan lagi: <div> tidak boleh berada di dalam <p>, dan browser menutup paragrafnya lebih awal kalau kamu mencobanya, sedangkan span bisa diletakkan di mana pun teks bisa diletakkan. Penjelasan lebih lanjut ada di halaman div.

Styling span: apa yang berfungsi dan apa yang tidak

Warna, font, background dan padding horizontal semuanya berfungsi pada span. Ukuran tidak: elemen inline mengabaikan width, height dan margin atas serta bawah. Ubah menjadi inline-block untuk memberinya ukuran sambil tetap berada di dalam baris:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

Span pertama hanya selebar kata-katanya. Span kedua tepat 120 kali 40 piksel dan tetap berada di dalam kalimat.

Span dengan JavaScript

Span adalah tempat yang biasa dipakai untuk nilai yang diisi oleh script, seperti penghitung atau nama pengguna:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

Hanya angkanya yang berubah; bagian kalimat lainnya tidak tersentuh.

Kapan tag yang spesifik lebih baik daripada span

Span tidak punya makna, jadi screen reader membacanya sebagai teks biasa. Kalau kata-katanya punya peran, pakai tag untuk peran itu lalu atur gayanya sesukamu:

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

Halaman bold menjelaskan perbedaan <strong>, <b>, <em> dan <i>.

Kesalahan umum

• Mengatur width pada span biasa. Nilainya diabaikan. Pakai display: inline-block.
• Meletakkan div atau paragraf di dalam span. HTML yang tidak valid dan memutus baris. Ganti span luarnya dengan div.
• Span yang bisa diklik. Seperti div, span dengan onclick tidak bisa dijangkau dengan keyboard. Pakai <button> atau link.
• Satu span untuk setiap gaya. Kalau seluruh paragraf atau bagian butuh gaya, letakkan class-nya di <p> atau container-nya langsung, daripada membungkus teksnya dengan span.