Çalıştırılabilir HTML Dokümanları: Üst simge

Q: HTML'de üst simge nasıl yazılır?

Yukarı kaldırılacak metni ile sar: x 2 x'in karesini, 1 st bir sıra sayısını gösterir. Tarayıcı onu daha küçük ve taban çizgisinin üstüne kaldırılmış olarak çizer.

Q: HTML'de alt simge nasıl yazılır?

kullan: su için H 2 O, bir indis için x 1 . Daha küçük ve taban çizgisinin altına indirilmiş olarak çizilir.

Q: HTML'de x'in karesi nasıl yazılır?

Ya x 2 ya da ² entity'si olarak da yazabileceğin hazır karakterle x². Karakter kare ve küp için yeterlidir; ise 2 n+1 gibi herhangi bir üs için çalışır.

Q: yerine CSS kullanabilir miyim?

Daha küçük bir font-size ile birlikte vertical-align: super aynı görünür, ama ve anlam taşır: "m2" ile "m 2 " farklı değerlerdir. Yukarıdaki ya da aşağıdaki konum içeriğin bir parçasıysa etiketleri kullan.

HTML'de Üst Simge ve Alt Simge: sup ve sub Etiketleri

Üst simge metni , alt simge metni ile yaz: üsler, sıra sayıları, dipnot işaretleri ve kimyasal formüller. Yaygın kullanımları, satırları birbirinden uzaklaştırmalarını nasıl engelleyeceğini ve ne zaman bir Unicode karakterin ya da MathML'in daha 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ı

HTML'de üst simge nasıl yazılır

Yukarı kaldırılacak metni  ile sar. Tarayıcı onu daha küçük ve satırın üstüne kaldırılmış olarak gösterir. Ortağı  ise metni daha küçük ve aşağı indirilmiş gösterir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup and sub</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Area: 25 m<sup>2</sup></p>
  <p>E = mc<sup>2</sup></p>
  <p>She finished 1<sup>st</sup> in the 3<sup>rd</sup> race.</p>
  <p>Water is H<sub>2</sub>O and carbon dioxide is CO<sub>2</sub>.</p>
</body>
</html>

 ve  satır içidir ve başka satır içi elementler içerebilir, bu yüzden 2n+1 ya da xi de çalışır.

Yaygın kullanımlar

İstediğin	Yazılışı	Sonuç
Bir üs	`10<sup>3</sup>`	10 üzeri 3
Bir sıra sayısı	`2<sup>nd</sup>`	Harfleri yukarıda 2nd
Bir dipnot işareti	`text<sup><a href="#n1">1</a></sup>`	Yukarıda, tıklanabilir bir 1
Bir kimyasal formül	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	Glikoz
Bir indis ya da taban	`x<sub>1</sub>`, `log<sub>2</sub>`	Aşağıda 1 ve 2
Bir ticari marka	`Brand<sup>TM</sup>` ya da `Brand™`	Yukarıda TM

Konum anlamın bir parçasıysa etiketleri kullan: m2 ile m2 farklı şeylerdir. Yalnızca küçük görünmesi istenen metin için (bir etiket, bir rozet) CSS kullan.

sup ile dipnotlar

