Thẻ HTML <sup> chỉ định văn bản chữ trên (superscript). Đây là văn bản xuất hiện ở phần trên của một dòng văn bản. Thẻ <sub> đại diện cho văn bản chữ dưới (subscript). Đây là văn bản xuất hiện ở phần dưới của một dòng văn bản.
Hầu hết thời gian khi chúng ta gặp văn bản, nó có đường cơ sở (baseline) và chiều cao x (x-height) truyền thống.
Mọi thứ trong văn bản này cho đến thời điểm này trong bài viết đều có đường cơ sở. Đường cơ sở này về cơ bản là điểm nơi một gạch dưới sẽ xuất hiện nếu chúng ta định dạng nó, và chiều cao x. Chiều cao x là đường tưởng tượng nơi một chữ thường kết thúc. Nó lấy tên từ chữ thường x vì nó lấp đầy không gian đó.
Trong hướng dẫn này, chúng ta sẽ nói về cách định nghĩa chữ dưới và chữ trên trong HTML. Chúng ta sẽ đi qua ví dụ của từng chủ đề định dạng văn bản này để bạn có thể học cách sử dụng chúng trong mã của mình.
Khi nào sử dụng văn bản Chữ trên và Chữ dưới?
Có những lúc chúng ta muốn sử dụng các ký tự được đặt nửa ký tự dưới hoặc trên văn bản đã đặt. Chữ dưới (Subscripts) là các ký tự được đặt nửa ký tự dưới văn bản. Chữ trên (Superscripts) là các ký tự được đặt nửa ký tự trên văn bản.
Trong cài đặt thực tế, chúng ta sử dụng các ký tự này khi dùng phương trình toán học, phương trình hóa học, trích dẫn hoặc chú thích chân trang (footnotes), ví dụ.
HTML Chữ trên (Supertext)
Để tạo chữ trên trong HTML, hãy sử dụng thẻ <sup>. Thẻ này nâng bất kỳ văn bản nào được bao quanh lên trên cùng của dòng. Thẻ sup không có bất kỳ thuộc tính dành riêng cho thẻ nào.
Hãy xem cú pháp cho phương pháp này:
<p>4 <sup>2</sup> = 16</p>
Chúng ta đã bao quanh ký tự "2" trong các thẻ <sup>. Điều này làm cho "2" xuất hiện ở dạng chữ trên. Mã của chúng ta bây giờ hiển thị:
4 2 = 16
HTML Chữ dưới (Subtext)
Lệnh HTML <sub> định nghĩa chữ dưới. Chữ dưới đề cập đến văn bản xuất hiện về phía dưới của một dòng văn bản.
Xem xét cú pháp này:
<p>Đây là văn bản chính. <sub>3</sub></p>
Mã của chúng ta trả về:
Đây là văn bản chính. 3
Giống như ví dụ chữ trên, chúng ta không chỉ định bất kỳ thuộc tính thẻ nào cho <sub>. Để di chuyển văn bản thành chữ dưới, chúng ta bao quanh văn bản đó trong thẻ <sub>.
Chữ dưới thường được dùng để mô tả số thứ tự nguyên tố trên bảng tuần hoàn các nguyên tố hóa học.
Ví dụ HTML Chữ dưới và Chữ trên
Hãy cùng xem ví dụ của cả <sub> và <sup> trên một trang web HTML. Xem xét mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chữ trên và Chữ dưới</title>
<style>
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font: smaller; }
</style>
</head>
<body>
<div style="text-align:center;" class="container">
<div>
<h3>Chữ trên</h3>
<span>E=MC<sup>2</sup></span>
<br />
<span>1.7 x 10<sup>4</sup></span>
</div>
<div>
<h3>Chữ dưới</h3>
<span>H<sub>2</sub>O</span>
<br />
<span><sup>†1</sup>Ipsum, Lorem. Ví dụ chú thích, 2020.</span>
</div>
</div>
</body>
</html>
Như bạn thấy, chúng ta sử dụng thẻ <sub> và <sup> để tạo hiệu ứng trên phần tử HTML <span>. Nó đi kèm với một số giá trị mặc định:
<style>
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font: smaller; }
</style>
Cả hai thẻ đều sử dụng thuộc tính sự kiện (event attributes) và thuộc tính toàn cục (global attributes) có sẵn trong HTML. Về cơ bản, điều này nghĩa là bạn có thể đặt trình xử lý sự kiện trên nó nếu ai đó nhấp vào văn bản.
Ngoài ra, bạn có thể sử dụng bất kỳ thuộc tính HTML thông thường nào để tùy chỉnh các phần tử. Bạn có thể tìm thấy danh sách các thuộc tính HTML thông thường có sẵn trong danh sách Thuộc tính Toàn cục do W3Schools viết.
Kết luận
Phần tử HTML <sub> thêm chữ dưới vào một đoạn văn bản. Chữ dưới xuất hiện ở dưới cùng của một dòng văn bản. <sup> thêm chữ trên vào văn bản, xuất hiện ở trên cùng của một dòng văn bản.
Đó là tất cả! Bạn hiện đã có thể tạo thành công chữ trên và chữ dưới trong HTML.
Bạn muốn tìm hiểu thêm về HTML? Hãy xem hướng dẫn hoàn chỉnh Cách học HTML của chúng tôi để có mẹo chuyên gia và hướng dẫn về các khóa học trực tuyến và sách hàng đầu.