ทำความเข้าใจ HTML Formatting Elements เพิ่มลูกเล่นให้ข้อความในหน้าเว็บ

HTML มี Formatting Elements ที่ช่วยให้ข้อความดูพิเศษขึ้น เช่น ตัวหนา, ตัวเอียง, หรือแม้กระทั่งข้อความที่ดูสำคัญเป็นพิเศษ

บทความนี้จะพาคุณไปรู้จักกับแท็กที่สำคัญเหล่านี้ พร้อมตัวอย่างการใช้งานที่เหมาะสม

HTML Formatting Elements: คืออะไร?

Formatting Elements ถูกออกแบบมาเพื่อช่วยตกแต่งข้อความในเว็บให้แสดงผลในรูปแบบเฉพาะ เช่น การเน้นความสำคัญของข้อความ การลบข้อความเก่า หรือแสดงข้อความใหม่ที่เพิ่มเข้ามา

---

รายการและตัวอย่างการใช้งาน

1. <b> - Bold text ใช้ทำให้ข้อความตัวหนาโดยไม่มีความหมายพิเศษเพิ่มเติม

<p>This is <b>bold</b> text.</p>

2. <strong> - Important text ใช้เน้นข้อความสำคัญ โดยให้ความสำคัญกับ semantic

<p>This is <strong>important</strong> text.</p>

3. <i> - Italic text ใช้ทำข้อความให้เป็นตัวเอียง โดยไม่มีความหมายพิเศษเพิ่มเติม

<p>This is <i>italic</i> text.</p>

4. <em> - Emphasized text ใช้เน้นความสำคัญด้วย semantic โดยส่วนใหญ่แสดงผลเป็นตัวเอียง

<p>This is  <em>emphasized</em> text.</p>

5. `<mark>` - Marked text
ใช้สำหรับเน้นข้อความด้วยสีพื้นหลัง เช่น การไฮไลต์ข้อความ

```html
<p>This is  <mark>marked</mark> text.</p>

6. <small> - Smaller text ใช้ทำข้อความให้เล็กลง เหมาะกับคำอธิบายหรือหมายเหตุ

<p>This is  <small>small</small> text.</p>

7. <del> - Deleted text ใช้แสดงข้อความที่ถูกลบออก เช่น ข้อความที่ไม่ใช้งานแล้ว

<p>This is  <del>deleted</del> text.</p>

8. <ins> - Inserted text ใช้แสดงข้อความที่ถูกเพิ่มเข้ามา โดยมักจะใช้คู่กับ

<p>This is  <ins>inserted</ins> text.</p>

9. <sub> - Subscript text ใช้สำหรับแสดงข้อความในรูปแบบตัวห้อย เช่น สูตรทางเคมี

<p>This is  H<sub>2</sub>O.</p>

10. <sup> - Superscript text ใช้สำหรับแสดงข้อความในรูปแบบตัวยก เช่น ค่ากำลัง

<p>This is  E=mc<sup>2</sup>.</p>

**ความแตกต่างระหว่าง <b> กับ <strong> และ <i> กับ <em>

• <b> และ <i>: เน้นแค่การตกแต่ง ไม่มีความหมายทาง semantic
• <strong> และ <em>: เพิ่มความสำคัญทาง semantic เหมาะกับ SEO และการเข้าถึง (Accessibility)

สรุป

• ใช้ <strong> และ <em> แทน <b> และ <i> หากข้อความมีความสำคัญต่อความหมายของเนื้อหา
• ใช้ <mark> เพื่อเน้นข้อความที่ต้องการความโดดเด่นชั่วคราว เช่น คำค้นหาหรือการแจ้งเตือน
• ใช้ <del> และ <ins> ในเอกสารที่ต้องการแสดงการเปลี่ยนแปลงเนื้อหา
• ใช้ <sub> และ <sup> สำหรับสูตรหรือข้อความทางคณิตศาสตร์/วิทยาศาสตร์