แท็ก HTML <sup> ระบุข้อความ superscript นี่คือข้อความที่ปรากฏด้านบนของบรรทัดข้อความ แท็ก <sub> แทนข้อความ subscript นี่คือข้อความที่ปรากฏด้านล่างของบรรทัดข้อความ
ส่วนใหญ่เมื่อเราพบข้อความ มันจะมี baseline และ x-height แบบดั้งเดิม
ทุกอย่างในข้อความนี้จนถึงจุดนี้ในบทความมี baseline baseline นี้คือจุดที่ underline จะแสดงถ้าเราจัดรูปแบบด้วยหนึ่ง และ x-height x-height คือเส้นจินตนาการที่ตัวอักษรพิมพ์เล็กจบลง มันได้ชื่อมาจาก x พิมพ์เล็กเพราะมันเติมพื้นที่
ในคู่มือนี้ เราจะพูดถึงวิธีกำหนด subscript และ superscript ใน HTML เราจะเดินผ่านตัวอย่างของแต่ละหัวข้อการจัดรูปแบบข้อความเหล่านี้ เพื่อคุณเรียนรู้ใช้ในโค้ดของคุณ
เมื่อไหร่ควรใช้ข้อความ Superscript และ Subscript?
มีครั้งที่เราต้องการใช้ตัวอักษรที่อยู่ครึ่งตัวด้านล่างหรือด้านบนของข้อความที่ตั้งไว้ Subscripts คือตัวอักษรที่ตั้งอยู่ครึ่งตัวด้านล่างของข้อความ Superscripts คือตัวอักษรที่ตั้งอยู่ครึ่งตัวด้านบนของข้อความ
ในสถานการณ์จริง เราใช้ตัวอักษรเหล่านี้เมื่อเราใช้สมการคณิตศาสตร์ สมการเคมี citations หรือ footnotes ตัวอย่างเช่น
HTML Supertext
เพื่อทำ super text ใน HTML ใช้แท็ก <sup> แท็กนี้ยกข้อความที่อยู่ภายในไปด้านบนของบรรทัด แท็ก sup ไม่มี attribute เฉพาะ tag
มาดู syntax สำหรับวิธีนี้:
81% of participants stated they felt more confident about their tech job prospects after attending a bootcamp. Get matched to a bootcamp today.
The average bootcamp grad spent less than six months in career transition, from starting a bootcamp to finding their first job.
<p>4 <sup>2</sup> = 16</p>
เราลงล้อมตัวอักษร "2" ไว้ภายในแท็ก <sup> ทำให้ "2" ปรากฏเป็น superscript โค้ดของเราตอนนี้แสดง:
4 ² = 16
HTML Subtext
คำสั่ง HTML <sub> กำหนด subtext Subtext หมายถึงข้อความที่ปรากฏไปทางด้านล่างของบรรทัดข้อความ
พิจารณา syntax นี้:
<p>This is main text. <sub>3</sub></p>
โค้ดของเราคืนค่า:
This is main text. ₃
เหมือนตัวอย่าง super text เราไม่ได้ระบุ tag attributes ใดๆ สำหรับ <sub> เพื่อย้ายข้อความไปเป็น subtext เราลงล้อมข้อความนั้นไว้ภายในแท็ก <sub>
Subtext มักใช้บอกรายหมายเลขธาตุใน periodic table of elements
HTML Subtext และ Supertext Example
มาเดินผ่านตัวอย่างของทั้ง <sub> และ <sup> บนหน้าเว็บ HTML พิจารณาโค้ดต่อไปนี้:
<!DOCTYPE html> <html lang="en"> <head> <style> </style> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Superscript and Subscript</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>Superscript</h3> <span>E=MC<sup>2</sup></span> <br /> <span>1.7 x 10<sup>4</sup></span> </div> <div> <h3>Subscript</h3> <span>H<sub>2</sub>O</span> <br /> <span><sup>†1</sup>Ipsum, Lorem. Footnote example, 2020.</span> </div> </div> </body> </html> ตามที่เห็น เราใช้ <sub> และ <sup> subscript tags และ superscript tags สร้างเอฟเฟกต์บน element <span> HTML มันมาพร้อมค่าเริ่มต้นบางอย่าง:
<style> sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font: smaller; } </style> ทั้งสองแท็กใช้ event และ global attributes ที่มีให้ใน HTML โดยพื้นฐานหมายถึงคุณสามารถตั้ง event handler บนมันได้หากใครคลิกที่ข้อความ
นอกจากนี้ คุณสามารถใช้ HTML attributes ปกติใดๆ เพื่อปรับแต่ง elements คุณสามารถหารายการ HTML attributes ปกติที่มีให้เราใน Global Attributes list ที่ W3Schools เขียน
สรุป
Element HTML <sub> เพิ่ม subtext ให้ย่อหน้าข้อความ Subtext ปรากฏด้านล่างของบรรทัดข้อความ <sup> เพิ่ม super text ให้ข้อความ ซึ่งปรากฏด้านบนของบรรทัดข้อความ
แค่นี้ thôi! ตอนนี้คุณสามารถสร้าง superscripts และ subscripts ใน HTML ได้สำเร็จแล้ว
ต้องการเรียนรู้ HTML เพิ่มเติม? ดูคู่มือ How to Learn HTML แบบสมบูรณ์ของเราสำหรับเคล็ดลับจากผู้เชี่ยวชาญและคำแนะนำเกี่ยวกับคอร์สออนไลน์และหนังสือชั้นนำ
