وثائق 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: وسما sup وsub

اكتب النص المرتفع بـ والنص المنخفض بـ : الأسس، والأعداد الترتيبية، وعلامات الحواشي، والصيغ الكيميائية. تعلّم الاستخدامات الشائعة، وكيف تمنعهما من تفريق الأسطر، ومتى يناسب محرف Unicode أو MathML أكثر.

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & 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>

 و عنصران سطريان ويمكن أن يحتويا على عناصر سطرية أخرى، لذلك يعمل أيضًا 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 كي يُقرأ المحتوى بشكل صحيح.
علامات حواشٍ أصغر من أن تُلمس. على الهواتف، الرقم المرتفع الواحد هدف صغير جدًا. أضف قليلًا من الحشو إلى 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" قيمتان مختلفتان. استخدم الوسمين عندما يكون الموضع المرتفع أو المنخفض جزءًا من المحتوى.

مفاهيم ذات صلة