Chỉ số trên và chỉ số dưới trong HTML: thẻ sup và sub

Cách viết chỉ số trên trong HTML

Bọc phần chữ nâng lên trong <sup>. Trình duyệt hiển thị nó nhỏ hơn và nâng lên trên dòng. Thẻ đi cặp với nó, <sub>, hiển thị chữ nhỏ hơn và hạ xuống:

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

<sup> và <sub> là phần tử inline và có thể chứa các phần tử inline khác, nên 2<sup>n+1</sup> hay x<sub><i>i</i></sub> cũng chạy được.

Các cách dùng phổ biến

Hãy dùng các thẻ này khi vị trí là một phần của ý nghĩa: m² và m2 là hai thứ khác nhau. Với chữ nhỏ chỉ vì cách trình bày (một nhãn, một huy hiệu), hãy dùng CSS.

Chú thích với sup

Ký hiệu chú thích là một liên kết chỉ số trên trỏ tới ghi chú ở cuối trang. Đặt cho mỗi ghi chú một id và trỏ liên kết tới đó:

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

Click một con số để nhảy tới ghi chú của nó, và "Back" để quay lại. Bỏ gạch chân ở liên kết nhỏ giúp đoạn văn gọn gàng, trong khi màu liên kết vẫn cho biết nó bấm được.

Giữ khoảng cách dòng đều nhau

Theo mặc định, <sup> hoặc <sub> có thể làm dòng chứa nó cao hơn các dòng xung quanh, nên một đoạn văn có vài số mũ trông giãn dòng không đều. Đặt line-height: 0 cho chúng sẽ khắc phục điều này:

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

Khung màu xám cao hơn vì dòng thứ hai và thứ tư bị đẩy giãn ra. Trong khung màu xanh lá, mọi dòng đều cao bằng nhau. Thêm quy tắc đó vào stylesheet gốc của bạn một lần là xong.

Ký tự Unicode và MathML

Với vài trường hợp phổ biến có sẵn ký tự: ² (²), ³ (³), ¹ (¹), ™ (™) và ½ (½). Chúng không cần thẻ và không ảnh hưởng đến chiều cao dòng, nhưng chỉ có cho một số chữ số và chữ cái. Công cụ tạo chữ nhỏ cho thấy tất cả các chữ cái chỉ số trên mà Unicode có.

Với công thức thật sự (phân số, căn, số mũ của số mũ), hãy dùng MathML, được các trình duyệt hiện nay hiển thị sẵn:

<!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> nhận một cơ số và một số mũ; <msub> làm tương tự cho chỉ số dưới. Với một số mũ đơn lẻ trong câu, <sup> đơn giản hơn.

Lỗi thường gặp

• Dùng <sup> để làm chữ nhỏ. Thẻ này còn nâng chữ lên và cho người đọc biết đó là chỉ số trên. Dùng font-size cho chữ nhỏ.
• Khoảng cách dòng không đều. Thêm sup, sub { line-height: 0; }.
• Viết x^2 hoặc H2O trong văn bản hoàn chỉnh. Hãy dùng x<sup>2</sup> và H<sub>2</sub>O để nội dung được đọc đúng.
• Ký hiệu chú thích quá nhỏ để chạm. Trên điện thoại, một chữ số nâng lên là mục tiêu rất nhỏ. Thêm chút padding cho sup a, hoặc đặt ghi chú gần đoạn văn.