การสร้างข้อความขนาดเล็ก (Small Text) ใน HTML

เพื่อสร้างข้อความขนาดเล็กลงหนึ่งขนาด ให้ใช้แท็ก <small> ใน HTML แท็ก <small> ทำให้ขนาดฟอนต์เล็กลงหนึ่งระดับจากข้อความรอบข้าง

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อสร้างข้อความขนาดเล็กใน HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML small Tag</title>
  </head>
  <body>
    <h2>Tutorialspoint</h2>
    <p><small>Simply Easy Learning</small></p>
  </body>
</html>

ความหมายทางความหมาย (Semantic Meaning) ใน HTML5

ใน HTML5 แท็ก <small> มีความหมายเฉพาะ: ข้อความขนาดเล็ก (Small print) เช่น ข้อความลิขสิทธิ์, ข้อความปฏิเสธความรับผิดชอบ, ข้อกำหนดทางกฎหมาย, หมายเหตุเล็กน้อย - ไม่ได้หมายถึงแค่ "ขนาดตัวอักษรเล็ก" เท่านั้น

ตัวอย่างการใช้งานที่ถูกต้องตาม Semantic

<footer>
  <p><small>&copy; 2024 Company Name. All rights reserved.</small></p>
  <p><small>Terms of Service | Privacy Policy | Contact Us</small></p>
</footer>

<article>
  <h1>Product Name</h1>
  <p>Price: $99.99</p>
  <p><small>Tax and shipping not included. Offer valid until 12/31/2024.</small></p>
</article>

การจัดรูปแบบด้วย CSS (แนะนำ)

ถ้าต้องการให้ข้อความเล็กเพื่อการออกแบบ (Visual design) ไม่ใช่ความหมาย Small print ให้ใช้ CSS แทน:

.fine-print { font-size: 0.85em; color: #666; }
.caption { font-size: 0.8em; font-style: italic; }

สรุป: ใช้ <small> สำหรับ "Small print" (ข้อความทางกฎหมาย, ลิขสิทธิ์, ข้อจำกัดความรับผิดชอบ) ใช้ CSS font-size สำหรับการออกแบบทางสายตา