แท็ก HTML ระบุข้อความตัวยก นี่คือข้อความที่ปรากฏที่ด้านบนของบรรทัดข้อความ แท็ก หมายถึงข้อความตัวห้อย นี่คือข้อความที่ปรากฏที่ด้านล่างของบรรทัดข้อความ
ส่วนใหญ่เมื่อเราพบข้อความ ข้อความจะมีเส้นฐานดั้งเดิมและความสูง x
ทุกอย่างในบทความนี้จนถึงจุดนี้ในบทความนี้มีพื้นฐาน พื้นฐานนี้เป็นจุดที่ขีดเส้นใต้จะปรากฏขึ้นหากเราจัดรูปแบบด้วยหนึ่งและความสูง x ความสูง x คือเส้นจินตภาพที่ตัวพิมพ์เล็กลงท้าย ได้ชื่อจากตัวพิมพ์เล็ก x เนื่องจากเติมช่องว่าง
ในคู่มือนี้ เราจะพูดถึงวิธีกำหนดตัวห้อยและตัวยกใน HTML เราจะอธิบายตัวอย่างหัวข้อการจัดรูปแบบข้อความแต่ละหัวข้อเพื่อให้คุณได้เรียนรู้การใช้ในโค้ดของคุณ
เมื่อใดจึงจะใช้ข้อความตัวยกและตัวห้อย
มีบางครั้งที่เราต้องการใช้อักขระที่มีอักขระครึ่งตัวที่อยู่ด้านล่างหรือเหนือข้อความชุด ตัวห้อยคืออักขระที่ตั้งค่าครึ่งอักขระใต้ข้อความ ตัวยกคืออักขระที่ตั้งค่าอักขระครึ่งตัวเหนือข้อความ
ในสภาพแวดล้อมจริง เราใช้อักขระเหล่านี้เมื่อเราใช้สมการคณิตศาสตร์ สมการเคมี การอ้างอิงหรือเชิงอรรถ เป็นต้น
HTML ซูเปอร์เท็กซ์
ในการสร้างข้อความขั้นสูงใน HTML ให้ใช้แท็ก แท็กนี้จะเพิ่มข้อความที่ล้อมรอบด้านบนสุดของบรรทัด แท็ก sup ไม่มีแอตทริบิวต์เฉพาะของแท็ก
มาดูไวยากรณ์ของวิธีนี้กัน:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
<p>4 <sup>2</sup> = 16</p>
เราได้ใส่อักขระ “2” ไว้ในแท็ก สิ่งนี้ทำให้ “2” ปรากฏในตัวยก ตอนนี้รหัสของเราแสดง:
4 ² =16
HTML ซับเท็กซ์
คำสั่ง HTML กำหนดข้อความย่อย Subtext หมายถึงข้อความที่ปรากฏที่ด้านล่างของบรรทัดข้อความ
พิจารณาไวยากรณ์นี้:
<p>This is main text. <sub>3</sub></p>
รหัสของเราส่งคืน:
นี่คือข้อความหลัก ₃
เช่นเดียวกับในตัวอย่างข้อความขั้นสูง เรายังไม่ได้ระบุแอตทริบิวต์ของแท็กสำหรับ ในการย้ายข้อความเป็นข้อความย่อย เราใส่ข้อความนั้นไว้ในแท็ก
คำบรรยายมักใช้เพื่ออธิบายหมายเลของค์ประกอบในตารางธาตุของธาตุ
HTML Subtext และ Supertext Example
มาดูตัวอย่างทั้ง และ บนหน้าเว็บ 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>
อย่างที่คุณเห็น เราใช้ และ แท็กตัวห้อยและแท็กตัวยกเพื่อสร้างผลกระทบต่อ องค์ประกอบ HTML มันมาพร้อมกับค่าเริ่มต้นบางอย่าง:
<style>
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font: smaller;
}
</style>
แท็กทั้งสองใช้เหตุการณ์และแอตทริบิวต์ส่วนกลางที่พร้อมใช้งานสำหรับเราในรูปแบบ HTML โดยทั่วไปหมายความว่าคุณสามารถตั้งค่าตัวจัดการเหตุการณ์ได้หากมีคนคลิกที่ข้อความ
นอกจากนี้ คุณสามารถใช้แอตทริบิวต์ HTML ปกติใดๆ เพื่อปรับแต่งองค์ประกอบได้ คุณสามารถค้นหารายการแอตทริบิวต์ HTML ปกติที่เราสามารถใช้ได้ในรายการ Global Attributes ที่เขียนโดย W3Schools
บทสรุป
องค์ประกอบ HTML เพิ่มข้อความย่อยลงในย่อหน้าของข้อความ ข้อความย่อยปรากฏที่ด้านล่างของบรรทัดข้อความ เพิ่มข้อความพิเศษลงในข้อความ ซึ่งจะปรากฏที่ด้านบนของบรรทัดข้อความ
แค่นั้นแหละ! ตอนนี้คุณสามารถสร้างตัวยกและตัวห้อยใน HTML ได้สำเร็จ
คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ HTML หรือไม่? ดูคู่มือ HTML วิธีการเรียนรู้ฉบับสมบูรณ์สำหรับเคล็ดลับและคำแนะนำจากผู้เชี่ยวชาญในหลักสูตรและหนังสือออนไลน์ชั้นนำ
