תיעוד HTML עם דוגמאות להרצה: כתב עילי ותחתי

Q: איך כותבים כתב עילי ב-HTML?

עטפו את הטקסט המורם ב- : x 2 מציג x בריבוע, 1 st מספר סודר. הדפדפן מצייר אותו קטן יותר ומורם מעל קו הבסיס.

Q: איך כותבים כתב תחתי ב-HTML?

השתמשו ב- : H 2 O למים, x 1 לאינדקס. הוא מצויר קטן יותר ומונמך מתחת לקו הבסיס.

Q: איך כותבים x בריבוע ב-HTML?

או x 2 או התו המוכן x², שאפשר לכתוב גם כישות ². התו מתאים לריבועים ולחזקות שלוש; עובד לכל חזקה, כמו 2 n+1 .

Q: אפשר להשתמש ב-CSS במקום ב- ?

vertical-align: super עם font-size קטן יותר נראה אותו דבר, אבל ל- ול- יש משמעות: "m2" ו-"m 2 " הם ערכים שונים. השתמשו בתגיות כשהמיקום המורם או המונמך הוא חלק מהתוכן.

HTML Superscript ו-Subscript: התגיות sup ו-sub

כתבו טקסט עילי עם וטקסט תחתי עם : חזקות, מספרים סודרים, סימוני הערות שוליים ונוסחאות כימיות. למדו את השימושים הנפוצים, איך למנוע מהם להרחיק שורות זו מזו, ומתי תו Unicode או MathML מתאימים יותר.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

איך כותבים כתב עילי ב-HTML

עטפו את הטקסט המורם ב-. הדפדפן מציג אותו קטן יותר ומורם מעל השורה. בן הזוג שלו, , מציג טקסט קטן יותר ומונמך:

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

 ו- הם inline ויכולים להכיל אלמנטים inline אחרים, כך שגם 2n+1 או xi עובדים.

שימושים נפוצים

מה רוצים	מה כותבים	תוצאה
חזקה	`10<sup>3</sup>`	10 בחזקת 3
מספר סודר	`2<sup>nd</sup>`	2nd עם אותיות מורמות
סימון הערת שוליים	`text<sup><a href="#n1">1</a></sup>`	1 מורם ולחיץ
נוסחה כימית	`C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>`	גלוקוז
אינדקס או בסיס	`x<sub>1</sub>`, `log<sub>2</sub>`	1 ו-2 מונמכים
סימן מסחרי	`Brand<sup>TM</sup>` או `Brand™`	TM מורם

השתמשו בתגיות כשהמיקום הוא חלק מהמשמעות: m2 ו-m2 הם דברים שונים. לטקסט קטן שרק מעוצב קטן (תווית, תג), השתמשו ב-CSS במקום.

הערות שוליים עם sup

סימון של הערת שוליים הוא קישור בכתב עילי להערה בתחתית. תנו לכל הערה id והפנו אליה את הקישור:

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

לחצו על מספר כדי לקפוץ להערה שלו, ועל "Back" כדי לחזור. הסרת הקו התחתון מהקישור הקטן שומרת על פסקה נקייה, וצבע הקישור עדיין מסמן שאפשר ללחוץ עליו.

שמירה על מרווח שורות אחיד

כברירת מחדל,  או  יכולים להפוך את השורה שלהם לגבוהה מהשורות שמסביב, כך שפסקה עם כמה חזקות נראית עם ריווח לא אחיד. הגדרת line-height: 0 עליהם פותרת את זה:

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

התיבה האפורה גבוהה יותר כי השורות השנייה והרביעית נדחקו החוצה. בתיבה הירוקה לכל שורה אותו גובה. הוסיפו את הכלל הזה לגיליון הסגנונות הבסיסי שלכם פעם אחת ושכחו ממנו.

תווי Unicode ו-MathML

לכמה מקרים נפוצים יש תווים מוכנים: ² (²), ³ (³), ¹ (¹), ™ (™) ו-½ (½). הם לא צריכים תגית ולא משפיעים על גובה השורה, אבל הם קיימים רק לחלק מהספרות והאותיות.

לנוסחאות אמיתיות (שברים, שורשים, חזקות של חזקות), השתמשו ב-MathML, שדפדפנים של היום מציגים באופן מובנה:

<!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> מקבל בסיס וחזקה; <msub> עושה אותו דבר לכתב תחתי. לחזקה בודדת בתוך משפט,  פשוט יותר.

טעויות נפוצות

שימוש ב- כדי להקטין טקסט. הוא גם מרים את הטקסט ואומר לקוראים שזה כתב עילי. השתמשו ב-font-size לטקסט קטן.
מרווח שורות לא אחיד. הוסיפו sup, sub { line-height: 0; }.
לכתוב x^2 או H2O בטקסט סופי. השתמשו ב-x2 וב-H2O כדי שהתוכן ייקרא נכון.
סימוני הערות שוליים קטנים מדי ללחיצה. בטלפונים ספרה מורמת אחת היא מטרה זעירה. הוסיפו מעט padding ל-sup a, או שימו את ההערות קרוב לטקסט.

שאלות נפוצות

איך כותבים כתב עילי ב-HTML?

עטפו את הטקסט המורם ב-: x2 מציג x בריבוע, 1st מספר סודר. הדפדפן מצייר אותו קטן יותר ומורם מעל קו הבסיס.

איך כותבים כתב תחתי ב-HTML?

השתמשו ב-: H2O למים, x1 לאינדקס. הוא מצויר קטן יותר ומונמך מתחת לקו הבסיס.

איך כותבים x בריבוע ב-HTML?

או x2 או התו המוכן x², שאפשר לכתוב גם כישות ². התו מתאים לריבועים ולחזקות שלוש;  עובד לכל חזקה, כמו 2n+1.

למה הופך את המרווח בין השורות ללא אחיד?

הטקסט המורם יכול להפוך את השורה שלו לגבוהה משאר השורות בפסקה. תקנו את זה עם sup, sub { line-height: 0; }, שמונע מהם להוסיף גובה לשורה.

אפשר להשתמש ב-CSS במקום ב-?

vertical-align: super עם font-size קטן יותר נראה אותו דבר, אבל ל- ול- יש משמעות: "m2" ו-"m2" הם ערכים שונים. השתמשו בתגיות כשהמיקום המורם או המונמך הוא חלק מהתוכן.

מושגים קשורים