Dipnot işareti, alttaki bir nota giden üst simge bir linktir. Her nota bir id ver ve linki ona yönlendir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footnotes</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1.6; }
    .notes { margin-top: 600px; font-size: 14px; border-top: 1px solid #e5e7eb; }
    sup a { text-decoration: none; }
  </style>
</head>
<body>
  <p>The first website went live in 1991.<sup><a href="#n1" id="r1">1</a></sup> It is still online.<sup><a href="#n2" id="r2">2</a></sup></p>
  <ol class="notes">
    <li id="n1">Published by Tim Berners-Lee at CERN. <a href="#r1">Back</a></li>
    <li id="n2">A restored copy is hosted by CERN. <a href="#r2">Back</a></li>
  </ol>
</body>
</html>

Notuna atlamak için bir sayıya, geri dönmek için "Back" linkine tıkla. Küçük linkten alt çizgiyi kaldırmak paragrafı temiz tutar, link rengi ise yine de onun tıklanabilir olduğunu gösterir.

Satır aralığını eşit tutmak

Varsayılan olarak bir  ya da , bulunduğu satırı çevresindeki satırlardan daha yüksek yapabilir; bu yüzden birkaç üs içeren bir paragraf eşitsiz aralıklı görünür. Onlara line-height: 0 vermek bunu düzeltir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sup line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { width: 260px; line-height: 1.3; border: 2px solid #e5e7eb; padding: 4px; }
    .fixed { border-color: #16a34a; }
    .fixed sup, .fixed sub { line-height: 0; }
  </style>
</head>
<body>
  <p>Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
  <p class="fixed">Line one of the text.<br>Line two has x<sup>2</sup> in it.<br>Line three is plain.<br>Line four has H<sub>2</sub>O.</p>
</body>
</html>

Gri kutu daha yüksektir, çünkü ikinci ve dördüncü satırlar birbirinden uzaklaştı. Yeşil kutuda her satır aynı yükseklikte. Bu kuralı temel stil dosyana bir kez ekle ve unut.

Unicode karakterler ve MathML

Birkaç yaygın durum için hazır karakterler var: ² (²), ³ (³), ¹ (¹), ™ (™) ve ½ (½). Etiket gerektirmezler ve satır yüksekliğini etkilemezler, ama yalnızca bazı rakamlar ve harfler için vardırlar.

Gerçek formüller için (kesirler, kökler, üslerin üsleri) güncel tarayıcıların doğrudan gösterdiği MathML'i kullan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unicode and MathML</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
  </style>
</head>
<body>
  <p>Entities: 5 m&sup2;, 2 m&sup3;, Brand&trade;</p>
  <p>MathML:
    <math>
      <msup><mi>a</mi><mn>2</mn></msup><mo>+</mo>
      <msup><mi>b</mi><mn>2</mn></msup><mo>=</mo>
      <msup><mi>c</mi><mn>2</mn></msup>
    </math>
  </p>
  <p>Nested exponent:
    <math><msup><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup></msup></math>
  </p>
</body>
</html>

<msup> bir taban ve bir üs alır; <msub> alt simgeler için aynısını yapar. Bir cümledeki tek bir üs için  daha basittir.

Sık yapılan hatalar

Metni küçültmek için  kullanmak. Metni yukarı da kaldırır ve okurlara bunun bir üst simge olduğunu söyler. Küçük metin için font-size kullan.
Eşitsiz satır aralığı. sup, sub { line-height: 0; } ekle.
Son metinde x^2 ya da H2O yazmak. İçerik doğru okunsun diye x2 ve H2O kullan.
Dokunmak için fazla küçük dipnot işaretleri. Telefonlarda yukarıdaki tek bir rakam çok küçük bir hedeftir. sup a için biraz padding ekle ya da notları metnin yakınına koy.

Sıkça Sorulan Sorular

HTML'de üst simge nasıl yazılır?

Yukarı kaldırılacak metni  ile sar: x2 x'in karesini, 1st bir sıra sayısını gösterir. Tarayıcı onu daha küçük ve taban çizgisinin üstüne kaldırılmış olarak çizer.

HTML'de alt simge nasıl yazılır?

 kullan: su için H2O, bir indis için x1. Daha küçük ve taban çizgisinin altına indirilmiş olarak çizilir.

HTML'de x'in karesi nasıl yazılır?

Ya x2 ya da ² entity'si olarak da yazabileceğin hazır karakterle x². Karakter kare ve küp için yeterlidir;  ise 2n+1 gibi herhangi bir üs için çalışır.

satır aralığını neden eşitsiz yapıyor?

Yukarı kaldırılan metin, bulunduğu satırı paragraftaki diğer satırlardan daha yüksek yapabilir. Bunu sup, sub { line-height: 0; } ile düzelt; böylece satıra yükseklik eklemezler.

yerine CSS kullanabilir miyim?

Daha küçük bir font-size ile birlikte vertical-align: super aynı görünür, ama  ve  anlam taşır: "m2" ile "m2" farklı değerlerdir. Yukarıdaki ya da aşağıdaki konum içeriğin bir parçasıysa etiketleri kullan.

İlgili kavramlar