การจัดรูปแบบข้อความด้วย HTML

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ Inline Elements และ Block-level Elements ซึ่งเป็นพื้นฐานสำคัญในการจัดวางโครงสร้างเว็บไซต์ ในบทนี้ เราจะมาเจาะลึกเรื่องการจัดรูปแบบข้อความด้วย HTML ซึ่งจะช่วยให้เราสามารถเน้นข้อความสำคัญ หรือแสดงข้อมูลในรูปแบบที่ต้องการได้

พื้นฐานการจัดรูปแบบข้อความ

HTML มี tags หลายตัวที่ช่วยให้เราสามารถจัดรูปแบบข้อความได้หลากหลายรูปแบบ แต่ละ tag มีความหมายและการใช้งานที่แตกต่างกัน เราจะมาดูกันว่า tags เหล่านี้คืออะไรบ้าง:

• <strong>: ใช้สำหรับเน้นข้อความที่มีความสำคัญ (important)
• <em>: ใช้สำหรับเน้นข้อความที่ต้องการเน้น (emphasized)
• <mark>: ใช้สำหรับไฮไลท์ข้อความ
• <small>: ใช้สำหรับแสดงข้อความขนาดเล็ก (เช่น ข้อความลิขสิทธิ์)
• <del>: ใช้สำหรับแสดงข้อความที่ถูกลบ
• <ins>: ใช้สำหรับแสดงข้อความที่ถูกเพิ่มเข้ามา
• <sub>: ใช้สำหรับแสดงข้อความที่เป็นตัวห้อย
• <sup>: ใช้สำหรับแสดงข้อความที่เป็นตัวยก

การใช้งานแต่ละ Tag อย่างละเอียด

เรามาดูตัวอย่างการใช้งานแต่ละ tag กัน:

<strong>

Tag <strong> ใช้สำหรับเน้นข้อความที่มีความสำคัญ มักจะแสดงผลเป็นตัวหนา (bold) โดยเบราว์เซอร์ส่วนใหญ่

<p>นี่คือข้อความ <strong>ที่สำคัญ</strong> ที่ต้องเน้นเป็นพิเศษ</p>

ผลลัพธ์:

นี่คือข้อความ ที่สำคัญ ที่ต้องเน้นเป็นพิเศษ

<em>

Tag <em> ใช้สำหรับเน้นข้อความที่ต้องการเน้น อาจจะเป็นการเน้นความรู้สึก หรือความสำคัญของคำนั้น มักจะแสดงผลเป็นตัวเอียง (italic) โดยเบราว์เซอร์ส่วนใหญ่

<p>ฉัน<em>ไม่</em>แน่ใจว่าฉันเข้าใจ</p>

ผลลัพธ์:

ฉันไม่แน่ใจว่าฉันเข้าใจ

<mark>

Tag <mark> ใช้สำหรับไฮไลท์ข้อความ เพื่อดึงดูดความสนใจ มักจะแสดงผลโดยการใส่สีพื้นหลังให้กับข้อความ

<p>โปรดจำไว้ว่า <mark>ฟังก์ชันนี้</mark> สำคัญมาก</p>

ผลลัพธ์:

โปรดจำไว้ว่า ฟังก์ชันนี้ สำคัญมาก

<small>

Tag <small> ใช้สำหรับแสดงข้อความขนาดเล็ก มักจะใช้สำหรับข้อความลิขสิทธิ์ ข้อความปฏิเสธความรับผิดชอบ หรือข้อความเสริมอื่นๆ

<p>© 2023 ตัวอย่างเว็บไซต์ <small>สงวนลิขสิทธิ์</small></p>

ผลลัพธ์:

© 2023 ตัวอย่างเว็บไซต์ สงวนลิขสิทธิ์

<del>

Tag <del> ใช้สำหรับแสดงข้อความที่ถูกลบ มักจะแสดงผลโดยการขีดฆ่าข้อความ

<p>ราคาเดิม: <del>100 บาท</del> ราคาใหม่: 80 บาท</p>

ผลลัพธ์:

ราคาเดิม: 100 บาท ราคาใหม่: 80 บาท

<ins>

Tag <ins> ใช้สำหรับแสดงข้อความที่ถูกเพิ่มเข้ามา มักจะใช้คู่กับ <del> เพื่อแสดงการเปลี่ยนแปลงของข้อความ มักจะแสดงผลโดยการขีดเส้นใต้ข้อความ

<p>ราคาเดิม: <del>100 บาท</del> ราคาใหม่: <ins>80 บาท</ins></p>

ผลลัพธ์:

ราคาเดิม: 100 บาท ราคาใหม่: 80 บาท

<sub>

Tag <sub> ใช้สำหรับแสดงข้อความที่เป็นตัวห้อย มักจะใช้ในสูตรทางวิทยาศาสตร์ หรือสมการทางคณิตศาสตร์

<p>สูตรทางเคมีของน้ำคือ H<sub>2</sub>O</p>

ผลลัพธ์:

สูตรทางเคมีของน้ำคือ H₂O

<sup>

Tag <sup> ใช้สำหรับแสดงข้อความที่เป็นตัวยก มักจะใช้ในเลขยกกำลัง หรือวันที่

