ile arasındaki fark nedir?

artık geçerli ya da doğru olmayan ama bağlam için tutulan metni işaretler, örneğin üstü çizili bir fiyat. belgeden silinen metni işaretler, çoğunlukla yerine geleni gösteren bir ile yan yana durur ve datetime ile cite özelliklerini alabilir.

Çalıştırılabilir HTML Dokümanları: Altı çizili yazı

Q: HTML'de yazının altı nasıl çizilir?

Metni ile sar ya da CSS'te text-decoration: underline uygula. etiketini yalnızca kendine özgü anlamı için kullan (örneğin yanlış yazılmış bir kelimeyi işaretlemek); tamamen görsel bir alt çizgi için bir ya da elementin kendisi üzerinde CSS kullan.

Q: HTML'de yazının üstü nasıl çizilir?

Artık doğru olmayan metin için, örneğin eski bir fiyat, kullan; bir düzenlemede silinen metin için kullan. İkisi de metnin üzerinden bir çizgi çeker. CSS'te text-decoration: line-through görsel olarak aynı şeyi yapar.

Q: etiketi kullanımdan kaldırıldı mı?

Hayır. HTML 4'te kullanımdan kaldırılmıştı ama HTML5'te yeni bir anlamla geri döndü: metin dışı bir not taşıyan metin, örneğin bir yazım hatası ya da Çince metindeki bir özel ad. Geçerlidir, yalnızca nadiren doğru seçimdir.

HTML'de Altı Çizili ve Üstü Çizili Yazı: u, ins, s ve del

HTML'de metnin altını ya da CSS text-decoration ile çiz, üstünü <s> ya da <del> ile çiz. Her etiketin ne anlama geldiğini, <ins> ve <del> ile düzenlemelerin nasıl işaretlendiğini ve link olmayan bir metnin altını çizmenin okurları neden şaşırttığını öğ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ı

HTML'de yazının altı nasıl çizilir

İki yolu var:  etiketi ya da CSS özelliği text-decoration: underline. İkisi de aynı çizgiyi çizer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

Her alt çizginin sorunu üçüncü satırdadır: okurlar altı çizili metnin bir link olmasını bekler ve ona tıklar. Düz metnin altını yalnızca açık bir neden olduğunda çiz.

u etiketi ne anlama gelir

 genel bir "altını çiz" düğmesi değildir. Güncel HTML'de, ne olduğunu söylemeden "burada özel bir şey var" diyen bir işaret taşıyan metin anlamına gelir. Yaygın gerçek kullanımları:

bir yazım hatasını işaretlemek (bir kelime işlemcinin yaptığı gibi, çoğunlukla dalgalı kırmızı bir çizgiyle),
Çince metindeki özel adları işaretlemek; bu orada bir tipografi geleneğidir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

Vurgu için  ya da  kullan (kalın yazı sayfasına bak), kitap adları için <cite> kullan. Yalnızca görünümü istiyorsan CSS kullan.

Üstü çizili yazı: s ve del

HTML'de metnin üzerinden çizgi çeken iki etiket vardır ve farklı anlamlara gelirler:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

Etiket	Anlamı	Tipik kullanım
`<s>`	Artık doğru ya da geçerli değil, bağlam için tutuluyor	Eski fiyat, tükenmiş bilet türü
`<del>`	Belgeden silindi	Düzenlemeler, değişiklik günlükleri, yapılacaklar listesinde tamamlananlar

ins ve del ile düzenlemeleri işaretlemek

<ins>, <del> etiketinin ortağıdır: eklenen metni işaretler. Tarayıcılar onu varsayılan olarak altı çizili gösterir. İkisi de datetime (değişikliğin ne zaman olduğu) ve cite (onu açıklayan bir URL) alır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

Bu kırmızı ve yeşil stil, bir diff'in tanıdık görünümüdür. ins üzerindeki text-decoration: none, link gibi görünmesin diye varsayılan alt çizgiyi kaldırır.

CSS ile alt çizgi ve üstü çizili

text-decoration görsel kısmı her element için yapar: bir renk ve bir stil alır, text-decoration-thickness de kalınlığı belirler. Tamamen dekoratif çizgiler için doğru araç budur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

Linklerden alt çizgiyi kaldırmak, alt çizgi mesafesi ve diğer text-decoration ayrıntıları CSS alt çizgi sayfasında.

Erişilebilirlik

<s>, <del> ve <ins> için ekran okuyucu desteği tutarsızdır: bazıları onları silinmiş ya da eklenmiş olarak duyurur, çoğu normal metin gibi okur; bu yüzden dinleyen biri hangisinin güncel olduğuna dair hiçbir ipucu olmadan "Price 49 dollars 29 dollars" duyabilir. Fark önemliyse bunu kelimelerle de söyle, örneğin görsel olarak gizli ama sesli okunan bir metinle ya da basitçe "Önce 49 $, şimdi 29$ " gibi.

Sık yapılan hatalar

Link olmayan metnin altını çizmek. Okurlar ona tıklamaya çalışır. Vurgulamak için kalın yazı, renk ya da arka plan kullan.
Vurgu için  kullanmak.  ya da  kullan.
<strike> kullanmak. Artık kullanılmıyor. <s>, <del> ya da text-decoration: line-through kullan.
Bir belge geçmişinde silinen içerik için <s> kullanmak. Bu <del> etiketinin işidir; o, değişikliğin ne zaman olduğunu da kaydedebilir.
Anlamı yalnızca çizgiye bırakmak. Birçok ekran okuyucu onu duyurmaz.

Sıkça Sorulan Sorular

HTML'de yazının altı nasıl çizilir?

Metni  ile sar ya da CSS'te text-decoration: underline uygula.  etiketini yalnızca kendine özgü anlamı için kullan (örneğin yanlış yazılmış bir kelimeyi işaretlemek); tamamen görsel bir alt çizgi için bir  ya da elementin kendisi üzerinde CSS kullan.

HTML'de yazının üstü nasıl çizilir?

Artık doğru olmayan metin için, örneğin eski bir fiyat, <s> kullan; bir düzenlemede silinen metin için <del> kullan. İkisi de metnin üzerinden bir çizgi çeker. CSS'te text-decoration: line-through görsel olarak aynı şeyi yapar.

etiketi kullanımdan kaldırıldı mı?

Hayır.  HTML 4'te kullanımdan kaldırılmıştı ama HTML5'te yeni bir anlamla geri döndü: metin dışı bir not taşıyan metin, örneğin bir yazım hatası ya da Çince metindeki bir özel ad. Geçerlidir, yalnızca nadiren doğru seçimdir.

<strike> etiketine ne oldu?

<strike> artık kullanılmıyor. Tarayıcılar onu hâlâ üstü çizili gösterir, ama geçerli HTML değildir. Anlama göre <s> ya da <del>, ya da text-decoration: line-through kullan.

<s> ile <del> arasındaki fark nedir?

<s> artık geçerli ya da doğru olmayan ama bağlam için tutulan metni işaretler, örneğin üstü çizili bir fiyat. <del> belgeden silinen metni işaretler, çoğunlukla yerine geleni gösteren bir <ins> ile yan yana durur ve datetime ile cite özelliklerini alabilir.

İlgili kavramlar