Çalıştırılabilir HTML Dokümanları: HTML span

Q: div ile span arasındaki fark nedir?

Bir bloktur: yeni bir satırda başlar ve tüm genişliği kaplar. Bir satır içidir: metin satırının içinde kalır ve yalnızca içeriği kadar geniştir. İçerik bloklarını gruplamak için div, metnin içindeki kelimeleri işaretlemek için span kullan.

Q: span'ime verdiğim width neden çalışmıyor?

Satır içi elementler width, height ve dikey margin değerlerini yok sayar. Span'i satırda tutup boyut kabul etmesini istiyorsan display: inline-block, div gibi davranmasını istiyorsan display: block ver.

HTML span Etiketi: Metne Stil Verme ve div ile span Farkı

<span> etiketi genel bir satır içi kapsayıcıdır: bir satırın içindeki birkaç kelimeyi sarar, böylece satırı bölmeden onlara stil verebilir ya da script ile ulaşabilirsin. Nasıl kullanıldığını, div'den farkını ve ne zaman daha belirli bir etiketin uygun olduğunu öğren.

Bu sayfada çalıştırılabilir editörler var - düzenle, çalıştır ve sonucu anında gör.

Yazan Kevin Spektor, Co-founder & CTO

Sep 24, 2026 tarihinde yayınlandı

span etiketi ne yapar

<span> bir satırın içindeki bir metin parçasını sarar, böylece ona stil verebilir ya da onu JavaScript ile bulabilirsin. <div> etiketinin satır içi ikizidir: anlamı ve varsayılan bir görünümü yoktur ve yeni bir satır başlatmaz.

<!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>

Cümle tek satırda kalır. Yalnızca sarılan kelimeler değişir.

div ve span farkı

İkisinin amacı aynıdır (anlamı olmayan bir kapsayıcı), sayfada nasıl durdukları ise farklıdır:

<!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 cümleyi üç satıra böler ve sayfa boyunca uzanır; span cümlenin içinde kalır ve metnini sarar.

	`<div>`	`<span>`
Görüntüleme	Blok	Satır içi
Yeni satırda başlar	Evet	Hayır
Genişlik	Kullanılabilir genişliğin tamamı	İçeriği kadar
`width`, `height`, dikey margin	Uygulanır	Yok sayılır
Neleri içerebilir	Bloklar dahil her şeyi	Yalnızca metin ve satır içi elementleri
Tipik kullanım	Bölümler, kartlar, yerleşim sarmalayıcıları	Metnin içindeki bir kelime ya da ifade

Bir fark daha var: <p> içine <div> konmasına izin verilmez ve denersen tarayıcı paragrafı erken kapatır; span ise metnin gidebildiği her yere gidebilir. Bununla ilgili daha fazlası div sayfasında.

span'e stil vermek: ne çalışır, ne çalışmaz

Renk, yazı tipi, arka plan ve yatay padding bir span'de çalışır. Boyut çalışmaz: satır içi bir element width, height ile üst ve alt margin değerlerini yok sayar. Satırda tutarken boyut vermek için onu inline-block yap:

<!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>

İlk span yalnızca kelimeleri kadar geniştir. İkincisi tam olarak 120'ye 40 pikseldir ve hâlâ cümlenin içinde durur.

JavaScript ile span'ler

Span, bir script'in doldurduğu bir değer, örneğin bir sayaç ya da kullanıcı adı için kullanılan olağan yer tutucudur:

<!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>

Yalnızca sayı değişir; cümlenin geri kalanına dokunulmaz.

Ne zaman belirli bir etiket span'den daha iyidir

Bir span'in anlamı yoktur, bu yüzden ekran okuyucu onu düz metin olarak okur. Kelimelerin bir rolü olduğunda o rolün etiketini kullan ve istediğin gibi stil ver:

Anlam	Span yerine kullan
Önemli metin	`<strong>`
Vurgulu metin	`<em>`
Vurgulanmış ya da işaretlenmiş metin	`<mark>`
Kod, dosya adı	`<code>`
Bir klavye tuşu	`<kbd>`
Tarih ya da saat	`<time datetime="2026-09-24">`
Başka bir dildeki metin	`<span lang="fr">` (span ve `lang` özelliği)

<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>

<strong>, <b>, <em> ve <i> arasındaki farkı kalın yazı sayfası anlatıyor.

Sık yapılan hatalar

Düz bir span'e width vermek. Yok sayılır. display: inline-block kullan.
Bir span'in içine div ya da paragraf koymak. Satırı bölen geçersiz HTML'dir. Dıştaki span'i div ile değiştir.
Tıklanabilir span'ler. Bir div gibi, onclick olan bir span'e de klavyeyle ulaşılamaz. Bir <button> ya da link kullan.
Her stil için bir span. Bütün paragrafların ya da bölümlerin bir stile ihtiyacı varsa, metnini bir span ile sarmak yerine class'ı doğrudan <p> ya da kapsayıcıya ver.

Sıkça Sorulan Sorular

HTML'de span nedir?

<span> genel bir satır içi kapsayıcıdır. Bir metin satırının bir kısmını, örneğin tek bir kelimeyi sarar, böylece CSS ya da JavaScript onu hedefleyebilir. Kendine ait bir görünümü ya da anlamı yoktur.

div ile span arasındaki fark nedir?

Bir <div> bloktur: yeni bir satırda başlar ve tüm genişliği kaplar. Bir <span> satır içidir: metin satırının içinde kalır ve yalnızca içeriği kadar geniştir. İçerik bloklarını gruplamak için div, metnin içindeki kelimeleri işaretlemek için span kullan.

span'ime verdiğim width neden çalışmıyor?

Satır içi elementler width, height ve dikey margin değerlerini yok sayar. Span'i satırda tutup boyut kabul etmesini istiyorsan display: inline-block, div gibi davranmasını istiyorsan display: block ver.

HTML'de tek bir kelimenin rengini nasıl değiştiririm?

Kelimeyi class'ı olan bir span ile sar ve CSS'te renklendir: <span class="accent">word</span> ve .accent { color: #2563eb; }. Tek seferlik hızlı bir çözüm için <span style="color: #2563eb">word</span> da çalışır.

Bir span, div içerebilir mi?

Hayır. Bir span yalnızca metin, linkler, resimler ve başka span'ler gibi satır içi içerik barındırabilir. Tarayıcılar span içindeki bir div'i yine de gösterir, ama bu geçersiz HTML'dir ve satırı böler; dış elementi div'e çevir.

İlgili kavramlar