Hiển thị văn bản chỉ số dưới (subscript) trong HTML

Thẻ <sub> hiển thị text dưới đường cơ sở (subscript), dùng cho công thức hóa học, toán học.

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <title>HTML sub Tag</title>
  <style>
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; font-size: 1.2rem; }
    sub { color: #666; font-size: 0.8em; }
  </style>
</head>
<body>
  <h1>Văn Bản Chỉ Số Dưới (Subscript)</h1>
  <p>Công thức nước: H<sub>2</sub>O</p>
  <p>Axít sunfuric: H<sub>2</sub>SO<sub>4</sub></p>
  <p>Dãy số: x<sub>1</sub> + x<sub>2</sub> + x<sub>3</sub> = 17</p>
  <p>Logarit: log<sub>2</sub>8 = 3</p>
</body>
</html>

Kết quả

Các chỉ số "2", "4", "1", "2", "3", "2" hiển thị nhỏ hơn và thấp hơn đường chữ cơ sở.

Thẻ liên quan

• <sup> - Superscript (chỉ số trên): x², m², 1^st
• Kết hợp: C₆H₁₂O₆ (glucose)

CSS cho sub/sup

sub, sup { 
  font-size: 0.75em; 
  line-height: 0;  /* Không làm giãn line-height */
  vertical-align: baseline; 
  position: relative; 
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

Cách này giữ line-height ổn định, không làm giãn khoảng cách dòng.