<p>2<sup>3</sup> = 8</p>

ผลลัพธ์:

2³ = 8

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

คุณอาจจะเคยเห็น tag <b> และ <i> ซึ่งก็สามารถใช้ทำตัวหนาและตัวเอียงได้เช่นกัน แล้วทำไมเราถึงควรใช้ <strong> และ <em> แทน?

ความแตกต่างหลักคือเรื่องของ **ความหมาย (semantics)**

• <strong> และ <em> บอกว่าข้อความนั้นมีความสำคัญหรือต้องการเน้น ซึ่งเบราว์เซอร์และโปรแกรมอ่านหน้าจอ (screen reader) จะสามารถตีความหมายและนำไปใช้ประโยชน์ได้
• <b> และ <i> เพียงแค่บอกว่าให้แสดงผลเป็นตัวหนาหรือตัวเอียงเท่านั้น ไม่ได้บอกความหมายอะไรเพิ่มเติม

ดังนั้น เราควรใช้ <strong> และ <em> เมื่อต้องการเน้นความสำคัญหรือความหมายของข้อความ และใช้ <b> และ <i> เมื่อต้องการแค่เปลี่ยนรูปแบบการแสดงผลเท่านั้น (ซึ่งในปัจจุบัน มักจะใช้ CSS ในการจัดการรูปแบบการแสดงผลมากกว่า)

ตัวอย่าง:

<p>คำเตือน: <strong>อย่าสัมผัส!</strong></p>
<p>เขาพูดว่า: <em>ฉันไม่รู้</em></p>
<p>นี่คือ <b>ตัวอย่าง</b> ของการใช้ <b>tag b</b></p>
<p>นี่คือ <i>ตัวอย่าง</i> ของการใช้ <i>tag i</i></p>

ผลลัพธ์:

คำเตือน: อย่าสัมผัส!

เขาพูดว่า: ฉันไม่รู้

นี่คือ ตัวอย่าง ของการใช้ tag b

นี่คือ ตัวอย่าง ของการใช้ tag i

การใช้งาน Tag เหล่านี้เพื่อเน้นข้อความ

การใช้ tag เหล่านี้เพื่อเน้นข้อความควรทำอย่างเหมาะสม ไม่ควรใช้มากเกินไปจนทำให้ข้อความดูรกและอ่านยาก

เคล็ดลับ:

• ใช้ <strong> สำหรับข้อความที่สำคัญจริงๆ
• ใช้ <em> สำหรับข้อความที่ต้องการเน้นความรู้สึก หรือความสำคัญของคำนั้น
• ใช้ <mark> สำหรับไฮไลท์คำหรือวลีที่ต้องการให้ผู้ใช้อ่านสังเกต
• ใช้ <small> สำหรับข้อความที่ไม่สำคัญเท่าไหร่
• ใช้ <del> และ <ins> เมื่อต้องการแสดงการเปลี่ยนแปลงของข้อความ
• ใช้ <sub> และ <sup> เมื่อต้องการแสดงตัวห้อยและตัวยก

ตัวอย่างการใช้งานจริง:

<p>ประกาศ: <strong>ระบบจะปิดปรับปรุงในวันเสาร์ที่ 25 พฤศจิกายน 2566 เวลา 00:00 - 06:00 น.</strong> <small>ขออภัยในความไม่สะดวก</small></p>
<p>คำแนะนำ: <em>โปรดตรวจสอบข้อมูลให้ถูกต้องก่อนยืนยัน</em></p>
<p>หมายเหตุ: <mark>ราคาสินค้าอาจมีการเปลี่ยนแปลงโดยไม่ต้องแจ้งให้ทราบล่วงหน้า</mark></p>
<p>คุณสมบัติ: <del>กันน้ำ</del> <ins>กันน้ำระดับ IP68</ins></p>

ผลลัพธ์:

ประกาศ: ระบบจะปิดปรับปรุงในวันเสาร์ที่ 25 พฤศจิกายน 2566 เวลา 00:00 - 06:00 น. ขออภัยในความไม่สะดวก

คำแนะนำ: โปรดตรวจสอบข้อมูลให้ถูกต้องก่อนยืนยัน

หมายเหตุ: ราคาสินค้าอาจมีการเปลี่ยนแปลงโดยไม่ต้องแจ้งให้ทราบล่วงหน้า

คุณสมบัติ: กันน้ำ กันน้ำระดับ IP68

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับการจัดรูปแบบข้อความด้วย HTML โดยใช้ tags ต่างๆ เช่น <strong>, <em>, <mark>, <small>, <del>, <ins>, <sub> และ <sup> รวมถึงความแตกต่างระหว่าง <strong> กับ <b> และ <em> กับ <i> การใช้ tag เหล่านี้อย่างถูกต้องจะช่วยให้เราสามารถสร้างเนื้อหาที่น่าสนใจและสื่อความหมายได้อย่างชัดเจน

ในบทต่อไป เราจะมาเรียนรู้วิธีการสร้าง Navigation Bar ด้วย HTML ซึ่งเป็นส่วนประกอบสำคัญของเว็บไซต์ทุกเว็บไซต์